/* ============================================================
   electrONIK — IMMERSION: a dive inside the device
   Loads ON TOP of exp-styles.css (reuses tokens, devices, cards,
   buttons, trust & cta styling).
   ============================================================ */

/* ---------- depth tunnel ---------- */
#dive{position:relative;background:#02060b;}
.dive-track{height:760vh;position:relative;}
.dive-pin{position:sticky;top:0;height:100vh;overflow:hidden;
  perspective:1000px;perspective-origin:50% 50%;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(var(--accent2-rgb),.06), transparent 60%),
    #02060b;}
.world{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;}

/* each depth layer is centred and pushed in Z by JS */
.depth{position:absolute;left:50%;top:50%;width:1100px;height:760px;
  transform-style:preserve-3d;will-change:transform,opacity;backface-visibility:hidden;opacity:0;}
@media(max-width:900px){.depth{width:118vw;height:84vh;left:50%;top:50%;transform-origin:center;}}

/* depth haze that intensifies as we go deeper */
.dive-haze{position:absolute;inset:0;z-index:6;pointer-events:none;
  background:radial-gradient(130% 120% at 50% 50%, transparent 30%, rgba(2,6,11,.55) 80%, #02060b 100%);}

/* progress dots (which stratum you're in) */
.strata{position:fixed;right:clamp(16px,2.4vw,30px);top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:14px;align-items:flex-end;}
.strata .s{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);opacity:.4;transition:opacity .4s,color .4s;}
.strata .s .dot{width:7px;height:7px;border-radius:50%;border:1.4px solid var(--muted);transition:all .4s;}
.strata .s.on{opacity:1;color:var(--ink);}
.strata .s.on .dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.9);}
@media(max-width:760px){.strata{display:none;}}

/* ---------- captions (screen-space, cross-faded) ---------- */
.captions{position:absolute;inset:0;z-index:8;pointer-events:none;}
.cap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,900px);text-align:center;opacity:0;will-change:opacity,transform;}
.cap .eyebrow{justify-content:center;margin-bottom:18px;}
.cap h2{font-size:clamp(2rem,6vw,4.6rem);font-weight:650;letter-spacing:-.035em;line-height:1.04;text-wrap:balance;}
.cap p{margin:18px auto 0;color:var(--muted);font-size:clamp(1rem,1.5vw,1.25rem);max-width:40ch;line-height:1.55;}
.cap .em{color:var(--accent);text-shadow:0 0 36px rgba(var(--accent-rgb),.5);}
.cap .em-red{color:var(--danger);text-shadow:0 0 36px rgba(255,60,90,.4);}
.cap .em-blue{color:var(--accent-2);}

/* skip control */
.dive-skip{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:72;
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:color .3s;}
.dive-skip:hover{color:var(--ink);}
.dive-skip .bar{width:1px;height:30px;background:linear-gradient(var(--muted),transparent);}

/* ============================================================
   LAYER 0 — EXTERIOR (the everyday device)
   ============================================================ */
.ly-exterior{display:flex;align-items:center;justify-content:center;}
.ly-exterior .device{transform:scale(1.5);}
.ly-exterior .halo{position:absolute;left:50%;top:50%;width:560px;height:560px;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.18),transparent 62%);filter:blur(28px);}

/* ============================================================
   LAYER 1 — GLASS / PIXELS (passing through the screen)
   ============================================================ */
.ly-pixels{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,1fr);
  gap:10px;padding:60px;}
.px{border-radius:7px;background:linear-gradient(150deg,rgba(var(--accent-rgb),.5),rgba(var(--accent2-rgb),.25));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);opacity:.9;}
.px.dim{background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02));}
.px.hot{background:linear-gradient(150deg,var(--accent),rgba(var(--accent2-rgb),.6));box-shadow:0 0 18px rgba(var(--accent-rgb),.5);}
.scanline{position:absolute;left:0;right:0;height:3px;background:rgba(var(--accent-rgb),.5);filter:blur(1px);
  box-shadow:0 0 14px rgba(var(--accent-rgb),.7);top:0;animation:scandown 3.4s linear infinite;}
@keyframes scandown{from{top:0}to{top:100%}}

/* ============================================================
   BOARD substrate (shared by layers 2-5)
   ============================================================ */
.board-sub{position:absolute;inset:-8%;border-radius:18px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(var(--accent-rgb),.10), transparent 55%),
    linear-gradient(150deg,#08180f,#04100a 70%);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.18), inset 0 0 120px rgba(0,0,0,.6);}
.board-sub::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(var(--accent-rgb),.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--accent-rgb),.05) 1px,transparent 1px);
  background-size:38px 38px;}
.board-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.board-svg .trace{fill:none;stroke:rgba(var(--accent-rgb),.45);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.board-svg .trace.blue{stroke:rgba(var(--accent2-rgb),.5);}
.board-svg .flow{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.9));}
.board-svg .pad{fill:#071810;stroke:rgba(var(--accent-rgb),.6);stroke-width:1.4;}
.board-svg .via{fill:rgba(var(--accent-rgb),.7);}

/* ============================================================
   SMT components (generated)
   ============================================================ */
.smt{position:absolute;border-radius:2px;transform:translate(-50%,-50%);}
.smt.ic{background:linear-gradient(150deg,#1b222b,#0a0e13);
  box-shadow:0 6px 14px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.05);border-radius:4px;}
.smt.ic::before,.smt.ic::after{content:"";position:absolute;left:6%;right:6%;height:14%;
  background-image:repeating-linear-gradient(90deg,rgba(var(--accent-rgb),.7) 0 2px,transparent 2px 7px);}
.smt.ic::before{top:-8%;}.smt.ic::after{bottom:-8%;}
.smt.ic .die{position:absolute;inset:26%;border-radius:2px;
  background:radial-gradient(circle at 40% 30%,rgba(var(--accent-rgb),.35),#0c1a13);
  box-shadow:0 0 16px rgba(var(--accent-rgb),.45);}
.smt.cap{background:linear-gradient(#caa64a,#7c5e1e);border-radius:3px;
  box-shadow:0 4px 10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.3);}
.smt.cap::after{content:"";position:absolute;left:0;top:0;bottom:0;width:22%;background:rgba(255,255,255,.18);}
.smt.res{background:linear-gradient(#0c0f13,#05070a);border-radius:2px;box-shadow:0 4px 10px rgba(0,0,0,.5);}
.smt.res::before,.smt.res::after{content:"";position:absolute;top:0;bottom:0;width:20%;background:#c9cdd4;}
.smt.res::before{left:0;}.smt.res::after{right:0;}
.smt.led{border-radius:50%;background:radial-gradient(circle at 40% 35%,#eafff7,var(--accent));
  box-shadow:0 0 16px rgba(var(--accent-rgb),.9);}
.smt.led.b{background:radial-gradient(circle at 40% 35%,#eafdff,var(--accent-2));box-shadow:0 0 16px rgba(var(--accent2-rgb),.9);}
.smt.cap.tall{background:linear-gradient(#11161d,#05070a);border-radius:50% 50% 4px 4px;}
.smt.cap.tall::before{content:"";position:absolute;left:50%;top:18%;width:60%;height:2px;transform:translateX(-50%);
  background:rgba(var(--accent-rgb),.5);box-shadow:0 4px 0 rgba(var(--accent-rgb),.3);}

/* ============================================================
   LAYER 4 / 5 — fault + repair macro on a single chip
   ============================================================ */
.ly-fault .chip-macro,.ly-fix .chip-macro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:360px;height:360px;}
.chip-macro .body{position:absolute;inset:18%;border-radius:10px;
  background:linear-gradient(150deg,#1b222b,#090d12);box-shadow:0 20px 50px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05);}
.chip-macro .body .die{position:absolute;inset:26%;border-radius:4px;
  background:radial-gradient(circle at 40% 30%,rgba(var(--accent-rgb),.5),#0c1a13);box-shadow:0 0 30px rgba(var(--accent-rgb),.5);}
.chip-macro .legs{position:absolute;inset:0;}
.chip-macro .leg{position:absolute;width:9%;height:13%;border-radius:2px;background:#c9cdd4;}
.chip-macro .solder{position:absolute;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#eafff7,var(--accent));box-shadow:0 0 14px rgba(var(--accent-rgb),.8);transition:all .4s;}
/* fault state */
.ly-fault .chip-macro .body{box-shadow:0 20px 50px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,60,90,.4), 0 0 60px rgba(255,40,70,.25);}
.ly-fault .chip-macro .body .die{background:radial-gradient(circle at 40% 30%,rgba(255,70,94,.5),#1a0a0d);box-shadow:0 0 30px rgba(255,50,80,.5);}
.ly-fault .chip-macro .solder.bad{background:radial-gradient(circle at 40% 35%,#ffd2d8,var(--danger));box-shadow:0 0 16px rgba(255,60,90,.9);}
.ly-fault .spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;
  box-shadow:0 0 12px 3px rgba(255,90,110,.9);opacity:0;}

/* repair tool sweep */
.fix-iron{position:absolute;left:50%;top:50%;width:4px;height:120px;transform:translate(-50%,-150%) rotate(18deg);
  background:linear-gradient(var(--accent),rgba(var(--accent-rgb),0));filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.9));opacity:0;}
.fix-iron::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(circle,#fff,var(--accent));box-shadow:0 0 22px 6px rgba(var(--accent-rgb),.9);}

/* ============================================================
   EMERGE — back on the surface, restored
   ============================================================ */
#emerge{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(#02060b,var(--bg-soft));overflow:hidden;}
#emerge .field{z-index:0;}
.emerge-inner{position:relative;z-index:5;}
.emerge-inner .display{margin:18px auto 0;max-width:13ch;}
.emerge-inner .always{color:var(--accent);text-shadow:0 0 40px rgba(var(--accent-rgb),.55);}
.emerge-device{margin:0 auto 34px;display:flex;gap:36px;justify-content:center;align-items:center;}
.emerge-device .device{transform:scale(.85);}
.emerge-sub{margin:24px auto 0;}
.emerge-actions{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* keep services flowing from the dark */
#services{background:var(--bg-soft);}