/* ============================================================
   PREMIUM CINEMA LAYER — Apple Launch · Tesla · Vision Pro · Jarvis · Cyberpunk
   Additive. Never overrides existing tokens; only extends.
   ============================================================ */

/* ---- Custom cursor (desktop only) ---- */
@media (hover:hover) and (pointer:fine){
  body{cursor:none}
  .mag-cursor{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;background:rgba(0,229,255,.9);box-shadow:0 0 18px rgba(0,229,255,.7);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:transform .18s ease,opacity .2s ease,background .2s}
  .mag-cursor.ring{width:42px;height:42px;background:transparent;border:1px solid rgba(168,85,247,.7);box-shadow:0 0 24px rgba(168,85,247,.45)}
  .mag-cursor.active{transform:translate(-50%,-50%) scale(1.7);background:rgba(255,61,154,.9)}
  a,button,.magnet,[data-magnet]{cursor:none}
}

/* ---- Magnetic Buttons + ripple ---- */
.btn.magnet,.btn-primary.magnet,.magnet{position:relative;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.magnet:after{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(135deg,rgba(0,229,255,.4),rgba(168,85,247,.4),rgba(255,61,154,.4));filter:blur(14px);opacity:0;transition:opacity .35s;z-index:-1}
.magnet:hover:after{opacity:.85}

/* ---- Story World ---- */
.storyworld{position:relative;padding:120px 6vw}
.story-stage{position:relative;display:grid;gap:24px;perspective:1400px}
.story-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.story-card{position:relative;padding:28px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line);backdrop-filter:blur(18px) saturate(140%);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.story-card:hover{transform:translateY(-6px) rotateX(3deg) rotateY(-3deg);box-shadow:var(--shadow-glow)}
.story-card .sc-num{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.28em;color:#00e5ff;text-transform:uppercase}
.story-card h4{margin:.6em 0 .35em;font-size:22px;letter-spacing:-.02em}
.story-card p{font-size:14.5px;line-height:1.65}
.story-card .sc-emoji{font-size:34px;display:block;margin-bottom:6px;filter:drop-shadow(0 6px 18px rgba(168,85,247,.45))}

/* ---- Spatial / Vision Pro ---- */
.spatial{position:relative;padding:140px 6vw;overflow:hidden}
.spatial-stage{position:relative;height:min(64vh,560px);max-width:1200px;margin:0 auto}
.sp-card{position:absolute;padding:22px 26px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(28px) saturate(160%);box-shadow:0 30px 80px -30px rgba(0,229,255,.35),0 30px 80px -30px rgba(168,85,247,.35);transform-style:preserve-3d;animation:spFloat 8s ease-in-out infinite}
.sp-card .sp-num{font-family:"Instrument Serif",serif;font-style:italic;font-size:54px;line-height:1;margin:6px 0;background:linear-gradient(135deg,#00e5ff,#a855f7 55%,#ff3d9a);-webkit-background-clip:text;background-clip:text;color:transparent}
.sp-card span{color:#8a92ad;font-size:13px}
.sp-card.s1{top:6%;left:4%;animation-delay:0s}
.sp-card.s2{top:20%;right:6%;animation-delay:-1.4s}
.sp-card.s3{top:48%;left:14%;animation-delay:-2.8s}
.sp-card.s4{bottom:6%;right:12%;animation-delay:-4.2s}
.sp-card.s5{bottom:18%;left:42%;animation-delay:-5.6s}
.sp-orb{position:absolute;left:50%;top:50%;width:280px;height:280px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 35%,rgba(0,229,255,.6),rgba(168,85,247,.4) 45%,transparent 70%);filter:blur(20px);opacity:.55;animation:spOrb 12s ease-in-out infinite alternate}
@keyframes spFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes spOrb{50%{transform:translate(-50%,-50%) scale(1.15);opacity:.7}}
@media (max-width:780px){.spatial-stage{height:auto;display:grid;gap:14px}.sp-card{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;animation:none}.sp-orb{display:none}}

/* ---- Jarvis HUD ---- */
.jarvis{position:relative;padding:140px 6vw;background:radial-gradient(ellipse at 50% 0%,rgba(0,229,255,.08),transparent 60%)}
.hud-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:24px;max-width:1280px;margin:0 auto}
.hud-panel{position:relative;padding:24px;border-radius:20px;background:linear-gradient(180deg,rgba(0,20,40,.55),rgba(0,8,18,.65));border:1px solid rgba(0,229,255,.18);backdrop-filter:blur(14px) saturate(140%);box-shadow:inset 0 0 0 1px rgba(0,229,255,.08),0 20px 60px -20px rgba(0,229,255,.35)}
.hud-panel:before{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(0deg,rgba(0,229,255,.06) 0 1px,transparent 1px 4px);opacity:.4;pointer-events:none;mask-image:linear-gradient(180deg,#000 30%,transparent)}
.hud-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.06);font-size:13.5px}
.hud-row:last-child{border-bottom:0}
.hud-row .mono{min-width:80px;font-size:10.5px}
.hud-row b{color:#e9ecf5}
.hud-chip{padding:3px 8px;border-radius:99px;border:1px solid rgba(0,229,255,.4);color:#00e5ff;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.16em}
.hud-num{color:#a855f7;font-family:"Instrument Serif",serif;font-size:22px;margin:0 4px}
.hud-bar{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.hud-bar i{display:block;height:100%;background:linear-gradient(90deg,#00e5ff,#a855f7,#ff3d9a);box-shadow:0 0 12px rgba(0,229,255,.6)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;box-shadow:0 0 8px currentColor}
.dot.ok{background:#3ee7a1;color:#3ee7a1;animation:blink 1.4s infinite}
.dot.warn{background:#f5c563;color:#f5c563;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.4}}
.hp-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.hud-ring{width:min(64vw,320px);height:auto}
.hud-spin{transform-origin:50% 50%;animation:clSpin 10s linear infinite}
.hud-spin.rev{animation-direction:reverse;animation-duration:14s}
.hud-caption{text-align:center;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.24em;color:#8a92ad}
.hud-caption b{display:block;color:#e9ecf5;font-size:14px;margin-bottom:4px}
@media (max-width:920px){.hud-grid{grid-template-columns:1fr}}

/* ---- Inspirations ---- */
.inspire{padding:140px 6vw}
.inspire-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;max-width:1280px;margin:0 auto}
.ins-card{position:relative;padding:24px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line);overflow:hidden;transition:transform .35s,box-shadow .35s,border-color .35s}
.ins-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-glow);border-color:rgba(0,229,255,.35)}
.ins-card .ins-num{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.28em;color:#00e5ff}
.ins-card h4{margin:.45em 0 .35em;font-size:20px;letter-spacing:-.02em}
.ins-card p{font-size:13.5px;line-height:1.6}
.ins-card .ins-goal{display:block;margin-top:10px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.08);font-style:italic;color:#a78bfa;font-size:13px}
.ins-card .ins-bg{position:absolute;inset:auto -30% -40% auto;width:200px;height:200px;border-radius:50%;filter:blur(40px);opacity:.45;pointer-events:none}

/* ---- Engagement / Conversion psychology ---- */
.engage{padding:140px 6vw;background:radial-gradient(ellipse at 0% 100%,rgba(168,85,247,.1),transparent 55%),radial-gradient(ellipse at 100% 0%,rgba(0,229,255,.08),transparent 55%)}
.engage-list{counter-reset:eg;list-style:none;padding:0;margin:0;max-width:980px;margin-inline:auto;display:grid;gap:14px}
.eg-item{counter-increment:eg;position:relative;padding:22px 22px 22px 88px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));backdrop-filter:blur(8px)}
.eg-item:before{content:counter(eg,decimal-leading-zero);position:absolute;left:18px;top:50%;transform:translateY(-50%);font-family:"Instrument Serif",serif;font-style:italic;font-size:44px;background:linear-gradient(135deg,#00e5ff,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.eg-item h4{margin:0 0 4px;font-size:17px}
.eg-item p{margin:0;font-size:14px}
.engage-cta{margin-top:28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}

/* ---- Section heads + chapter polish (additive) ---- */
.section .s-head{max-width:880px;margin:0 auto 40px;text-align:center}
.section .s-head .accent{background:linear-gradient(135deg,#00e5ff,#a855f7 55%,#ff3d9a);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- Reveal helper (works with existing .reveal) ---- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---- Premium scrollbar ---- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#05070d}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#00e5ff,#a855f7,#ff3d9a);border-radius:99px;border:2px solid #05070d}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms!important;transition-duration:0.001ms!important}
  .sp-card,.sp-orb,.hud-spin,.cl-ring,.cl-core{animation:none!important}
}