/* Motion layer — premium micro-interactions (respects reduced motion) */

@media (prefers-reduced-motion: no-preference) {
  html[data-shell="v2"] .access-tier-chip-nav__groups {
    animation: tenguNavIn 0.55s ease-out both;
  }

  html[data-shell="v2"] .chip-image-link {
    animation: tenguChipIn 0.5s ease-out both;
    animation-delay: calc(var(--chip-i, 0) * 45ms);
  }

  html[data-shell="v2"] .chip-image-link:hover .chip-image-link__media img,
  html[data-shell="v2"] .chip-image-link:focus-visible .chip-image-link__media img {
    transform: translateY(-4px) scale(1.06) rotate(-2deg);
    filter: brightness(1.08) drop-shadow(0 12px 22px rgba(255, 212, 107, 0.28));
  }

  html[data-shell="v2"] .member-card {
    animation: tenguCardIn 0.65s ease-out both;
    animation-delay: calc(var(--card-i, 0) * 70ms);
  }

  html[data-shell="v2"] .member-card:hover::before {
    transform: scale(1.03);
  }

  html[data-shell="v2"] .hero-cinematic .hero-video {
    animation: tenguHeroDrift 18s ease-in-out infinite alternate;
  }
}

@keyframes tenguNavIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tenguChipIn {
  from { opacity: 0; transform: translateY(8px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tenguCardIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tenguHeroDrift {
  from { transform: scale(1.02); }
  to { transform: scale(1.08); }
}

html[data-shell="v2"] .hero-cinematic {
  position: relative;
  aspect-ratio: 21 / 9;
  min-height: clamp(220px, 38vw, 420px);
  background: #0a0807;
}

html[data-shell="v2"] .hero-cinematic .hero-video,
html[data-shell="v2"] .hero-cinematic .hero-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html[data-shell="v2"] .hero-cinematic .hero-video {
  z-index: 1;
}

html[data-shell="v2"] .hero-cinematic .hero-fallback {
  z-index: 0;
  transition: opacity 0.6s ease;
}

html[data-shell="v2"] .hero-cinematic.is-video-ready .hero-fallback {
  opacity: 0;
}

html[data-shell="v2"] .hero-cinematic.is-video-ready .hero-video {
  opacity: 1;
}

html[data-shell="v2"] .hero-cinematic .hero-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 6, 5, 0.15) 0%, rgba(8, 6, 5, 0.45) 68%, rgba(8, 6, 5, 0.82) 100%),
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 212, 107, 0.08), transparent 70%);
}