/* Shared motion language: measured, cinematic, transform-first. */

@keyframes button-sweep {
  0% { left: -35%; opacity: 0; }
  25% { opacity: 0.75; }
  100% { left: 130%; opacity: 0; }
}

@keyframes scroll-line {
  0% { transform: translateY(-100%); }
  55%, 100% { transform: translateY(100%); }
}

@keyframes hex-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -8px, 0) rotate(2deg); }
}

@keyframes pulse-node {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-gold-bright-rgb), 0.22); }
  50% { box-shadow: 0 0 0 9px rgba(var(--color-gold-bright-rgb), 0); }
}

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

@keyframes page-curtain-in {
  0% { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: top; }
}

@keyframes transition-line {
  0% { opacity: 0; transform: scaleX(0); }
  45% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes constellation-turn {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes compass-node-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-gold-bright-rgb), 0.08); }
  50% { box-shadow: 0 0 0 13px rgba(var(--color-gold-bright-rgb), 0); }
}

@keyframes plan-confirm {
  0% { box-shadow: 0 0 0 0 rgba(var(--color-gold-bright-rgb), 0.5); }
  100% { box-shadow: 0 0 0 16px rgba(var(--color-gold-bright-rgb), 0); }
}

@keyframes form-confirm {
  0% { box-shadow: inset 0 0 0 1px rgba(var(--color-gold-bright-rgb), 0), 0 0 0 0 rgba(var(--color-gold-bright-rgb), 0.35); }
  45% { box-shadow: inset 0 0 0 1px rgba(var(--color-gold-bright-rgb), 0.8), 0 0 0 10px rgba(var(--color-gold-bright-rgb), 0); }
  100% { box-shadow: inset 0 0 0 1px rgba(var(--color-gold-bright-rgb), 0), 0 0 0 18px rgba(var(--color-gold-bright-rgb), 0); }
}

@keyframes page-curtain-out {
  0% { transform: scaleY(0); transform-origin: bottom; }
  100% { transform: scaleY(1); transform-origin: bottom; }
}

@keyframes hero-line-in {
  from { opacity: 0; transform: translate3d(0, 110%, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-fade-in {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.page-transition {
  position: fixed;
  z-index: 9999;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  background:
    linear-gradient(30deg, transparent 48.5%, rgba(var(--color-gold-bright-rgb), 0.08) 49%, rgba(var(--color-gold-bright-rgb), 0.08) 51%, transparent 51.5%) 0 0 / 88px 76px,
    linear-gradient(-30deg, transparent 48.5%, rgba(var(--color-gold-bright-rgb), 0.055) 49%, rgba(var(--color-gold-bright-rgb), 0.055) 51%, transparent 51.5%) 0 0 / 88px 76px,
    var(--color-black);
  /* Ausfallsicher: Der Vorhang faehrt rein per CSS hoch und braucht kein
     JavaScript. Faellt ein Skript aus, bleibt die Seite trotzdem sichtbar. */
  transform: scaleY(1);
  transform-origin: top;
  animation: page-curtain-in calc(0.6s * var(--motion-scale, 1)) 0.04s var(--ease-premium) both;
}


.page-transition::before {
  position: absolute;
  right: 12vw;
  left: 12vw;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--color-gold-bright), rgba(var(--color-white-rgb), 0.88), var(--color-gold-bright), transparent);
  box-shadow: 0 0 28px rgba(var(--color-gold-bright-rgb), 0.55);
  opacity: 0;
  transform: scaleX(0);
}

.page-transition::after {
  padding: 0.6rem 1rem;
  border: 1px solid rgba(var(--color-gold-bright-rgb), 0.28);
  content: attr(data-label);
  color: var(--color-gold-bright);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  opacity: 0;
  text-transform: uppercase;
}

html.page-leaving .page-transition {
  animation: page-curtain-out var(--page-transition-duration, 420ms) var(--ease-premium) forwards;
}

html.page-leaving .page-transition::before {
  animation: transition-line var(--page-transition-duration, 420ms) ease forwards;
}

html.page-leaving .page-transition::after {
  opacity: 1;
  transition: opacity 120ms ease 90ms;
}

html.page-leaving body {
  pointer-events: none;
}

html[data-motion="full"] [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 42px, 0);
  transition:
    opacity calc(0.9s * var(--motion-scale, 1)) var(--ease-premium),
    transform calc(1.05s * var(--motion-scale, 1)) var(--ease-premium);
}

html[data-motion="full"] [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html[data-motion="full"] .story-visual[data-reveal],
html[data-motion="full"] .team-panel[data-reveal],
html[data-motion="full"] .player-card[data-reveal] {
  opacity: 0;
}

html[data-motion="full"] .story-visual[data-reveal].is-visible,
html[data-motion="full"] .team-panel[data-reveal].is-visible,
html[data-motion="full"] .player-card[data-reveal].is-visible {
  opacity: 1;
}

html[data-motion="full"].page-ready .headline-line:first-child > span {
  animation: hero-line-in calc(1.25s * var(--motion-scale, 1)) calc(0.38s * var(--motion-scale, 1)) var(--ease-premium) both;
}

html[data-motion="full"].page-ready .headline-line:nth-child(2) > span {
  animation: hero-line-in calc(1.25s * var(--motion-scale, 1)) calc(0.5s * var(--motion-scale, 1)) var(--ease-premium) both;
}

html[data-motion="full"].page-ready .hero__eyebrow {
  animation: hero-fade-in calc(1s * var(--motion-scale, 1)) calc(0.3s * var(--motion-scale, 1)) var(--ease-premium) both;
}

html[data-motion="full"].page-ready .hero__subtitle {
  animation: hero-fade-in calc(1s * var(--motion-scale, 1)) calc(0.68s * var(--motion-scale, 1)) var(--ease-premium) both;
}

html[data-motion="full"].page-ready .hero__actions {
  animation: hero-fade-in calc(1s * var(--motion-scale, 1)) calc(0.78s * var(--motion-scale, 1)) var(--ease-premium) both;
}

html[data-motion="full"] .hero__scroll i::after {
  animation: scroll-line 2.1s ease-in-out infinite;
}

html[data-motion="full"] .hero__hex-ring,
html[data-motion="full"] .network-hex {
  animation: hex-drift 7s ease-in-out infinite;
}

html[data-motion="full"] .hero__hex i,
html[data-motion="full"] .live-pulse i {
  animation: pulse-node 2.5s ease-in-out infinite;
}

html[data-motion="full"] .sponsor-marquee__track {
  animation: marquee 34s linear infinite;
}

.sponsor-marquee:hover .sponsor-marquee__track {
  animation-play-state: paused;
}

.motion-paused *,
.motion-paused::before,
.motion-paused::after {
  animation-play-state: paused !important;
}

.mobile-menu nav li,
.mobile-menu__meta,
.mobile-menu > .mobile-menu__inner > .eyebrow {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.5s ease, transform 0.7s var(--ease-premium);
}

.menu-open .mobile-menu {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.45s ease, visibility 0s;
}

.menu-open .mobile-menu > .mobile-menu__inner > .eyebrow {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.12s;
}

.menu-open .mobile-menu nav li {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.menu-open .mobile-menu nav li:nth-child(1) { transition-delay: 0.14s; }
.menu-open .mobile-menu nav li:nth-child(2) { transition-delay: 0.18s; }
.menu-open .mobile-menu nav li:nth-child(3) { transition-delay: 0.22s; }
.menu-open .mobile-menu nav li:nth-child(4) { transition-delay: 0.26s; }
.menu-open .mobile-menu nav li:nth-child(5) { transition-delay: 0.30s; }
.menu-open .mobile-menu nav li:nth-child(6) { transition-delay: 0.34s; }
.menu-open .mobile-menu nav li:nth-child(7) { transition-delay: 0.38s; }
.menu-open .mobile-menu nav li:nth-child(8) { transition-delay: 0.42s; }

.menu-open .mobile-menu__meta {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.47s;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .page-transition {
    display: none;
  }

  .hero,
  .motion-layer,
  [data-parallax],
  [data-tilt],
  .team-panel,
  .player-card,
  .story-visual {
    transform: none !important;
  }

  .hero__ui {
    transform: translateX(-50%) !important;
  }

  .sponsor-marquee__track {
    animation: none !important;
  }

  .sponsor-marquee {
    overflow-x: auto;
  }
}