/* On Seven home motion — stage 2
   Hero kinetic typography, entrance rhythm, and lightweight microinteractions. */

body[data-page="home"] .hero {
  --hero-pan-x: 0px;
  --hero-pan-y: 0px;
  isolation: isolate;
  background-position:
    calc(50% + var(--hero-pan-x))
    calc(50% + var(--hero-pan-y));
  transition: background-position 900ms var(--motion-ease-standard);
}

body[data-page="home"] .hero .hero-overlay {
  z-index: 0;
  background:
    linear-gradient(90deg,rgba(5,15,27,.90) 0%,rgba(8,20,35,.72) 48%,rgba(8,20,35,.38) 76%,rgba(5,15,27,.58) 100%);
}

body[data-page="home"] .hero-copy {
  z-index: 4;
}

body[data-page="home"] .hero h1 {
  max-width: 820px;
  text-wrap: balance;
  text-shadow: 0 12px 34px rgba(0,0,0,.22);
}

body[data-page="home"] .hero h1 em {
  color: #f5b91f;
  font-style: normal;
  font-weight: 700;
}

.hero-kinetic {
  position: absolute;
  z-index: 1;
  top: 53%;
  right: -3vw;
  left: -3vw;
  overflow: hidden;
  pointer-events: none;
  opacity: .115;
  transform: translateY(-50%) rotate(-3deg);
  white-space: nowrap;
}

.hero-kinetic-track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 34px;
  color: transparent;
  font: 800 clamp(74px,10.5vw,164px)/.82 var(--font-heading);
  letter-spacing: -.065em;
  -webkit-text-stroke: 1px rgba(255,255,255,.88);
  animation: onseven-kinetic 32s linear infinite;
  will-change: transform;
}

.hero-kinetic-track span:nth-of-type(3n+2) {
  -webkit-text-stroke-color: #f5b91f;
}

.hero-kinetic-track i {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: #f5b91f;
}

.hero-stage-label {
  position: absolute;
  z-index: 4;
  right: 7vw;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255,255,255,.5);
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hero-stage-label span {
  color: #f5b91f;
  font: 700 11px/1 var(--font-heading);
}

.hero-stage-label::before {
  content: "";
  width: 38px;
  height: 1px;
  background: rgba(255,255,255,.32);
}

body[data-page="home"] .hero.motion-stage2 .hero-copy > * {
  animation: onseven-hero-enter 720ms var(--motion-ease-emphasized) both !important;
}

body[data-page="home"] .hero.motion-stage2 .hero-copy > :nth-child(1) { animation-delay: 80ms !important; }
body[data-page="home"] .hero.motion-stage2 .hero-copy > :nth-child(2) { animation-delay: 150ms !important; }
body[data-page="home"] .hero.motion-stage2 .hero-copy > :nth-child(3) { animation-delay: 240ms !important; }
body[data-page="home"] .hero.motion-stage2 .hero-copy > :nth-child(4) { animation-delay: 330ms !important; }

body[data-page="home"] .hero.motion-stage2 .hero-values,
body[data-page="home"] .hero.motion-stage2 .hero-stage-label {
  animation: onseven-hero-fade 620ms 470ms var(--motion-ease-standard) both;
}

body[data-page="home"] .hero .button,
body[data-page="home"] .hero .quiet-link {
  position: relative;
  isolation: isolate;
}

body[data-page="home"] .hero .button {
  overflow: hidden;
  border: 1px solid transparent;
  transform: translate3d(var(--magnetic-x,0),var(--magnetic-y,0),0);
  transition:
    transform var(--motion-duration-fast) ease-out,
    box-shadow var(--motion-duration-fast) ease,
    border-color var(--motion-duration-fast) ease;
}

body[data-page="home"] .hero .button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(255,255,255,.2);
  transform: translateX(-102%);
  transition: transform 340ms var(--motion-ease-standard);
}

body[data-page="home"] .hero .button:hover::before,
body[data-page="home"] .hero .button:focus-visible::before {
  transform: translateX(0);
}

body[data-page="home"] .hero .button:hover,
body[data-page="home"] .hero .button:focus-visible {
  border-color: rgba(255,255,255,.52);
  box-shadow: 0 14px 32px rgba(0,0,0,.2);
}

body[data-page="home"] .hero .button b,
body[data-page="home"] .hero .button span {
  position: relative;
  z-index: 1;
}

body[data-page="home"] .hero .button span,
body[data-page="home"] .hero .quiet-link span {
  transition: transform 240ms var(--motion-ease-standard);
}

body[data-page="home"] .hero .button:hover span,
body[data-page="home"] .hero .button:focus-visible span,
body[data-page="home"] .hero .quiet-link:hover span,
body[data-page="home"] .hero .quiet-link:focus-visible span {
  transform: translateX(5px);
}

body[data-page="home"] .hero .quiet-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  background: #f5b91f;
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform 300ms var(--motion-ease-standard);
}

body[data-page="home"] .hero .quiet-link:hover::after,
body[data-page="home"] .hero .quiet-link:focus-visible::after {
  transform: scaleX(1);
}

.hero.motion-paused .hero-kinetic-track {
  animation-play-state: paused;
}

@keyframes onseven-kinetic {
  to { transform: translate3d(-50%,0,0); }
}

@keyframes onseven-hero-enter {
  from { opacity: 0; transform: translate3d(0,22px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

@keyframes onseven-hero-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width:820px) {
  body[data-page="home"] .hero {
    background-position: center;
    transition: none;
  }

  body[data-page="home"] .hero .hero-overlay {
    background: rgba(5,15,27,.62);
  }

  .hero-kinetic {
    top: 50%;
    right: -10vw;
    left: -10vw;
    opacity: .09;
  }

  .hero-kinetic-track {
    gap: 22px;
    font-size: clamp(62px,18vw,92px);
    animation-duration: 42s;
  }

  .hero-kinetic-track i {
    width: 7px;
    height: 7px;
    flex-basis: 7px;
  }

  .hero-stage-label {
    right: 21px;
    bottom: 24px;
  }
}

@media (max-width:560px) {
  body[data-page="home"] .hero h1 {
    text-shadow: 0 8px 24px rgba(0,0,0,.2);
  }

  .hero-kinetic {
    top: 48%;
  }

  .hero-stage-label {
    display: none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .hero-kinetic-track,
  body[data-page="home"] .hero.motion-stage2 .hero-copy > *,
  body[data-page="home"] .hero.motion-stage2 .hero-values,
  body[data-page="home"] .hero.motion-stage2 .hero-stage-label {
    animation: none !important;
  }

  .hero-kinetic {
    opacity: .055;
  }

  body[data-page="home"] .hero .button,
  body[data-page="home"] .hero .button::before,
  body[data-page="home"] .hero .button span,
  body[data-page="home"] .hero .quiet-link span,
  body[data-page="home"] .hero .quiet-link::after {
    transition: none !important;
  }
}

html[data-motion-mode="reduced"] .hero-kinetic-track,
html[data-motion-mode="reduced"] body[data-page="home"] .hero.motion-stage2 .hero-copy > *,
html[data-motion-mode="reduced"] body[data-page="home"] .hero.motion-stage2 .hero-values,
html[data-motion-mode="reduced"] body[data-page="home"] .hero.motion-stage2 .hero-stage-label {
  animation: none !important;
}