/* ════════════════════════════════════════════════════════════════════
   SHELBY PORT — hero animation stack + REAL feature cycler
   Ported verbatim from public/shelby/shelby-landing.css so the homepage
   preview gets the exact Shelby opening curtain, animated hero, and the
   sticky REAL-method card cycler. Scoped to .s-hero / .s-features /
   .intro-curtain so it never touches the aurora component styles.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --sp-brown:    #0A0A1E;
  --sp-pink-hot: #A855F7;
  --sp-purple-lt:#C9A8FF;
  --sp-purple-bg:#0E0B2A;
  --sp-font-display:'Plus Jakarta Sans', system-ui, sans-serif;
  --sp-font-mono:'JetBrains Mono', monospace;
  --sp-grad: linear-gradient(100deg, #6366F1 0%, #A855F7 50%, #EC4899 100%);
}
.intro-curtain, .intro-curtain *, .s-hero, .s-hero *, .s-features, .s-features * { box-sizing: border-box; }

/* ── Intro curtain ── */
.intro-curtain {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px; text-align: center; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(circle at 16% 18%, rgba(139,124,246,0.18) 0, transparent 30%),
    radial-gradient(circle at 82% 82%, rgba(236,72,153,0.14) 0, transparent 32%),
    var(--sp-brown);
  animation: curtainLift 0.9s cubic-bezier(0.76,0,0.24,1) 1s forwards;
  will-change: transform;
}
.intro-curtain__word {
  position: relative; z-index: 2; margin: 0;
  font-family: var(--sp-font-display); font-weight: 800;
  font-size: clamp(2.6rem, 11vw, 8.5rem); line-height: 1;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: #FFFFFF;
  /* 3D extruded depth (violet) + drop shadow */
  text-shadow:
    0 1px 0 #e3d4ff, 0 2px 0 #d2b9ff, 0 3px 0 #c1a0fb,
    0 4px 0 #a855f7, 0 5px 0 #9333ea, 0 6px 0 #7c3aed,
    0 7px 0 #6d28d9, 0 8px 0 #5b21b6, 0 11px 22px rgba(0,0,0,0.55);
  opacity: 0;
  transform: perspective(720px) rotateX(40deg) translateY(44px) scale(0.84);
  animation:
    curtainWordIn3D 0.85s cubic-bezier(0.16,1,0.3,1) 0.12s forwards,
    curtainWordGlow 1.2s ease-in-out 0.95s infinite alternate;
}
@keyframes curtainWordIn3D {
  to { opacity: 1; transform: perspective(720px) rotateX(0) translateY(0) scale(1); }
}
@keyframes curtainWordGlow {
  from { filter: drop-shadow(0 0 10px rgba(168,85,247,0.45)); }
  to   { filter: drop-shadow(0 0 30px rgba(127,227,255,0.9)); }
}
@keyframes curtainLift   { to { transform: translateY(-105%); visibility: hidden; } }
@keyframes curtainFade   { to { opacity: 0; visibility: hidden; } }

/* ── Hero shell ── */
.s-hero {
  position: relative; isolation: isolate; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 72% 6%, rgba(168,85,247,0.16) 0, transparent 60%),
    radial-gradient(ellipse at 10% 94%, rgba(236,72,153,0.14) 0, transparent 60%),
    linear-gradient(160deg, #09081E 0%, #150B2E 50%, #0A0822 100%);
  overflow: hidden;
}
.s-hero::before, .intro-curtain::before {
  content: ""; position: absolute; inset: -60%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg at 38% 42%,
    #6366F1 0%, #A855F7 20%, #EC4899 40%, #3DA9FF 62%, #8B7CFF 82%, #6366F1 100%);
  filter: blur(36px) saturate(1.5) brightness(1.15); opacity: 0.9;
  animation: auroraSwirl 10s linear infinite;
}
@keyframes auroraSwirl { to { transform: rotate(360deg); } }

/* ── Waves ── */
.hero-stripes { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.wave {
  position: absolute; left: -24%; width: 148%; height: clamp(120px,17vw,190px);
  background: linear-gradient(90deg, rgba(99,102,241,0) 0%, rgba(99,102,241,0.5) 24%, rgba(168,85,247,0.48) 46%, rgba(236,72,153,0.48) 68%, rgba(139,124,246,0) 100%);
  background-size: 220% 100%; background-position: 0% 50%;
  --wave-opacity: 0.86; --wave-opacity-peak: 1;
  --wave-filter-base: blur(24px) saturate(1.18) brightness(1.02);
  --wave-filter-peak: blur(20px) saturate(1.34) brightness(1.08);
  border-radius: 47% 53% 45% 55% / 54% 42% 58% 46%;
  box-shadow: 0 0 48px rgba(139,124,246,0.22);
  filter: var(--wave-filter-base); opacity: var(--wave-opacity); transform-origin: center;
  animation: waveScroll 12s linear infinite, waveDrift 11s ease-in-out infinite, waveMorph 6.5s ease-in-out infinite, waveGlow 5.8s ease-in-out infinite;
}
.wave::before, .wave::after { content: ""; position: absolute; inset: 16px -2%; border-radius: inherit; background: inherit; opacity: 0.42; animation: waveRipple 8s ease-in-out infinite; }
.wave::after { inset: 34px 3%; opacity: 0.22; animation-delay: -2.4s; }
.wave--top { top: -70px; --wave-rotate: -2.4deg; --wave-y: 0px; }
.wave--bottom { bottom: -70px; --wave-rotate: 2.6deg; --wave-y: 0px; animation-delay: -1.8s; }
.wave--soft { --wave-opacity: 0.28; --wave-opacity-peak: 0.42; --wave-filter-base: blur(16px) saturate(1.12) brightness(1); --wave-filter-peak: blur(14px) saturate(1.28) brightness(1.05); height: clamp(70px,10vw,110px); filter: var(--wave-filter-base); animation-duration: 14s,9s,7.5s,7s; }
.wave--top.wave--soft { top: 58px; --wave-rotate: -1.2deg; animation-delay: -3s; }
.wave--bottom.wave--soft { bottom: 58px; --wave-rotate: 1.4deg; animation-delay: -4.2s; }
@keyframes waveDrift { 0%,100% { transform: translateX(-1.5%) translateY(var(--wave-y,0px)) rotate(var(--wave-rotate,0deg)); } 50% { transform: translateX(2%) translateY(calc(var(--wave-y,0px) + 12px)) rotate(var(--wave-rotate,0deg)); } }
@keyframes waveScroll { 0%,100% { box-shadow: 0 0 44px rgba(139,124,246,0.22); } 50% { box-shadow: 0 0 78px rgba(236,72,153,0.3); } }
@keyframes waveMorph { 0%,100% { border-radius: 47% 53% 45% 55% / 54% 42% 58% 46%; } 33% { border-radius: 55% 45% 60% 40% / 42% 60% 40% 58%; } 66% { border-radius: 42% 58% 46% 54% / 58% 38% 62% 42%; } }
@keyframes waveGlow { 0%,100% { opacity: var(--wave-opacity); filter: var(--wave-filter-base); } 50% { opacity: var(--wave-opacity-peak); filter: var(--wave-filter-peak); } }
@keyframes waveRipple { 0%,100% { transform: translateX(-1.2%) scaleX(1); } 50% { transform: translateX(1.6%) scaleX(1.04); } }

/* ── Stripes ── */
.hero-stripes .stripe { position: absolute; background: var(--sp-pink-hot); transform-origin: center; border-radius: 999px; }
.stripe--1 { top: 100px; left: -8%; width: 116%; height: 10px; transform: rotate(-4deg); animation: stripeSlide1 1.2s ease-out both, heroFloat1 7s ease-in-out 1.5s infinite; }
.stripe--2 { top: 124px; left: -8%; width: 116%; height: 3px; transform: rotate(-3deg); opacity: 0.5; animation: stripeSlide2 1.4s ease-out 0.1s both, heroFloat2 9s ease-in-out 1.8s infinite; }
.stripe--3 { bottom: 100px; left: -8%; width: 116%; height: 10px; transform: rotate(4deg); animation: stripeSlide3 1.2s ease-out 0.15s both, heroFloat3 7s ease-in-out 1.6s infinite; }
.stripe--4 { bottom: 124px; left: -8%; width: 116%; height: 3px; transform: rotate(3deg); opacity: 0.5; animation: stripeSlide4 1.4s ease-out 0.25s both, heroFloat4 9s ease-in-out 2s infinite; }
@keyframes stripeSlide1 { from { transform: translateX(-110%) rotate(-4deg); opacity: 0; } to { transform: translateX(0) rotate(-4deg); opacity: 1; } }
@keyframes stripeSlide2 { from { transform: translateX(-110%) rotate(-3deg); opacity: 0; } to { transform: translateX(0) rotate(-3deg); opacity: 0.5; } }
@keyframes stripeSlide3 { from { transform: translateX(-110%) rotate(4deg); opacity: 0; } to { transform: translateX(0) rotate(4deg); opacity: 1; } }
@keyframes stripeSlide4 { from { transform: translateX(-110%) rotate(3deg); opacity: 0; } to { transform: translateX(0) rotate(3deg); opacity: 0.5; } }
@keyframes heroFloat1 { 0%,100% { transform: rotate(-4deg) translateX(0); } 50% { transform: rotate(-4deg) translateX(20px); } }
@keyframes heroFloat2 { 0%,100% { transform: rotate(-3deg) translateX(0); opacity: 0.5; } 50% { transform: rotate(-3deg) translateX(-15px); opacity: 0.35; } }
@keyframes heroFloat3 { 0%,100% { transform: rotate(4deg) translateX(0); } 50% { transform: rotate(4deg) translateX(-20px); } }
@keyframes heroFloat4 { 0%,100% { transform: rotate(3deg) translateX(0); opacity: 0.5; } 50% { transform: rotate(3deg) translateX(15px); opacity: 0.35; } }

/* ── Hero content ── */
.hero-content { position: relative; z-index: 3; text-align: center; padding: 0 20px; }
.hero-bg-words { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-bg-word { position: absolute; left: 50%; margin: 0; font-family: var(--sp-font-display); font-size: clamp(4rem,16vw,13rem); font-weight: 800; line-height: 0.8; text-transform: uppercase; white-space: nowrap; color: rgba(200,168,255,0.07); transform: translateX(-50%); animation: bgWordDrift 14s ease-in-out infinite; }
.hero-bg-word--top { top: 14%; }
.hero-bg-word--bottom { bottom: 12%; color: rgba(236,72,153,0.08); animation-delay: -5s; }
@keyframes bgWordDrift { 0%,100% { transform: translateX(-52%) translateY(0); } 50% { transform: translateX(-48%) translateY(12px); } }
.hero-title { font-family: var(--sp-font-display); font-weight: 800; font-size: clamp(3.2rem,9.5vw,8.5rem); line-height: 0.96; letter-spacing: -0.03em; color: #F5F2FF; margin: 0 0 20px; }
.hero-title__ai { padding: 0 0.16em 0.04em; margin-left: 0.06em; border-radius: 0.16em; color: #7FE3FF; background: linear-gradient(160deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 46%, rgba(127,227,255,0.12) 100%); border: 1px solid rgba(255,255,255,0.30); border-top-color: rgba(255,255,255,0.60); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 2px 0 rgba(255,255,255,0.50), inset 0 -10px 20px rgba(99,102,241,0.30), 0 0 30px rgba(127,227,255,0.60), 0 0 70px rgba(168,85,247,0.45); text-shadow: 0 0 22px rgba(127,227,255,0.65); }
.hero-title__line { display: block; }
.hero-title__word { display: inline-block; opacity: 0; transform: translateY(46px) scale(0.98); animation: wordRise 0.85s cubic-bezier(0.16,1,0.3,1) forwards; }
.hero-title__line--1 .hero-title__word:nth-child(1) { animation-delay: 1.05s; }
.hero-title__line--1 .hero-title__word:nth-child(2) { animation-delay: 1.18s; }
.hero-title__line--1 .hero-title__word:nth-child(3) { animation-delay: 1.31s; }
.hero-title__line--2 .hero-title__word:nth-child(1) { animation-delay: 1.44s; }
.hero-title__line--2 .hero-title__word:nth-child(2) { animation-delay: 1.57s; }
@keyframes wordRise { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
.hero-subtitle { font-family: var(--sp-font-display); font-size: 1.2rem; font-weight: 400; color: rgba(255,255,255,0.65); margin: 0 0 32px; letter-spacing: 0.02em; opacity: 0; transform: translateY(12px); animation: fadeInUp 0.8s ease-out 1.9s forwards; }
.hero-scroll-hint { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 2; animation: hintBounce 2s ease-in-out infinite; }
.scroll-arrow { width: 44px; height: 44px; border: 1.5px solid rgba(255,255,255,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); }
@keyframes hintBounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } }

/* ── REAL feature cycler ── */
.s-features { position: relative; background: radial-gradient(circle at 20% 20%, rgba(168,85,247,0.22) 0, transparent 26%), radial-gradient(circle at 80% 70%, rgba(139,124,246,0.18) 0, transparent 28%), var(--sp-purple-bg); padding: 0; }
.hex-overflow-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.feature-sticky-wrap { height: 400vh; position: relative; }
.feature-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 2; }
.feature-cards { position: relative; width: 100%; max-width: 800px; min-height: 320px; padding: 0 40px; margin: 0 auto; }
.feature-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 40px; opacity: 0; transform: translateY(30px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; }
.feature-card--active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.feature-progress { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 3; }
.fp-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.25); transition: all 0.3s ease; }
.fp-dot--active { background: var(--sp-purple-lt); transform: scale(1.5); }
.feature-num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1.5px solid rgba(255,255,255,0.25); border-radius: 8px; font-family: var(--sp-font-mono); font-size: 0.85rem; color: rgba(255,255,255,0.7); margin: 0 0 32px; }
.feature-title { font-family: var(--sp-font-display); font-weight: 800; font-size: clamp(2.5rem,7vw,5.5rem); line-height: 1.05; color: var(--sp-purple-lt); margin: 0 0 32px; }
.feature-desc { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,0.75); max-width: 600px; margin: 0; }
.hex-decor { position: absolute; background: linear-gradient(135deg, var(--sp-purple-lt), rgba(139,124,246,0.7)); opacity: 0.48; border-radius: 24px; z-index: 1; will-change: transform; transform: translate(calc(var(--parallax-x,0px) + var(--mouse-x,0px)), calc(var(--parallax-y,0px) + var(--mouse-y,0px))) scale(var(--parallax-scale,1)) rotate(var(--base-rotate,0deg)); animation: hexFloat 8s ease-in-out infinite; }
@keyframes hexFloat { 0%,100% { opacity: 0.48; } 50% { opacity: 0.3; } }
.hex-decor--1 { width: 420px; height: 420px; top: 2%;  left: -10%; --base-rotate: 15deg; }
.hex-decor--2 { width: 340px; height: 340px; top: 24%; right: -8%; --base-rotate: -10deg; }
.hex-decor--3 { width: 460px; height: 460px; top: 48%; left: -14%; --base-rotate: 25deg; }
.hex-decor--4 { width: 390px; height: 390px; top: 64%; right: -12%; --base-rotate: -20deg; }
.hex-decor--5 { width: 320px; height: 320px; top: 84%; left: 4%;   --base-rotate: 10deg; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .intro-curtain { animation: curtainFade 0.6s ease 0.9s forwards !important; }
  .intro-curtain::before, .s-hero::before, .wave, .stripe, .hero-bg-word, .hex-decor { animation: none !important; }
  .intro-curtain__word, .hero-title__word, .hero-subtitle { animation: none !important; opacity: 1 !important; transform: none !important; }
}