/* ==========================================================================
   Hero Motion V1 — Homepage cinematic (Phase 9.2)
   Scoped under .hero-v2.hero-v2--cinematic · uses Motion Language tokens
   ========================================================================== */

.hero-v2 {
  /* --- Hero motion tokens (readable before cinematic class) --- */
  --hero-motion-eyebrow-delay: 80ms;
  --hero-motion-eyebrow-duration: 380ms;
  --hero-motion-eyebrow-y: 10px;

  --hero-motion-title-delay: 160ms;
  --hero-motion-title-duration: 620ms;
  --hero-motion-title-y: 18px;
  --hero-motion-title-scale: 0.985;

  --hero-motion-deck-delay: 260ms;
  --hero-motion-deck-duration: 520ms;
  --hero-motion-deck-y: 14px;

  --hero-motion-cta-primary-delay: 340ms;
  --hero-motion-cta-secondary-delay: 390ms;
  --hero-motion-cta-duration: 420ms;
  --hero-motion-cta-y: 8px;

  --hero-motion-badge-base-delay: 440ms;
  --hero-motion-badge-step: 80ms;
  --hero-motion-badge-duration: 480ms;
  --hero-motion-badge-y: 8px;

  --hero-motion-image-delay: 120ms;
  --hero-motion-image-duration: 900ms;
  --hero-motion-image-y: 12px;
  --hero-motion-image-scale-start: 1.03;

  --hero-motion-float-amplitude: 2px;
  --hero-motion-float-duration: 9s;
  --hero-motion-entrance-complete: 1100ms;

  --hero-motion-btn-hover-duration: 180ms;
  --hero-motion-btn-lift: 1px;
  --hero-motion-btn-arrow-x: 4px;

  --hero-motion-parallax-max: 6px;
  --hero-motion-parallax-ease: 0.08;
}

.hero-v2--cinematic.hero-v2--settled .hero-v2__eyebrow,
.hero-v2--cinematic.hero-v2--settled .hero-v2__title,
.hero-v2--cinematic.hero-v2--settled .hero-v2__deck,
.hero-v2--cinematic.hero-v2--settled .hero-v2__cta,
.hero-v2--cinematic.hero-v2--settled .hero-v2__badge,
.hero-v2--cinematic.hero-v2--settled .hero-v2__media-motion {
  will-change: auto;
}

/* --- Shared entrance transition --- */

.hero-v2--cinematic .hero-v2__eyebrow,
.hero-v2--cinematic .hero-v2__title,
.hero-v2--cinematic .hero-v2__deck,
.hero-v2--cinematic .hero-v2__cta,
.hero-v2--cinematic .hero-v2__badge,
.hero-v2--cinematic .hero-v2__media-motion {
  backface-visibility: hidden;
  will-change: opacity, transform;
}

/* --- Pending (pre-reveal) --- */

.hero-v2--cinematic:not(.hero-v2--revealed) .hero-v2__eyebrow {
  opacity: 0;
  transform: translate3d(0, var(--hero-motion-eyebrow-y), 0);
}

.hero-v2--cinematic:not(.hero-v2--revealed) .hero-v2__title {
  opacity: 0;
  transform: translate3d(0, var(--hero-motion-title-y), 0) scale(var(--hero-motion-title-scale));
  transform-origin: top left;
}

.hero-v2--cinematic:not(.hero-v2--revealed) .hero-v2__deck {
  opacity: 0;
  transform: translate3d(0, var(--hero-motion-deck-y), 0);
}

.hero-v2--cinematic:not(.hero-v2--revealed) .hero-v2__cta--primary {
  opacity: 0;
  transform: translate3d(0, var(--hero-motion-cta-y), 0);
}

.hero-v2--cinematic:not(.hero-v2--revealed) .hero-v2__cta--secondary {
  opacity: 0;
  transform: translate3d(0, var(--hero-motion-cta-y), 0);
}

.hero-v2--cinematic:not(.hero-v2--revealed) .hero-v2__badge {
  opacity: 0;
  transform: translate3d(0, var(--hero-motion-badge-y), 0);
}

.hero-v2--cinematic:not(.hero-v2--revealed) .hero-v2__media-motion {
  opacity: 0;
  transform: translate3d(0, var(--hero-motion-image-y), 0) scale(var(--hero-motion-image-scale-start));
  transform-origin: center center;
}

/* --- Revealed entrance (keyframes — independent from hover transitions) --- */

@keyframes hero-motion-v1-eyebrow-in {
  from {
    opacity: 0;
    transform: translate3d(0, var(--hero-motion-eyebrow-y), 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hero-motion-v1-title-in {
  from {
    opacity: 0;
    transform: translate3d(0, var(--hero-motion-title-y), 0) scale(var(--hero-motion-title-scale));
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes hero-motion-v1-deck-in {
  from {
    opacity: 0;
    transform: translate3d(0, var(--hero-motion-deck-y), 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hero-motion-v1-cta-in {
  from {
    opacity: 0;
    transform: translate3d(0, var(--hero-motion-cta-y), 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hero-motion-v1-badge-in {
  from {
    opacity: 0;
    transform: translate3d(0, var(--hero-motion-badge-y), 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hero-motion-v1-image-in {
  from {
    opacity: 0;
    transform: translate3d(0, var(--hero-motion-image-y), 0) scale(var(--hero-motion-image-scale-start));
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.hero-v2--cinematic.hero-v2--revealed .hero-v2__eyebrow {
  animation: hero-motion-v1-eyebrow-in var(--hero-motion-eyebrow-duration) var(--motion-ease-entrance) var(--hero-motion-eyebrow-delay) both;
}

.hero-v2--cinematic.hero-v2--revealed .hero-v2__title {
  transform-origin: top left;
  animation: hero-motion-v1-title-in var(--hero-motion-title-duration) var(--motion-ease-emphasized) var(--hero-motion-title-delay) both;
}

.hero-v2--cinematic.hero-v2--revealed .hero-v2__deck {
  animation: hero-motion-v1-deck-in var(--hero-motion-deck-duration) var(--motion-ease-entrance) var(--hero-motion-deck-delay) both;
}

.hero-v2--cinematic.hero-v2--revealed .hero-v2__cta--primary {
  animation: hero-motion-v1-cta-in var(--hero-motion-cta-duration) var(--motion-ease-entrance) var(--hero-motion-cta-primary-delay) both;
  transition:
    transform var(--hero-motion-btn-hover-duration) var(--motion-ease-standard),
    box-shadow var(--hero-motion-btn-hover-duration) var(--motion-ease-standard),
    background-color var(--hero-motion-btn-hover-duration) var(--motion-ease-standard),
    border-color var(--hero-motion-btn-hover-duration) var(--motion-ease-standard),
    color var(--hero-motion-btn-hover-duration) var(--motion-ease-standard);
}

.hero-v2--cinematic.hero-v2--revealed .hero-v2__cta--secondary {
  animation: hero-motion-v1-cta-in var(--hero-motion-cta-duration) var(--motion-ease-entrance) var(--hero-motion-cta-secondary-delay) both;
  transition:
    transform var(--hero-motion-btn-hover-duration) var(--motion-ease-standard),
    box-shadow var(--hero-motion-btn-hover-duration) var(--motion-ease-standard),
    background-color var(--hero-motion-btn-hover-duration) var(--motion-ease-standard),
    border-color var(--hero-motion-btn-hover-duration) var(--motion-ease-standard),
    color var(--hero-motion-btn-hover-duration) var(--motion-ease-standard);
}

.hero-v2--cinematic.hero-v2--revealed .hero-v2__badge {
  animation: hero-motion-v1-badge-in var(--hero-motion-badge-duration) var(--motion-ease-entrance) both;
}

.hero-v2--cinematic.hero-v2--revealed .hero-v2__badge:nth-child(1) {
  animation-delay: calc(var(--hero-motion-badge-base-delay) + 0 * var(--hero-motion-badge-step));
}

.hero-v2--cinematic.hero-v2--revealed .hero-v2__badge:nth-child(2) {
  animation-delay: calc(var(--hero-motion-badge-base-delay) + 1 * var(--hero-motion-badge-step));
}

.hero-v2--cinematic.hero-v2--revealed .hero-v2__badge:nth-child(3) {
  animation-delay: calc(var(--hero-motion-badge-base-delay) + 2 * var(--hero-motion-badge-step));
}

.hero-v2--cinematic.hero-v2--revealed .hero-v2__badge:nth-child(4) {
  animation-delay: calc(var(--hero-motion-badge-base-delay) + 3 * var(--hero-motion-badge-step));
}

.hero-v2--cinematic.hero-v2--revealed .hero-v2__media-motion {
  transform-origin: center center;
  animation: hero-motion-v1-image-in var(--hero-motion-image-duration) var(--motion-ease-soft) var(--hero-motion-image-delay) both;
}

.hero-v2--cinematic.hero-v2--revealed .hero-v2__image {
  transition: transform 120ms linear;
}

/* --- Post-entrance floating (media wrapper) --- */

@keyframes hero-motion-v1-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(0, calc(var(--hero-motion-float-amplitude) * -1), 0) scale(1);
  }
}

.hero-v2--cinematic.hero-v2--float-active .hero-v2__media-motion {
  animation: hero-motion-v1-float var(--hero-motion-float-duration) var(--motion-ease-soft) infinite;
}

.hero-v2--cinematic.hero-v2--float-active.hero-v2--revealed .hero-v2__media-motion {
  transition: none;
}

/* --- Button hover polish --- */

.hero-v2--cinematic .hero-v2__cta--primary:hover,
.hero-v2--cinematic .hero-v2__cta--primary:focus-visible {
  transform: translate3d(0, calc(var(--hero-motion-btn-lift) * -1), 0);
  box-shadow: 0 4px 14px rgba(23, 75, 113, 0.26);
}

.hero-v2--cinematic .hero-v2__cta--secondary:hover,
.hero-v2--cinematic .hero-v2__cta--secondary:focus-visible {
  transform: translate3d(0, calc(var(--hero-motion-btn-lift) * -1), 0);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.hero-v2--cinematic .hero-v2__cta-arrow {
  display: inline-block;
  transition: transform var(--hero-motion-btn-hover-duration) var(--motion-ease-standard);
}

.hero-v2--cinematic .hero-v2__cta:hover .hero-v2__cta-arrow,
.hero-v2--cinematic .hero-v2__cta:focus-visible .hero-v2__cta-arrow {
  transform: translate3d(var(--hero-motion-btn-arrow-x), 0, 0);
}

.hero-v2__media-motion {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

/* --- Media wrapper inherits layout from parent --- */

@media (max-width: 991px) {
  .hero-v2__media-motion {
    justify-content: center;
  }
}

/* --- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  .hero-v2--cinematic:not(.hero-v2--revealed) .hero-v2__eyebrow,
  .hero-v2--cinematic:not(.hero-v2--revealed) .hero-v2__title,
  .hero-v2--cinematic:not(.hero-v2--revealed) .hero-v2__deck,
  .hero-v2--cinematic:not(.hero-v2--revealed) .hero-v2__cta,
  .hero-v2--cinematic:not(.hero-v2--revealed) .hero-v2__badge,
  .hero-v2--cinematic:not(.hero-v2--revealed) .hero-v2__media-motion {
    opacity: 1;
    transform: none;
  }

  .hero-v2--cinematic .hero-v2__eyebrow,
  .hero-v2--cinematic .hero-v2__title,
  .hero-v2--cinematic .hero-v2__deck,
  .hero-v2--cinematic .hero-v2__cta,
  .hero-v2--cinematic .hero-v2__badge,
  .hero-v2--cinematic .hero-v2__media-motion {
    transition: none !important;
    animation: none !important;
  }

  .hero-v2--cinematic.hero-v2--float-active .hero-v2__media-motion {
    animation: none !important;
  }

  .hero-v2--cinematic .hero-v2__cta:hover,
  .hero-v2--cinematic .hero-v2__cta:focus-visible {
    transform: none;
  }
}