/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════════ */

/* Hero panel drift — slow Ken Burns */
.hero__panel--1 img { animation: panelDrift1 24s var(--ease-smooth) infinite alternate; }
.hero__panel--2 img { animation: panelDrift2 28s var(--ease-smooth) infinite alternate; }
.hero__panel--3 img { animation: panelDrift3 26s var(--ease-smooth) infinite alternate; }

@keyframes panelDrift1 {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-8px, -14px, 0); }
}
@keyframes panelDrift2 {
  from { transform: scale(1.05) translate3d(0, -8px, 0); }
  to   { transform: scale(1.02) translate3d(8px, 8px, 0); }
}
@keyframes panelDrift3 {
  from { transform: scale(1.03) translate3d(0, 4px, 0); }
  to   { transform: scale(1.06) translate3d(6px, -12px, 0); }
}

/* Orange bottom glow pulse */
@keyframes glowBreathe {
  0%,100% { opacity: 0.88; transform: translateX(-50%) scaleY(1); }
  50%     { opacity: 0.98; transform: translateX(-50%) scaleY(1.04); }
}

.hero__glow {
  animation: glowBreathe 7.5s var(--ease-smooth) infinite;
}

/* Hero flare — subtle cosmic glint at the section boundary */
@keyframes heroFlareDrift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes heroFlareLumen {
  0%,100% {
    opacity: 0.86;
    filter: saturate(1.06) brightness(1);
  }
  48% {
    opacity: 1;
    filter: saturate(1.28) brightness(1.16);
  }
  64% {
    opacity: 0.9;
    filter: saturate(1.14) brightness(1.06);
  }
}

@keyframes heroFlareHalo {
  0%,100% {
    opacity: 0.56;
    transform: translate3d(-50%, -50%, 0) scaleX(0.94);
  }
  50% {
    opacity: 0.84;
    transform: translate3d(-50%, -50%, 0) scaleX(1.08);
  }
}

@keyframes heroFlareSweep {
  0%, 18% {
    opacity: 0;
    transform: translate3d(-65%, -50%, 0) skewX(-10deg) scaleX(0.86);
  }
  34% {
    opacity: 0.72;
  }
  52% {
    opacity: 0.98;
    transform: translate3d(108vw, -50%, 0) skewX(-10deg) scaleX(1.08);
  }
  56%, 100% {
    opacity: 0;
    transform: translate3d(120vw, -50%, 0) skewX(-10deg) scaleX(0.92);
  }
}

@keyframes repBoundaryFlareDrift {
  0% {
    background-position:
      0% 100%,
      50% 100%;
  }
  100% {
    background-position:
      100% 100%,
      50% 100%;
  }
}

@keyframes repBoundaryFlareLumen {
  0%,100% {
    opacity: 0.9;
    filter: saturate(1.18) brightness(1.04);
  }
  48% {
    opacity: 1;
    filter: saturate(1.5) brightness(1.34);
  }
  66% {
    opacity: 0.94;
    filter: saturate(1.28) brightness(1.16);
  }
}

/* Headline shimmer after load */
@keyframes headlineIn {
  from {
    opacity: 0;
    letter-spacing: -0.05em;
    transform: translate3d(0, 28px, 0);
  }
  to {
    opacity: 1;
    letter-spacing: -0.02em;
    transform: translate3d(0, 0, 0);
  }
}

.hero__eyebrow { animation: headlineIn 0.9s var(--ease-smooth) 0.08s both; }
.hero__hl-line--1 { animation: headlineIn 1.1s var(--ease-smooth) 0.18s both; }
.hero__hl-line--2 { animation: headlineIn 1.1s var(--ease-smooth) 0.34s both; }
.hero__subtext { animation: headlineIn 0.95s var(--ease-smooth) 0.48s both; }
.hero__demos--entrance { animation: headlineIn 0.95s var(--ease-smooth) 0.62s both; }
.hero__demo-cta--entrance { animation: headlineIn 0.9s var(--ease-smooth) 0.78s both; }

/* Cloud drift */
@keyframes cloudDrift {
  0%,100% { transform: translate3d(0, 0, 0); }
  33%     { transform: translate3d(20px, -10px, 0); }
  66%     { transform: translate3d(-14px, 8px, 0); }
}

/* Background purpose image subtle pulse */
@keyframes purposeBgShift {
  0%,100% {
    opacity: 0.82;
    transform: translate3d(0, var(--purpose-wave-y), 0) scale(var(--purpose-wave-scale));
  }
  50% {
    opacity: 0.86;
    transform: translate3d(0, var(--purpose-wave-y-mid), 0) scale(var(--purpose-wave-scale-mid));
  }
}

.purpose__bg-img--1 {
  animation: purposeBgShift 18s var(--ease-smooth) infinite;
}

/* Section reveal system — progressive enhancement only.
   Content stays visible unless JS explicitly marks a target as pending. */
.reveal--pending {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.996);
  filter: blur(4px);
  transition:
    opacity 0.62s var(--ease-out),
    transform 0.78s var(--ease-soft),
    filter 0.78s var(--ease-soft);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.reveal--left.reveal--pending {
  transform: translate3d(-22px, 16px, 0) scale(0.996);
}

.reveal--right.reveal--pending {
  transform: translate3d(22px, 16px, 0) scale(0.996);
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.revealed,
.reveal.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.revealed,
.reveal-left.reveal--visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.reveal-scale.revealed,
.reveal-scale.reveal--visible {
  opacity: 1;
  transform: scale(1);
}

.reveal:is(.work-card, .reel-card, .studio-card, .rep-agent) {
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.28s var(--ease-out),
    border-color 0.25s,
    filter 0.28s var(--ease-out);
}

.reveal.revealed.reel-card:hover { transform: translateY(-6px); }
.reveal.revealed.studio-card:hover { transform: translateY(-4px); }
.reveal-scale.revealed.global__logo-item:hover { transform: translateY(-3px) scale(1); }

@keyframes logoReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes workCardPromote {
  from {
    transform: translate3d(0, 10px, 0) scale(0.996);
    filter: saturate(1);
  }
  to {
    transform: translate3d(0, 0, 0) scale(1);
    filter: saturate(1.05);
  }
}

/* Logo item stagger fade */
.global__logo-item {
  transition-delay: calc(var(--logo-i, 0) * 0.04s);
}

/* Studio card hover lift is handled in components.css */

/* Scanlines subtle flicker */
@keyframes scanFlicker {
  0%,100% { opacity: 0.36; }
  50%     { opacity: 0.3; }
}

.scanlines {
  animation: scanFlicker 12s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html:focus-within {
    scroll-behavior: auto;
  }

  .hero__panel--1 img,
  .hero__panel--2 img,
  .hero__panel--3 img,
  .hero__glow,
  .hero__flare,
  .hero__flare::before,
  .hero__flare::after,
  .rep::before,
  .purpose__bg-img--1,
  .scanlines {
    animation: none !important;
  }

  .fade-in--visible,
  .reveal--visible,
  .global__logo-item.is-visible,
  .js-enhanced .work-card.work-card--active {
    animation: none !important;
  }

  .reveal--pending,
  .reveal,
  .reveal-left,
  .reveal-scale,
  .fade-in--visible,
  .reveal--visible,
  .revealed {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .audio-player__bar-wrapper,
  .audio-player__vol,
  .audio-player__vol::after,
  .work-card,
  .work-card__tag,
  .work-card__media :is(img, video),
  .work-card__play,
  .video-modal__backdrop,
  .video-modal__dialog,
  .video-modal__close,
  .global__logo-item,
  .purpose__tab,
  .reel-card,
  .reel-card__thumb img,
  .reel-card__play-overlay,
  .reel-card__play-btn,
  .studio-card,
  .contact__choice,
  .contact__button,
  .rep-agent,
  .rep-agent__city,
  .rep-agent__logo img,
  .footer__social a,
  .ai-assistant__panel,
  .ai-assistant__launcher,
  .ai-assistant__close,
  .ai-assistant__send,
  .ai-assistant__prompts button,
  .ai-assistant__input {
    transition: none !important;
  }
}

@media (max-width: 768px) {
  .reveal--pending {
    transform: translate3d(0, 10px, 0) scale(0.998);
    filter: blur(2px);
    transition:
      opacity 0.28s var(--ease-out),
      transform 0.34s var(--ease-soft),
      filter 0.34s var(--ease-soft);
  }

  .reveal--left.reveal--pending,
  .reveal--right.reveal--pending {
    transform: translate3d(0, 10px, 0) scale(0.998);
  }

  .reveal,
  .reveal-left,
  .reveal-scale {
    transition-duration: 0.32s, 0.32s;
  }

  .reveal:is(.work-card, .reel-card, .studio-card, .rep-agent) {
    transition-duration: 0.32s, 0.32s, 0.22s, 0.2s, 0.22s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal--pending,
  .reveal,
  .reveal-left,
  .reveal-scale,
  .fade-in--visible,
  .reveal--visible,
  .revealed {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}