/* =========================================================================
   PIXELORGAN — Animations
   Subtle, premium, performance-friendly.
   ========================================================================= */

/* Reveal on scroll — toggled by IntersectionObserver in main.js */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--po-ease-out), transform .9s var(--po-ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
[data-reveal="fade"]        { transform: translateY(0); }
[data-reveal="left"]        { transform: translateX(-32px); }
[data-reveal="right"]       { transform: translateX(32px); }
[data-reveal="scale"]       { transform: scale(.96); }
[data-reveal="left"].is-revealed,
[data-reveal="right"].is-revealed,
[data-reveal="scale"].is-revealed { transform: none; }

/* Stagger via data-delay (in ms, set inline if needed) */
[data-reveal][data-delay="100"]  { transition-delay: 100ms; }
[data-reveal][data-delay="200"]  { transition-delay: 200ms; }
[data-reveal][data-delay="300"]  { transition-delay: 300ms; }
[data-reveal][data-delay="400"]  { transition-delay: 400ms; }
[data-reveal][data-delay="500"]  { transition-delay: 500ms; }
[data-reveal][data-delay="600"]  { transition-delay: 600ms; }

/* Floating motion for hero artwork */
@keyframes poFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-14px); }
}

@keyframes poHaloFloat {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(20px,-10px) scale(1.05); }
}

@keyframes poSpin {
  to { transform: rotate(360deg); }
}

@keyframes poPulse {
  0%,100% { transform: scale(1);   opacity: 1; }
  50%     { transform: scale(1.4); opacity: .5; }
}

@keyframes poFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes poShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Hero text staggered entrance */
.po-hero .po-eyebrow         { animation: poFadeUp .7s var(--po-ease-out) both; animation-delay: .05s; }
.po-hero .po-hero__title     { animation: poFadeUp .9s var(--po-ease-out) both; animation-delay: .15s; }
.po-hero .po-lead            { animation: poFadeUp .9s var(--po-ease-out) both; animation-delay: .25s; }
.po-hero .po-hero__cta       { animation: poFadeUp .9s var(--po-ease-out) both; animation-delay: .35s; }
.po-hero .po-hero__meta      { animation: poFadeUp .9s var(--po-ease-out) both; animation-delay: .45s; }
.po-hero .po-hero__visual    { animation: poFadeUp 1s  var(--po-ease-out) both; animation-delay: .25s; }

/* Card hover micro-glow shimmer */
.po-card__icon {
  background-size: 200% 100%;
  animation: poShimmer 8s ease infinite;
}

/* Counter — only changes via JS, animation just helps emphasize */
.po-counter { display: inline-block; }