/* ===================================================================
   ReelForge AI — Cinematic interactive hero
   Self-contained. Autoplays, loops, responsive (16:9 + vertical).
   =================================================================== */

.cinema, .cinema * { box-sizing: border-box; }

.cinema {
  --p1: #a855f7; --p2: #8b5cf6; --b1: #6366f1; --b2: #3b82f6; --cyan: #22d3ee; --pink: #ec4899;
  --ink: #ecebff; --dim: #a6a3c4;
  --grad: linear-gradient(120deg,#c4b5fd,#a855f7 38%,#60a5fa 78%,#22d3ee);
  --ease: cubic-bezier(.16,1,.3,1);
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 100vh;
  overflow: hidden;
  border-radius: 22px;
  background: radial-gradient(120% 120% at 80% -10%, #161033 0%, #0a0a14 55%, #06060d 100%);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  isolation: isolate;
  user-select: none;
}

/* ---- Reset margins on body when used as a full standalone page ---- */
body { margin: 0; background: #06060d; }
body > .cinema { border-radius: 0; }

/* ---- Background layers ---- */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.aurora { position: absolute; inset: 0; z-index: 0; filter: blur(70px); }
.orb { position: absolute; border-radius: 50%; opacity: .55; will-change: transform; }
.o1 { width: 42%; aspect-ratio: 1; background: var(--p2); top: -12%; left: -8%; animation: drift1 18s var(--ease) infinite; }
.o2 { width: 38%; aspect-ratio: 1; background: var(--b2); top: 25%; right: -12%; animation: drift2 22s var(--ease) infinite; }
.o3 { width: 34%; aspect-ratio: 1; background: var(--pink); bottom: -14%; left: 35%; opacity: .35; animation: drift3 26s var(--ease) infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(6%,8%)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-7%,5%)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(4%,-7%)} }

.grid3d {
  position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image: linear-gradient(rgba(139,92,246,.10) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(99,102,241,.10) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(600px) rotateX(60deg) scale(2.2) translateY(18%);
  mask-image: linear-gradient(180deg, transparent, #000 40%, transparent 85%);
  animation: gridmove 14s linear infinite;
}
@keyframes gridmove { from{background-position:0 0} to{background-position:0 46px} }

.vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(3,3,8,.7) 100%); }

/* ---- Stage / scenes ---- */
.stage { position: absolute; inset: 0; z-index: 3; transform-style: preserve-3d; }
.scene {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 2.4vmin;
  text-align: center; padding: 5%;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(1.04);
  transition: opacity .9s var(--ease), transform 1.2s var(--ease), visibility .9s;
}
.scene.is-active { opacity: 1; visibility: visible; transform: none; }

/* parallax helper (JS sets --mx/--my on .cinema) */
.parallax { transform: translate3d(calc(var(--mx,0) * var(--depth,0.3) * 30px), calc(var(--my,0) * var(--depth,0.3) * 30px), 0); transition: transform .25s ease-out; }

/* shared text */
.eyebrow { display:inline-block; font-size: clamp(11px,1.4vmin,15px); font-weight: 800; letter-spacing:.32em; text-transform: uppercase; color: var(--p1); margin-bottom: 2vmin; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.cine-title { font-size: clamp(26px, 6.4vmin, 84px); font-weight: 900; line-height: 1.03; letter-spacing: -.03em; margin: 0; }
.cine-sub { font-size: clamp(13px, 2.2vmin, 24px); color: var(--dim); margin: 2.4vmin 0 0; font-weight: 500; }
.scene-tag { font-size: clamp(18px, 3.4vmin, 42px); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.dots3 i { animation: blink 1.4s infinite; } .dots3 i:nth-child(2){animation-delay:.2s} .dots3 i:nth-child(3){animation-delay:.4s}
@keyframes blink { 0%,100%{opacity:.2} 50%{opacity:1} }

/* ===================== SCENE 1 — 3D reel ===================== */
.scene1 { grid-template-rows: auto auto; }
.reel3d { perspective: 1000px; margin: 0 auto 1vmin; }
.reel3d-inner { width: clamp(120px, 20vmin, 240px); aspect-ratio: 9/16; transform-style: preserve-3d; animation: reelFloat 6s ease-in-out infinite; }
.reel3d-face {
  position: relative; width: 100%; height: 100%; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg,#2a1a4a,#1a2a5a 55%,#102a3a);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 80px -20px rgba(139,92,246,.7), inset 0 0 40px rgba(168,85,247,.25);
  display: grid; place-items: center;
}
.reel3d-face::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 30% 25%, rgba(168,85,247,.55), transparent 60%), radial-gradient(circle at 75% 80%, rgba(59,130,246,.5), transparent 60%); }
.reel3d-badge { position:absolute; top:10px; left:10px; font-size:10px; font-weight:800; letter-spacing:.1em; padding:3px 8px; border-radius:6px; background:rgba(0,0,0,.45); z-index:2; }
.reel3d-dur { position:absolute; bottom:10px; right:10px; font-size:11px; font-weight:700; padding:3px 7px; border-radius:6px; background:rgba(0,0,0,.6); z-index:2; }
.reel3d-play { position:relative; z-index:2; width: 26%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; padding-left:6%; box-shadow:0 0 30px rgba(255,255,255,.5); }
.reel3d-shine { position:absolute; top:0; left:-60%; width:50%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-18deg); animation: shine 4.5s ease-in-out infinite; z-index:3; }
@keyframes reelFloat { 0%,100%{transform: rotateY(-16deg) rotateX(6deg) translateY(0)} 50%{transform: rotateY(16deg) rotateX(-4deg) translateY(-14px)} }
@keyframes shine { 0%,100%{left:-60%} 45%,55%{left:130%} }
.scene1.is-active .cine-title { animation: riseIn 1s var(--ease) .25s both; }
.scene1.is-active .cine-sub { animation: riseIn 1s var(--ease) .5s both; }
.scene1.is-active .eyebrow { animation: riseIn .8s var(--ease) both; }
@keyframes riseIn { from{opacity:0; transform: translateY(26px)} to{opacity:1; transform:none} }

/* ===================== SCENE 2 — Browser + URL ===================== */
.browser { width: min(74%, 720px); border-radius: 16px; overflow: hidden; border:1px solid rgba(255,255,255,.14);
  background: rgba(14,14,26,.7); backdrop-filter: blur(14px); box-shadow: 0 40px 90px -30px rgba(99,102,241,.6); }
.browser-bar { display:flex; align-items:center; gap:7px; padding:12px 16px; background: rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08); }
.browser-bar .dot { width:11px; height:11px; border-radius:50%; }
.dot.r{background:#ff5f57} .dot.y{background:#febc2e} .dot.g{background:#28c840}
.browser-url { margin-left:14px; font-size: clamp(11px,1.5vmin,14px); color: var(--dim); background: rgba(0,0,0,.3); padding:5px 14px; border-radius:8px; }
.browser-body { padding: clamp(18px,4vmin,40px); display:grid; gap: 2.4vmin; }
.paste-row { display:flex; align-items:center; gap:12px; background: rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding: 14px 16px; }
.scene2.is-active .paste-row { animation: glowField 2.4s ease-in-out .3s; }
@keyframes glowField { 0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,0)} 50%{box-shadow:0 0 0 4px rgba(139,92,246,.3), 0 0 30px rgba(139,92,246,.4)} }
.paste-text { font-size: clamp(12px,1.8vmin,18px); color: var(--ink); font-family: ui-monospace,monospace; white-space:nowrap; overflow:hidden; }
.caret { display:inline-block; width:2px; height:1.1em; background:var(--p1); margin-left:1px; vertical-align:-2px; animation: caretBlink 1s steps(1) infinite; }
@keyframes caretBlink { 50%{opacity:0} }
.energy-btn { position:relative; justify-self:center; border:0; cursor:pointer; font-family:inherit; font-weight:800;
  font-size: clamp(13px,2vmin,20px); color:#fff; padding: clamp(12px,2.2vmin,20px) clamp(22px,4vmin,40px); border-radius:14px;
  background: linear-gradient(120deg,var(--p2),var(--b1) 50%,var(--b2)); box-shadow:0 14px 40px -10px rgba(139,92,246,.8); overflow:visible; }
.energy-ring { position:absolute; inset:0; border-radius:14px; }
.scene2.is-active .energy-ring { animation: energyPulse 1.3s var(--ease) 2.6s 2; }
@keyframes energyPulse { 0%{box-shadow:0 0 0 0 rgba(168,85,247,.6)} 100%{box-shadow:0 0 0 40px rgba(168,85,247,0)} }
.cursor-fake { position:absolute; right:-8px; bottom:-12px; width:18px; height:18px; }
.cursor-fake::before { content:'➤'; position:absolute; transform: rotate(-50deg); font-size:16px; color:#fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.scene2.is-active .cursor-fake { animation: clickMove 2.8s var(--ease) both; }
@keyframes clickMove { 0%{transform:translate(60px,40px) scale(1)} 70%{transform:translate(0,0) scale(1)} 78%{transform:translate(0,0) scale(.7)} 86%{transform:translate(0,0) scale(1)} 100%{transform:translate(0,0) scale(1)} }
.pulse-wave { position:absolute; left:50%; top:58%; width:10px; height:10px; border-radius:50%; transform:translate(-50%,-50%); }
.scene2.is-active .pulse-wave { animation: bigPulse 1.6s var(--ease) 2.9s both; }
@keyframes bigPulse { 0%{box-shadow:0 0 0 0 rgba(99,102,241,.5)} 100%{box-shadow:0 0 0 600px rgba(99,102,241,0)} }

/* ===================== SCENE 3 — Processing ===================== */
.scene3 { grid-template-rows: auto auto auto; gap: 3vmin; }
.proc-core { position:relative; width: clamp(150px,26vmin,300px); aspect-ratio:1; margin: 0 auto; display:grid; place-items:center; }
.scan-ring { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(168,85,247,.5); border-top-color: var(--cyan); animation: spin 3s linear infinite; }
.scan-ring.d2 { inset:14%; border-color: rgba(59,130,246,.45); border-right-color: var(--pink); animation: spin 2.2s linear infinite reverse; }
@keyframes spin { to{transform:rotate(360deg)} }
.proc-thumb { position:relative; width:54%; aspect-ratio:9/16; border-radius:12px; overflow:hidden; background:linear-gradient(160deg,#2a1a4a,#102a3a); border:1px solid rgba(255,255,255,.2); box-shadow:0 0 40px rgba(168,85,247,.4); }
.scanline { position:absolute; left:0; right:0; height:30%; background:linear-gradient(180deg, transparent, rgba(34,211,238,.5), transparent); animation: scanY 1.8s ease-in-out infinite; }
@keyframes scanY { 0%,100%{top:-30%} 50%{top:100%} }
.waveform { position:absolute; bottom:-30%; left:50%; transform:translateX(-50%); display:flex; align-items:flex-end; gap:3px; height:18%; }
.waveform i { width:4px; background: linear-gradient(180deg,var(--cyan),var(--p1)); border-radius:2px; animation: wave 1s ease-in-out infinite; }
@keyframes wave { 0%,100%{height:20%} 50%{height:100%} }
.proc-chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:80%; margin:0 auto; }
.chip { font-size: clamp(10px,1.5vmin,14px); font-weight:600; padding:7px 14px; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); opacity:0; }
.scene3.is-active .chip { animation: chipIn .6s var(--ease) both; }
.scene3.is-active .c1{animation-delay:.3s} .scene3.is-active .c2{animation-delay:.8s} .scene3.is-active .c3{animation-delay:1.3s} .scene3.is-active .c4{animation-delay:1.8s}
@keyframes chipIn { from{opacity:0; transform: translateY(14px) scale(.9)} to{opacity:1; transform:none} }

/* ===================== SCENE 4 — Repurpose orbit ===================== */
.orbit { position:relative; width:min(78%,760px); aspect-ratio:16/9; margin:0 auto 1vmin; transform-style:preserve-3d; }
.core-spark { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size: clamp(20px,4vmin,40px); color:var(--cyan); text-shadow:0 0 24px var(--cyan); animation: sparkPulse 2s ease-in-out infinite; }
@keyframes sparkPulse { 0%,100%{transform:translate(-50%,-50%) scale(1); opacity:.8} 50%{transform:translate(-50%,-50%) scale(1.3); opacity:1} }
.ccard { position:absolute; left:50%; top:50%; width: clamp(96px,15vmin,150px); padding:12px 14px; border-radius:12px; text-align:left;
  background: rgba(20,18,38,.72); border:1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px);
  box-shadow:0 18px 50px -18px rgba(139,92,246,.6); transform: translate(-50%,-50%); opacity:0; }
.ccard b { display:block; font-size: clamp(10px,1.5vmin,14px); margin-bottom:7px; }
.ccard i { display:block; height:5px; border-radius:3px; background: rgba(255,255,255,.16); margin-top:5px; }
.ccard i:nth-child(2){width:90%} .ccard i:nth-child(3){width:70%} .ccard i:nth-child(4){width:55%}
.scene4.is-active .ccard { animation: flyOut 1s var(--ease) both; }
.scene4.is-active .cc1{animation-delay:.20s; --tx:-230%; --ty:-120%}
.scene4.is-active .cc2{animation-delay:.32s; --tx:30%;  --ty:-150%}
.scene4.is-active .cc3{animation-delay:.44s; --tx:250%; --ty:-90%}
.scene4.is-active .cc4{animation-delay:.56s; --tx:-260%;--ty:60%}
.scene4.is-active .cc5{animation-delay:.68s; --tx:280%; --ty:55%}
.scene4.is-active .cc6{animation-delay:.80s; --tx:-150%;--ty:140%}
.scene4.is-active .cc7{animation-delay:.92s; --tx:150%; --ty:150%}
@keyframes flyOut {
  0%   { opacity:0; transform: translate(-50%,-50%) scale(.4); }
  60%  { opacity:1; }
  100% { opacity:1; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(var(--rot,0deg)); }
}
.scene4.is-active .orbit { animation: orbitSpin 22s linear 1.4s infinite; }
@keyframes orbitSpin { from{transform: rotate(0)} to{transform: rotate(2deg)} } /* subtle drift */

/* ===================== SCENE 5 — Premium ===================== */
.dash { position:relative; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2vmin; width:min(70%,640px); margin:0 auto 1vmin; }
.dash-card { background: rgba(20,18,38,.7); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding: clamp(14px,2.4vmin,24px); backdrop-filter: blur(12px); opacity:0; }
.scene5.is-active .dash-card { animation: chipIn .7s var(--ease) both; }
.scene5.is-active .dash-card:nth-child(2){animation-delay:.12s}
.scene5.is-active .dash-card:nth-child(3){animation-delay:.24s; grid-column:1 / -1}
.dash-card.chart { grid-column:1 / -1; display:flex; align-items:flex-end; gap: 3%; height: clamp(80px,14vmin,140px); }
.kpi-label { display:block; font-size: clamp(10px,1.5vmin,14px); color:var(--dim); margin-bottom:8px; }
.kpi-num { font-size: clamp(26px,5vmin,52px); font-weight:900; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.bar { flex:1; background: linear-gradient(180deg,var(--p1),var(--b2)); border-radius:6px 6px 0 0; height:20%; box-shadow:0 0 18px rgba(139,92,246,.4); }
.scene5.is-active .bar { animation: grow 1s var(--ease) both; }
.scene5.is-active .b1{--h:45%;animation-delay:.3s} .scene5.is-active .b2{--h:65%;animation-delay:.4s} .scene5.is-active .b3{--h:50%;animation-delay:.5s}
.scene5.is-active .b4{--h:80%;animation-delay:.6s} .scene5.is-active .b5{--h:68%;animation-delay:.7s} .scene5.is-active .b6{--h:95%;animation-delay:.8s}
@keyframes grow { from{height:6%} to{height:var(--h,60%)} }
.pro-badge { position:absolute; top:-14px; right:-14px; font-size: clamp(13px,2vmin,20px); font-weight:900; letter-spacing:.08em; color:#fff;
  padding:8px 16px; border-radius:12px; background: linear-gradient(120deg,var(--p1),var(--pink)); box-shadow:0 10px 30px -8px rgba(236,72,153,.7); transform: rotate(6deg); }
.pro-glow { position:absolute; inset:-3px; border-radius:14px; background: linear-gradient(120deg,var(--p1),var(--pink)); filter: blur(14px); opacity:.6; z-index:-1; animation: pulse2 2s ease-in-out infinite; }
@keyframes pulse2 { 0%,100%{opacity:.4} 50%{opacity:.9} }

/* ===================== SCENE 6 — Logo + CTA ===================== */
.logo-assemble { display:flex; align-items:center; justify-content:center; gap: 1.4vmin; margin-bottom:1vmin; }
.logo-mark { display:grid; place-items:center; width: clamp(54px,9vmin,90px); aspect-ratio:1; border-radius:20px; background: linear-gradient(135deg,var(--p2),var(--b2)); box-shadow:0 0 50px rgba(139,92,246,.7); }
.scene6.is-active .logo-mark { animation: popIn .9s var(--ease) both; }
.logo-word { font-size: clamp(26px,5.4vmin,64px); font-weight:900; letter-spacing:-.02em; }
.scene6.is-active .logo-word { animation: riseIn .9s var(--ease) .2s both; }
@keyframes popIn { 0%{opacity:0; transform: scale(.3) rotate(-20deg)} 70%{transform: scale(1.08)} 100%{opacity:1; transform:none} }
.cta-line { font-size: clamp(20px,4.2vmin,52px); font-weight:900; letter-spacing:-.02em; margin:0; }
.scene6.is-active .cta-line { animation: riseIn .9s var(--ease) .45s both; }
.cta-btn { justify-self:center; margin-top:1vmin; text-decoration:none; font-weight:800; font-size: clamp(14px,2.2vmin,22px); color:#fff;
  padding: clamp(12px,2.2vmin,20px) clamp(24px,4.5vmin,46px); border-radius:16px;
  background: linear-gradient(120deg,var(--p2),var(--b1) 50%,var(--b2)); box-shadow:0 16px 44px -12px rgba(139,92,246,.9);
  transition: transform .2s var(--ease), box-shadow .25s; }
.scene6.is-active .cta-btn { animation: riseIn .9s var(--ease) .7s both; }
.cta-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow:0 22px 56px -12px rgba(139,92,246,1); }

/* ---- Controls ---- */
.cinema-progress { position:absolute; left:0; right:0; bottom:0; height:3px; z-index:5; background: rgba(255,255,255,.08); }
#progressBar { display:block; height:100%; width:0; background: var(--grad); box-shadow:0 0 12px rgba(139,92,246,.7); }
.cinema-nav { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:flex; gap:9px; z-index:6; }
.cinema-nav button { width:30px; height:5px; border:0; border-radius:99px; background: rgba(255,255,255,.22); cursor:pointer; padding:0; transition:.3s; }
.cinema-nav button.on { background: var(--grad); width:46px; }
.cinema-toggle { position:absolute; right:16px; bottom:16px; z-index:6; width:34px; height:34px; border-radius:10px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:var(--ink); cursor:pointer; font-size:11px; backdrop-filter: blur(8px); }
.cinema-toggle:hover { background: rgba(255,255,255,.16); }

/* ---- Responsive: vertical / mobile ---- */
@media (max-width: 760px), (orientation: portrait) {
  .cinema[data-aspect="16:9"] { aspect-ratio: 9 / 16; }
  .browser { width: 92%; }
  .dash { width: 90%; }
  .orbit { width: 96%; aspect-ratio: 3/4; }
  .scene4.is-active .cc1{--tx:-120%;--ty:-150%} .scene4.is-active .cc2{--tx:20%;--ty:-185%}
  .scene4.is-active .cc3{--tx:120%;--ty:-150%} .scene4.is-active .cc4{--tx:-130%;--ty:90%}
  .scene4.is-active .cc5{--tx:130%;--ty:90%} .scene4.is-active .cc6{--tx:-70%;--ty:185%}
  .scene4.is-active .cc7{--tx:70%;--ty:185%}
  .proc-chips { max-width: 96%; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .cinema *, .cinema *::before, .cinema *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .scene { transition: opacity .3s ease; transform: none; }
  .reel3d-inner { transform: rotateY(0) rotateX(0); }
}