/* ============= CINEMA ============= */
/* Hero is gone — cinema IS the hero. 500vh total: 5 scenes * 100vh */
.cinema{height:500vh;position:relative;background:#04060a}
.cinema-sticky{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}

/* ============= BACKDROP ============= */
.cin-bg{position:absolute;inset:0;pointer-events:none;z-index:0;transition:filter .6s}
.cin-glow{position:absolute;border-radius:50%;filter:blur(80px);transition:all .8s cubic-bezier(.2,.7,.2,1)}
.cin-glow.g1{width:800px;height:800px;top:-200px;right:-150px;background:radial-gradient(circle, rgba(0,224,255,0.22), transparent 70%)}
.cin-glow.g2{width:600px;height:600px;bottom:-200px;left:-100px;background:radial-gradient(circle, rgba(212,168,90,0.10), transparent 70%)}

/* Perspective floor — appears in scenes 1+ */
.cin-floor{
  position:absolute;left:50%;bottom:0;width:220%;height:55%;
  transform:translateX(-50%) rotateX(76deg);
  transform-origin:center top;
  background:
    linear-gradient(to right, rgba(0,224,255,0.18) 1px, transparent 1px) 0 0 / 80px 100%,
    linear-gradient(to bottom, rgba(0,224,255,0.18) 1px, transparent 1px) 0 0 / 100% 80px;
  mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, #000 30%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, #000 30%, transparent 70%);
  animation:cinFloorFlow 12s linear infinite;
  opacity:0;transition:opacity .8s, filter .8s;
}
.cinema[data-scene="1"] .cin-floor,
.cinema[data-scene="2"] .cin-floor,
.cinema[data-scene="3"] .cin-floor,
.cinema[data-scene="4"] .cin-floor{opacity:1}
.cinema[data-scene="4"] .cin-floor{
  background:
    linear-gradient(to right, rgba(212,168,90,0.22) 1px, transparent 1px) 0 0 / 80px 100%,
    linear-gradient(to bottom, rgba(212,168,90,0.22) 1px, transparent 1px) 0 0 / 100% 80px;
}
@keyframes cinFloorFlow{from{background-position:0 0, 0 0}to{background-position:0 0, 0 80px}}

/* Soft cross-hair grid — hero only */
.cin-grid{position:absolute;inset:0;background:
  linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 100% 80px,
  linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 80px 100%;
  mask-image:radial-gradient(ellipse at center, #000 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 0%, transparent 70%);
  opacity:0.5;transition:opacity .6s}
.cinema[data-scene="4"] .cin-grid{opacity:0}

#dropletCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:0.4;transition:opacity .6s}
.cinema[data-scene="4"] #dropletCanvas{opacity:0}

/* ============= ORBITING ORBS ============= */
.cin-orbit{position:absolute;top:50%;left:50%;width:0;height:0;z-index:1;pointer-events:none}
.cin-orbit .orb{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(0,224,255,0.4), rgba(0,224,255,0.05) 60%, transparent);
  box-shadow:0 0 30px rgba(0,224,255,0.3);
  filter:blur(2px);
  animation:orbFloat 14s ease-in-out infinite;
}
.cin-orbit .o1{width:14px;height:14px;top:-40vh;left:-30vw;animation-delay:0s}
.cin-orbit .o2{width:10px;height:10px;top:30vh;left:35vw;animation-delay:-4s}
.cin-orbit .o3{width:18px;height:18px;top:25vh;left:-38vw;animation-delay:-8s}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(40px,-30px)}
}

/* ============= CAR — driven by .cinema[data-scene] ============= */
.cin-car-wrap{
  position:absolute;top:50%;left:50%;
  width:min(58vw, 800px);aspect-ratio:16/9;
  transform:translate(-50%,-50%) translate(var(--cx,0%), var(--cy,0%)) scale(var(--cs,1)) rotateY(var(--cry,0deg));
  transition:transform .85s cubic-bezier(.22,.8,.18,1), filter .85s;
  z-index:3;perspective:1200px;
  filter:var(--cf, none);
}
.cin-car{position:relative;width:100%;height:100%;transform-style:preserve-3d}

/* Scene presets — car position + scale */
.cinema[data-scene="0"] .cin-car-wrap{--cx:0%;--cy:0%;--cs:1;--cry:0deg;--cf:brightness(1)}
.cinema[data-scene="1"] .cin-car-wrap{--cx:30%;--cy:0%;--cs:0.92;--cry:-12deg;--cf:brightness(0.95)}
.cinema[data-scene="2"] .cin-car-wrap{--cx:-30%;--cy:0%;--cs:0.95;--cry:14deg;--cf:brightness(1.05) saturate(1.2)}
.cinema[data-scene="3"] .cin-car-wrap{--cx:0%;--cy:8%;--cs:1.02;--cry:-4deg;--cf:brightness(1.05)}
.cinema[data-scene="4"] .cin-car-wrap{--cx:0%;--cy:0%;--cs:1.18;--cry:0deg;--cf:brightness(1.25) saturate(1.4) drop-shadow(0 0 50px rgba(212,168,90,0.6))}

@media(max-width:900px){
  .cin-car-wrap{width:78vw}
  .cinema[data-scene="1"] .cin-car-wrap{--cx:0%;--cy:-18%;--cs:0.78}
  .cinema[data-scene="2"] .cin-car-wrap{--cx:0%;--cy:18%;--cs:0.82}
  .cinema[data-scene="3"] .cin-car-wrap{--cx:0%;--cy:0%;--cs:0.94}
  .cinema[data-scene="4"] .cin-car-wrap{--cx:0%;--cy:-4%;--cs:1.0}
}

/* ============= FLOATING WATER (scene 02) ============= */
.cin-water{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .6s}
.cinema[data-scene="2"] .cin-water{opacity:1}
.cin-water span{
  position:absolute;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(180,230,255,0.95), rgba(0,224,255,0.3) 60%, transparent);
  box-shadow:0 0 16px rgba(0,224,255,0.5);
  animation:cinFloat 7s ease-in-out infinite;
}
.cin-water span:nth-child(1){top:20%;right:8%;animation-delay:0s;width:8px;height:8px}
.cin-water span:nth-child(2){top:30%;right:18%;animation-delay:.4s;width:14px;height:14px}
.cin-water span:nth-child(3){top:42%;right:6%;animation-delay:.8s;width:6px;height:6px}
.cin-water span:nth-child(4){top:52%;right:22%;animation-delay:1.2s;width:12px;height:12px}
.cin-water span:nth-child(5){top:60%;right:10%;animation-delay:.2s;width:10px;height:10px}
.cin-water span:nth-child(6){top:70%;right:16%;animation-delay:1.5s;width:7px;height:7px}
.cin-water span:nth-child(7){top:25%;right:30%;animation-delay:.6s;width:9px;height:9px}
.cin-water span:nth-child(8){top:48%;right:32%;animation-delay:1.0s;width:11px;height:11px}
.cin-water span:nth-child(9){top:65%;right:28%;animation-delay:.3s;width:6px;height:6px}
.cin-water span:nth-child(10){top:35%;right:14%;animation-delay:.7s;width:8px;height:8px}
.cin-water span:nth-child(11){top:15%;right:25%;animation-delay:1.3s;width:14px;height:14px}
.cin-water span:nth-child(12){top:55%;right:38%;animation-delay:.5s;width:10px;height:10px}
.cin-water span:nth-child(13){top:78%;right:20%;animation-delay:.9s;width:7px;height:7px}
.cin-water span:nth-child(14){top:18%;right:38%;animation-delay:1.6s;width:9px;height:9px}
.cin-water span:nth-child(15){top:40%;right:42%;animation-delay:.1s;width:13px;height:13px}
@keyframes cinFloat{
  0%,100%{transform:translateY(0) translateX(0);opacity:0}
  20%{opacity:1}
  50%{transform:translateY(-40px) translateX(-12px);opacity:1}
  80%{opacity:0.6}
  100%{transform:translateY(-80px) translateX(-20px);opacity:0}
}

/* ============= TEXT PANELS ============= */
.cin-panel{
  position:absolute;inset:0;
  padding:120px var(--pad) 80px;
  display:grid;
  pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .55s ease, visibility 0s .55s;
  z-index:4;
}
.cin-panel.on{opacity:1;visibility:visible;transition:opacity .55s ease, visibility 0s 0s}
.cin-panel.on .cin-side{pointer-events:auto}

/* SCENE 0 — text on left and right, car in middle */
.cin-panel.s00{grid-template-columns:1fr auto 1fr;align-items:center;gap:40px}
.cin-panel.s00 .cin-left{justify-self:start;text-align:left;max-width:36ch}
.cin-panel.s00 .cin-right{justify-self:end;text-align:right;max-width:36ch}
.cin-panel.s00 .cin-right .cin-cta{justify-content:flex-end}
.cin-panel.s00 .cin-right .cin-stats{justify-content:flex-end}
@media(max-width:1100px){
  .cin-panel.s00{grid-template-columns:1fr;align-items:start;gap:0;padding-top:120px}
  .cin-panel.s00 .cin-left,.cin-panel.s00 .cin-right{justify-self:center;text-align:center}
  .cin-panel.s00 .cin-right{align-self:end}
  .cin-panel.s00 .cin-right .cin-cta,.cin-panel.s00 .cin-right .cin-stats{justify-content:center}
}

/* SCENE 1 — text on left, car on right */
.cin-panel.s01{grid-template-columns:1fr 1fr;align-items:center}
.cin-panel.s01 .cin-left.wide{max-width:48ch}

/* SCENE 2 — car on left, text on right */
.cin-panel.s02{grid-template-columns:1fr 1fr;align-items:center}
.cin-panel.s02 .cin-right.wide{max-width:48ch;justify-self:end}

/* SCENE 3 — text top + bottom, car in middle */
.cin-panel.s03{grid-template-rows:1fr 1fr;justify-items:center;align-items:center;text-align:center}
.cin-panel.s03 .cin-top{align-self:end;padding-bottom:60px;max-width:44ch}
.cin-panel.s03 .cin-bottom{align-self:start;padding-top:60px;max-width:54ch}

/* SCENE 4 — mega type */
.cin-panel.s04{place-items:center;text-align:center;grid-template-rows:1fr auto auto auto 1fr;gap:20px}
.cin-panel.s04 .cin-mega{font-size:clamp(64px,11vw,180px);grid-row:2;line-height:0.95}
.cin-panel.s04 .cin-end-lead{grid-row:3;max-width:42ch;font-size:18px}
.cin-panel.s04 .cin-end-cta{grid-row:4}

@media(max-width:900px){
  .cin-panel.s01,.cin-panel.s02{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .cin-panel.s01 .cin-left,.cin-panel.s02 .cin-right{justify-self:center;text-align:center;align-self:start}
}

/* Text styling */
.cin-side{display:flex;flex-direction:column;gap:18px}
.cin-panel h1.display,.cin-panel h2.display{font-size:clamp(48px,8vw,128px);line-height:0.95}
.cin-panel h1 .acc,.cin-panel h2 .acc,.cin-mega .acc{color:var(--accent)}
.cin-num{font-family:var(--mono);font-size:11px;letter-spacing:0.2em;color:var(--accent);text-transform:uppercase}
.cin-panel .lead{font-size:clamp(16px,1.4vw,19px);line-height:1.55;max-width:46ch}
.cin-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.btn-lg{padding:18px 26px;font-size:13px;letter-spacing:0.16em}
.hero-pricing{
  display:flex;align-items:baseline;gap:18px;margin-top:6px;
  padding:14px 20px;border:1px solid rgba(0,224,255,0.25);border-radius:14px;
  background:linear-gradient(180deg, rgba(0,224,255,0.06), rgba(0,224,255,0.02));
  width:fit-content;
}
.hero-pricing .hp-from{font-family:var(--mono);font-size:10px;letter-spacing:0.22em;color:var(--text-mute);text-transform:uppercase;align-self:center}
.hero-pricing .hp-amount{font-family:var(--display);font-size:48px;color:var(--text);line-height:1;letter-spacing:-0.01em}
.hero-pricing .hp-amount .pre{font-family:var(--mono);font-size:0.34em;color:var(--text-mute);margin-right:6px;letter-spacing:0.1em;font-weight:400}
.hero-pricing .hp-meta{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;color:var(--text-mute);text-transform:uppercase;line-height:1.5;align-self:center}
.hero-pricing .acc-cyan{color:var(--accent)}
.cin-panel.s00 .cin-right .hero-pricing{margin-left:auto}
@media(max-width:1100px){
  .cin-panel.s00 .cin-right .hero-pricing{margin:6px auto 0}
  .hero-pricing{flex-direction:column;align-items:flex-start;gap:6px;text-align:left}
}
.cin-stats{display:flex;gap:36px;margin-top:16px;flex-wrap:wrap}
.cin-stats > div{display:flex;flex-direction:column;gap:4px}
.cin-stats .v{font-family:var(--display);font-size:32px;line-height:1;color:var(--text)}
.cin-stats .l{font-family:var(--mono);font-size:9px;letter-spacing:0.18em;color:var(--text-mute);text-transform:uppercase}

.cin-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:14px}
.cin-list li{display:flex;align-items:center;gap:12px;font-size:14px;color:#dfe2e8;font-family:var(--mono);letter-spacing:0.04em}
.cin-list li span{color:var(--accent)}

.cin-meter{display:flex;flex-direction:column;gap:12px;margin-top:14px;max-width:480px}
.cin-meter-bar{height:54px;background:rgba(255,255,255,0.04);border:1px solid var(--line);border-radius:10px;position:relative;display:flex;align-items:center;padding:0 18px;overflow:hidden}
.cin-meter-fill{position:absolute;left:0;top:0;bottom:0;width:var(--p,8%);background:linear-gradient(90deg, rgba(0,224,255,0.3), rgba(0,224,255,0.05));transition:width 1s ease}
.cin-meter-bar.full .cin-meter-fill{background:linear-gradient(90deg, rgba(255,92,92,0.3), rgba(255,92,92,0.05))}
.cin-meter-l{position:relative;font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text);z-index:1}

/* ============= HUD ============= */
.cin-hud{position:absolute;top:90px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:6}
.cin-scenes{display:flex;gap:8px}
.cin-scene-dot{width:24px;height:3px;border-radius:2px;background:rgba(255,255,255,0.15);transition:all .4s}
.cin-scene-dot.on{background:var(--accent);box-shadow:0 0 10px var(--accent);width:36px}
.cin-progress{width:min(60vw,500px);height:1px;background:rgba(255,255,255,0.1);border-radius:1px;overflow:hidden}
.cin-progress-fill{height:100%;width:0;background:linear-gradient(90deg, var(--accent), var(--gold));transition:width .15s linear;box-shadow:0 0 8px var(--accent)}
.cin-scene-label{font-size:10px;letter-spacing:0.2em;color:var(--text-mute);text-transform:uppercase}

/* ============= SCROLL CUE ============= */
.cin-scroll-cue{position:absolute;bottom:24px;left:var(--pad);z-index:6;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;letter-spacing:0.24em;color:var(--text-mute);text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg);transition:opacity .4s}
.cin-scroll-cue .cue-line{display:inline-block;writing-mode:horizontal-tb;width:1px;height:50px;background:linear-gradient(to bottom,var(--accent),transparent);position:relative;overflow:hidden}
.cin-scroll-cue .cue-line::after{content:"";position:absolute;top:-20px;left:-1px;width:3px;height:20px;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:cueRun 2s ease-in-out infinite}
@keyframes cueRun{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(70px);opacity:0}}
.cinema[data-scene="4"] .cin-scroll-cue{opacity:0}