/* ============================================================================
   MARVIX LABS — Ultra-Real Cinematic Nature Journey
   style.css · pinned WebGL stage, luxury overlay system, 7-scene HUD
   Formerly Marvelous Complete Design & IT Solution · MGIT · MCDITS
   ============================================================================ */

:root{
  --neon:#00eaff;            /* neon cyan — industrial network   */
  --plasma:#7a3cff;          /* deep plasma purple               */
  --ice:#f4f6f8;            /* ice white                     */
  --blue:#29648e;           /* muted slate / premium blue    */
  --void:#020b13;           /* dark void                     */
  --deep:#06172b;           /* deep blue                     */
  --ice-85:rgba(244,246,248,0.85);
  --glow:#6fc4e8;           /* energy cyan accent            */
  --shadow-soft:0 0 18px rgba(41,100,142,0.14);
  --font:'Century Gothic','Montserrat','Inter','Avenir Next',Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto;}
html,body{width:100%;background:var(--void);}
body{
  font-family:var(--font);font-weight:300;color:var(--ice);
  overflow-x:clip;                       /* clip — never hidden */
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--blue);color:var(--ice);}

/* slim luxury scrollbar */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--void);}
::-webkit-scrollbar-thumb{background:rgba(41,100,142,.55);border-radius:3px;}
html{scrollbar-width:thin;scrollbar-color:rgba(41,100,142,.55) var(--void);}

/* ------------------------------------------------------------ WebGL stage -- */
#gl{position:fixed;inset:0;width:100%;height:100svh;display:block;z-index:0;
  filter:saturate(1.07) contrast(1.06) brightness(1.015);}

/* ---- cinematic film layer — lens vignette + animated grain over the render,
   below all typography (z<14). Pure overlay, no WebGL cost, file:// safe. ---- */
#cine{position:fixed;inset:0;z-index:8;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(ellipse 120% 130% at 50% 46%, transparent 56%, rgba(2,8,14,.20) 82%, rgba(1,4,8,.44) 100%),
    linear-gradient(to bottom, rgba(1,5,9,.24) 0%, transparent 13%, transparent 87%, rgba(1,5,9,.30) 100%);
  mix-blend-mode:multiply;}
#cine .cine-grain{
  position:absolute;inset:-60%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.04;mix-blend-mode:overlay;will-change:transform;
  animation:cineGrain .7s steps(2) infinite;}
@keyframes cineGrain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(-1%,3%)}}
@media (prefers-reduced-motion:reduce){#cine .cine-grain{animation:none;opacity:.035;}}

/* ---- teal/orange filmic split-tone — warm key light in the centre, cool teal
   shadows toward the edges: the signature modern-blockbuster color grade. Soft
   light keeps it tonal (no flat wash). Pure overlay, GPU-free, file:// safe. ---- */
#cinegrade{position:fixed;inset:0;z-index:8;pointer-events:none;mix-blend-mode:soft-light;
  background:
    radial-gradient(ellipse 86% 72% at 50% 40%, rgba(255,188,132,.07), rgba(255,172,112,.02) 46%, transparent 64%),
    linear-gradient(to bottom, rgba(46,108,138,.07) 0%, rgba(34,90,126,.02) 34%, transparent 56%, rgba(22,72,108,.09) 100%);}

/* ---- letterbox black bars REMOVED — full-screen render, no top/bottom strips ---- */
#cinebars{display:none !important;}

#scroll-space{position:relative;width:100%;height:1280vh;pointer-events:none;}

/* --------------------------------------------------------------- preloader -- */
#preloader{
  position:fixed;inset:0;z-index:70;background:var(--void);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity 1.1s ease,visibility 1.1s;
}
#preloader.done{opacity:0;visibility:hidden;}
#preloader .ring{width:60px;height:60px;animation:rot 11s linear infinite;}
@keyframes rot{to{transform:rotate(360deg);}}
#preloader .word{
  font-size:clamp(20px,2.4vw,30px);font-weight:300;letter-spacing:.62em;text-indent:.62em;
  text-transform:uppercase;color:var(--ice);text-shadow:var(--shadow-soft);
}
#preloader .tag{
  font-size:9px;letter-spacing:.48em;text-indent:.48em;text-transform:uppercase;color:var(--blue);
}
#preloader .bar{width:min(300px,62vw);height:1px;background:rgba(41,100,142,.3);overflow:hidden;position:relative;}
#preloader .bar i{position:absolute;inset:0;background:var(--blue);transform-origin:left;transform:scaleX(0);}
#preloader .pct,#preloader .step{
  font-size:9.5px;letter-spacing:.4em;text-transform:uppercase;color:rgba(244,246,248,.5);
}

/* ---------------------------------------------------------------- top nav -- */
#nav{
  position:fixed;top:0;left:0;right:0;height:74px;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 min(54px,5vw);
  background:linear-gradient(rgba(2,11,19,.42),transparent);
  transition:background .8s;
}
body.light-hud #nav{background:linear-gradient(to bottom,rgba(244,246,248,.30),transparent);}
#nav .brand{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  font-size:13px;font-weight:400;letter-spacing:.5em;text-indent:.06em;
  text-transform:uppercase;color:var(--ice);text-shadow:var(--shadow-soft);transition:color .8s;
}
body.light-hud #nav .brand{color:var(--deep);text-shadow:none;}
#nav .brand svg{width:25px;height:25px;}
#nav .links{display:flex;gap:32px;}
#nav a.nl{
  position:relative;font-size:9.5px;font-weight:400;letter-spacing:.34em;
  text-transform:uppercase;color:rgba(244,246,248,.52);text-decoration:none;
  cursor:pointer;padding:8px 0;transition:color .45s;
}
#nav a.nl::after{
  content:"";position:absolute;left:0;bottom:2px;height:1px;width:100%;
  background:var(--glow);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.22,.61,.21,1);
}
#nav a.nl:hover,#nav a.nl.active{color:var(--ice);}
#nav a.nl.active::after{transform:scaleX(1);}
body.light-hud #nav a.nl{color:rgba(6,23,43,.5);}
body.light-hud #nav a.nl:hover,body.light-hud #nav a.nl.active{color:var(--deep);}
body.light-hud #nav a.nl.active::after{background:var(--blue);}
#nav .menu-btn{
  display:flex;align-items:center;gap:10px;font-size:9.5px;font-weight:400;letter-spacing:.34em;
  color:var(--ice);cursor:pointer;background:none;border:0;font-family:var(--font);
  text-transform:uppercase;transition:color .8s;
}
body.light-hud #nav .menu-btn{color:var(--deep);}
#nav .menu-btn .dots{display:flex;gap:4px;}
#nav .menu-btn .dots i{width:4px;height:4px;border-radius:50%;background:currentColor;}

/* ----------------------------------------------------------- menu overlay -- */
#menu-overlay{
  position:fixed;inset:0;z-index:50;background:rgba(2,11,19,.95);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s;
}
#menu-overlay.open{opacity:1;visibility:visible;}
#menu-overlay ul{list-style:none;text-align:center;}
#menu-overlay li{margin:13px 0;}
#menu-overlay a{
  font-weight:300;font-size:clamp(18px,3vw,34px);letter-spacing:.45em;text-indent:.45em;
  color:rgba(244,246,248,.45);text-decoration:none;text-transform:uppercase;
  transition:color .4s;cursor:pointer;
}
#menu-overlay a:hover{color:var(--ice);}
#menu-overlay a span{
  font-size:9.5px;letter-spacing:.34em;display:block;margin-bottom:4px;color:rgba(111,196,232,.55);
}
#menu-overlay .close{
  position:absolute;top:32px;right:40px;font-family:var(--font);font-size:10px;
  letter-spacing:.34em;color:var(--ice);cursor:pointer;background:none;border:0;text-transform:uppercase;
}

/* ----------------------------------------------------- horizontal title strip */
#strip{
  position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);
  z-index:14;pointer-events:none;white-space:nowrap;opacity:0;overflow:visible;
}
#strip .row{display:inline-flex;align-items:baseline;gap:11vw;will-change:transform;}
#strip .name{
  font-weight:300;font-size:clamp(56px,10vw,190px);letter-spacing:.45em;
  color:rgba(111,196,232,.07);text-transform:uppercase;transition:color 1s;
}
#strip .name.on{color:rgba(111,196,232,.16);}
body.light-hud #strip .name{color:rgba(41,100,142,.08);}
body.light-hud #strip .name.on{color:rgba(41,100,142,.17);}

/* ------------------------------------------------------------ scene layers -- */
.sc{
  position:fixed;inset:0;z-index:20;pointer-events:none;opacity:0;
  will-change:opacity,transform;
}
.sc .inner{position:absolute;}
.sc .veil{
  display:inline-block;padding:36px 44px;border-radius:6px;
}
.sc--slate .veil{background:radial-gradient(120% 130% at 50% 50%,rgba(244,246,248,.32),transparent 72%);}
.sc .label{
  font-size:clamp(9px,0.7vw,13px);font-weight:400;letter-spacing:.58em;text-indent:.58em;text-transform:uppercase;
  color:var(--glow);margin-bottom:28px;opacity:.82;
}
.sc--slate .label{color:var(--blue);}
.sc h1,.sc h2{
  font-weight:300;text-transform:uppercase;
  font-size:clamp(32px,2.8vw,56px);
  letter-spacing:.55em;line-height:1.75;
}
.sc h1{font-weight:200;letter-spacing:.65em;text-indent:.65em;font-size:clamp(36px,5vw,96px);}
.sc .sub{
  margin-top:28px;font-size:11px;font-weight:300;letter-spacing:.36em;
  line-height:2.55;text-transform:uppercase;max-width:60ch;
}
.sc--frost{color:var(--ice-85);text-shadow:var(--shadow-soft);}
.sc--frost .sub{color:rgba(244,246,248,.6);}
.sc--slate{color:var(--deep);text-shadow:none;}
.sc--slate .sub{color:rgba(6,23,43,.75);}

/* per-scene placement */
.sc[data-sc="0"] .inner{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.sc[data-sc="0"] .eyebrow{
  font-size:9px;letter-spacing:.62em;text-indent:.62em;text-transform:uppercase;
  color:var(--glow);margin-bottom:36px;opacity:.78;
}
.sc[data-sc="0"] .origin{
  margin-top:30px;font-size:8.5px;letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;
  color:rgba(244,246,248,.4);
}
/* opening dragon-scene title — large, crisp, milky white */
.sc[data-sc="0"] .brand-wordmark{
  margin:0;font-weight:400;text-transform:uppercase;
  font-size:clamp(52px,9.5vw,176px);letter-spacing:.16em;text-indent:.16em;line-height:1.02;
  color:#f9fcff;
  text-shadow:
    0 0 6px rgba(255,255,255,.6),
    0 0 34px rgba(186,222,255,.45),
    0 0 88px rgba(120,180,255,.28),
    0 5px 30px rgba(0,0,0,.5);
}
.sc[data-sc="0"] .brand-domain{
  margin-top:22px;font-weight:400;text-transform:lowercase;
  font-size:clamp(15px,1.9vw,32px);letter-spacing:.46em;text-indent:.46em;
  color:#f4faff;
  text-shadow:0 0 20px rgba(120,210,255,.5),0 0 6px rgba(255,255,255,.45),0 2px 14px rgba(0,0,0,.45);
}
.sc[data-sc="0"] .brand-tagline{
  margin-top:24px;font-weight:300;text-transform:uppercase;
  font-size:clamp(14px,2vw,36px);letter-spacing:.3em;text-indent:.3em;
  color:#eef6fd;
  text-shadow:0 0 22px rgba(205,232,255,.42),0 2px 16px rgba(0,0,0,.5);
}
@media (max-width:760px){
  .sc[data-sc="0"] .brand-wordmark{letter-spacing:.1em;text-indent:.1em;}
}
.sc[data-sc="1"] .inner{left:min(7vw,90px);top:50%;transform:translateY(-50%);max-width:560px;}
.sc[data-sc="2"] .inner{left:50%;top:52%;transform:translate(-50%,-50%);text-align:center;width:min(980px,92vw);}
.sc[data-sc="3"] .inner{left:min(7vw,90px);bottom:15vh;max-width:620px;}
.sc[data-sc="4"] .inner{right:min(7vw,90px);top:50%;transform:translateY(-50%);text-align:right;max-width:580px;}
.sc[data-sc="4"] .rows .row{justify-content:flex-end;}
.sc[data-sc="5"] .inner{left:min(7vw,90px);top:21vh;max-width:640px;}
.sc[data-sc="6"] .inner{right:min(7vw,90px);bottom:15vh;text-align:right;max-width:600px;}
.sc[data-sc="6"] .rows .row{justify-content:flex-end;}
.sc[data-sc="7"] .inner{left:min(7vw,90px);top:50%;transform:translateY(-50%);max-width:620px;}
.sc[data-sc="8"] .inner{left:50%;bottom:13vh;transform:translateX(-50%);text-align:center;width:min(880px,90vw);}
.sc[data-sc="9"] .inner{left:min(7vw,90px);top:22vh;max-width:640px;}
.sc[data-sc="10"] .inner{left:50%;bottom:13vh;transform:translateX(-50%);text-align:center;width:min(1060px,92vw);}
.sc[data-sc="10"] .sub{margin-left:auto;margin-right:auto;}
.sc[data-sc="11"] .inner{left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:min(900px,92vw);}
.sc[data-sc="11"] .cta{margin-top:30px;}
.sc[data-sc="12"] .inner{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.sc[data-sc="12"] .corp{
  margin-top:26px;font-size:9.5px;letter-spacing:.45em;text-indent:.45em;
  text-transform:uppercase;color:var(--neon);opacity:.85;line-height:2.4;
}
.sc .rows .row{display:flex;}

/* glassmorphism veils — flawless legibility over intense glow (doc spec) */
.sc--glass .veil{
  background:rgba(2,11,19,.26);
  -webkit-backdrop-filter:blur(22px) saturate(1.08);
  backdrop-filter:blur(22px) saturate(1.08);
  border:1px solid rgba(180,210,230,.10);
  border-radius:22px;
  padding:46px clamp(34px,4.6vw,68px);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.6);
}
@supports not (backdrop-filter:blur(14px)){
  .sc--glass .veil{background:rgba(2,11,19,.74);}
}

/* mix-blend legibility option (doc spec) — applied to the ghost strip layer */
#strip{mix-blend-mode:difference;}
@supports not (mix-blend-mode:difference){
  #strip .name{opacity:.6;}
}

/* -------------------------------------------------------------------- HUD -- */
#hud-hint{
  position:fixed;left:min(4.5vw,56px);bottom:6.5vh;z-index:26;display:flex;align-items:center;gap:16px;
  font-size:9px;font-weight:400;letter-spacing:.5em;text-transform:uppercase;
  color:var(--ice-85);transition:color .8s;
}
#hud-hint .pulse{width:5px;height:5px;border-radius:50%;background:var(--glow);animation:pulse 2.4s ease infinite;}
@keyframes pulse{0%,100%{transform:scale(.6);opacity:.4}50%{transform:scale(1.1);opacity:1}}
body.light-hud #hud-hint{color:var(--deep);}
#hud-cue{
  position:fixed;right:min(4.5vw,56px);bottom:5.8vh;z-index:26;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(244,246,248,.4);display:flex;align-items:center;justify-content:center;
  color:var(--ice-85);transition:color .8s,border-color .8s;
}
#hud-cue svg{animation:chev 2.2s ease infinite;}
@keyframes chev{0%,100%{transform:translateY(-2px);opacity:.45}50%{transform:translateY(3px);opacity:1}}
body.light-hud #hud-cue{color:var(--blue);border-color:rgba(41,100,142,.45);}
#hud-rail{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:26;display:flex;flex-direction:column;gap:15px;}
#hud-rail i{
  width:4px;height:4px;border-radius:50%;background:rgba(244,246,248,.3);
  transition:transform .5s,background .5s;cursor:pointer;pointer-events:auto;
}
#hud-rail i.on{transform:scale(1.9);background:var(--glow);}
body.light-hud #hud-rail i{background:rgba(41,100,142,.35);}
body.light-hud #hud-rail i.on{background:var(--blue);}
#hud-count{
  position:fixed;left:min(4.5vw,56px);bottom:11.5vh;z-index:26;
  font-size:9.5px;letter-spacing:.4em;color:rgba(244,246,248,.5);transition:color .8s;
}
body.light-hud #hud-count{color:rgba(6,23,43,.55);}

#snd{
  position:fixed;right:min(4.5vw,56px);bottom:13vh;z-index:26;background:none;border:0;cursor:pointer;
  font-family:var(--font);font-size:8.5px;letter-spacing:.4em;color:rgba(244,246,248,.6);
  text-transform:uppercase;display:flex;align-items:center;gap:10px;padding:6px 0;transition:color .8s;
}
#snd .eq{display:flex;align-items:flex-end;gap:2.5px;height:10px;}
#snd .eq i{width:2px;background:currentColor;height:3px;transition:height .3s;}
#snd.on .eq i{animation:eq 1s ease infinite alternate;}
#snd.on .eq i:nth-child(2){animation-delay:.2s}
#snd.on .eq i:nth-child(3){animation-delay:.45s}
@keyframes eq{from{height:3px}to{height:10px}}
body.light-hud #snd{color:rgba(6,23,43,.6);}

/* ---------------------------------------------------------------- cursor -- */
#cursor{
  position:fixed;left:0;top:0;z-index:55;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(244,246,248,.55);pointer-events:none;
  transform:translate(-50%,-50%);transition:width .35s,height .35s,border-color .5s,opacity .4s;
  opacity:0;
}
#cursor::after{
  content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;
  background:rgba(244,246,248,.9);transform:translate(-50%,-50%);
}
#cursor.hot{width:54px;height:54px;}
body.light-hud #cursor{border-color:rgba(41,100,142,.6);}
body.light-hud #cursor::after{background:rgba(41,100,142,.9);}

/* ------------------------------------------------------- after-journey page */
#post{
  position:relative;z-index:30;background:var(--void);
  border-top:1px solid rgba(41,100,142,.25);
  padding:13vh min(54px,6vw) 8vh;
}
#post .lede{
  font-size:clamp(24px,2.4vw,44px);font-weight:300;letter-spacing:.45em;
  text-transform:uppercase;color:var(--ice);line-height:1.85;max-width:26em;
}
#post .direction{
  margin-top:26px;font-size:10px;letter-spacing:.4em;line-height:2.5;text-transform:uppercase;
  color:rgba(111,196,232,.7);
}
#post .note{
  margin-top:7vh;font-size:10.5px;letter-spacing:.3em;line-height:2.5;text-transform:uppercase;
  color:rgba(244,246,248,.5);max-width:80ch;
}
#post .sectors{
  margin-top:9vh;border-top:1px solid rgba(41,100,142,.25);padding-top:26px;
  font-size:10px;letter-spacing:.3em;line-height:2.6;text-transform:uppercase;
  color:rgba(111,210,255,.55);max-width:100ch;
}
#post footer{
  margin-top:11vh;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(41,100,142,.25);padding-top:28px;
  font-size:8.5px;letter-spacing:.34em;text-transform:uppercase;color:rgba(244,246,248,.4);line-height:2.4;
}
#post footer .r{display:flex;align-items:center;gap:14px;color:rgba(244,246,248,.7);font-size:10px;letter-spacing:.4em;}
#post footer .r svg{width:26px;height:26px;}

/* --------------------------------------------------------------- boot error */
#boot-error{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;
  max-width:min(740px,92vw);background:#1A0E12;color:#FFD9DD;border:1px solid #6E3540;
  border-radius:8px;padding:14px 20px;font-size:11px;line-height:1.8;letter-spacing:.06em;display:none;
}
#boot-error.show{display:block;}

/* -------------------------------------------------------------- responsive */
@media (max-width:1060px){
  #nav .links a.nl:nth-child(n+4){display:none;}
}
@media (max-width:760px){
  #nav{height:62px;}
  #nav .links{display:none;}
  .sc h1,.sc h2{letter-spacing:.3em;line-height:1.6;}
  .sc[data-sc="0"] h1{letter-spacing:.42em;text-indent:.42em;}
  .sc[data-sc="1"] .inner,.sc[data-sc="3"] .inner,.sc[data-sc="5"] .inner{left:6vw;right:6vw;max-width:none;}
  .sc[data-sc="4"] .inner{left:6vw;right:6vw;text-align:left;transform:none;top:auto;bottom:15vh;max-width:none;}
  #strip .name{letter-spacing:.28em;}
  #hud-count,#hud-rail{display:none;}
  #cursor{display:none;}
}

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  #preloader .ring,#hud-hint .pulse,#hud-cue svg,#snd.on .eq i{animation:none;}
  *{transition-duration:.01ms !important;}
}


/* ------------------------------------------- brand copy micro-layers -- */
.sc .hero-line{
  margin-top:26px;font-size:clamp(9px,0.7vw,13px);letter-spacing:.5em;text-indent:.5em;
  text-transform:uppercase;color:var(--glow);opacity:.9;
}
.sc .global-line{
  margin-top:22px;font-size:9px;letter-spacing:.45em;text-indent:.45em;
  text-transform:uppercase;color:rgba(244,246,248,.5);
}
.sc .whisper{
  margin-top:20px;font-size:9.5px;font-weight:300;letter-spacing:.3em;line-height:2.4;
  text-transform:uppercase;opacity:.62;max-width:58ch;
}
.sc--slate .whisper{color:rgba(6,23,43,.7);}

/* --------------------------------------------------------- CTA buttons -- */
.cta{
  display:inline-block;padding:15px 38px;border:1px solid rgba(111,210,255,.45);
  border-radius:60px;font-size:10px;font-weight:400;letter-spacing:.42em;text-indent:.42em;
  text-transform:uppercase;color:var(--ice);text-decoration:none;cursor:pointer;
  background:rgba(2,11,19,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color .4s,box-shadow .4s,background .4s,transform .4s;
}
.cta:hover,.cta:focus-visible{
  border-color:rgba(180,215,235,.85);box-shadow:0 14px 40px -16px rgba(0,0,0,.55);
  background:rgba(10,30,45,.42);transform:translateY(-2px);outline:none;
}
.cta--solid{background:rgba(41,100,142,.5);border-color:rgba(111,210,255,.7);}
.sc[data-sc="0"] .hero-cta{margin-top:42px;}
.ctas{display:flex;gap:22px;flex-wrap:wrap;margin-top:8vh;}

/* ------------------------------- MARVIX DIGITAL ECOSYSTEM portal grid -- */
#ecosystem{margin-top:13vh;border-top:1px solid rgba(41,100,142,.25);padding-top:9vh;}
#ecosystem .eco-label{
  font-size:clamp(9px,0.7vw,13px);letter-spacing:.6em;text-indent:.6em;text-transform:uppercase;
  color:var(--neon);opacity:.85;margin-bottom:26px;
}
#ecosystem .eco-title{
  font-weight:200;font-size:clamp(32px,2.8vw,56px);letter-spacing:.32em;line-height:1.7;
  text-transform:uppercase;color:var(--ice);margin-bottom:8vh;
  text-shadow:0 0 18px rgba(41,100,142,.14);
}
.portals{display:flex;flex-direction:column;gap:16px;perspective:1200px;}
.portal{
  position:relative;display:flex;align-items:baseline;gap:clamp(16px,3vw,44px);
  padding:clamp(18px,2.6vw,34px) clamp(20px,3.4vw,48px);
  border:1px solid rgba(111,210,255,.2);border-radius:16px;
  background:rgba(4,16,26,.46);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  text-decoration:none;color:var(--ice);
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .5s,background .4s;
}
.portal .pno{
  font-size:10px;letter-spacing:.3em;color:rgba(111,210,255,.6);min-width:2.6em;
}
.portal .pname{
  font-weight:200;font-size:clamp(26px,4vw,78px);letter-spacing:.18em;
  text-transform:uppercase;line-height:1.15;flex:1;
  transition:color .4s,text-shadow .4s;
}
.portal .purl{
  font-size:clamp(9px,0.8vw,12px);letter-spacing:.22em;color:rgba(111,210,255,.55);
  white-space:nowrap;
}
.portal::after{
  content:'→';position:absolute;right:clamp(18px,2.6vw,36px);top:50%;
  transform:translateY(-50%) translateX(-8px);opacity:0;color:var(--neon);
  font-size:clamp(18px,2vw,30px);transition:opacity .4s,transform .4s;
}
.portal:hover,.portal:focus-visible{
  transform:rotateX(4deg) rotateY(-3deg) translateY(-4px);
  border-color:var(--neon);
  background:rgba(0,36,54,.5);
  box-shadow:0 18px 60px rgba(0,234,255,.14),0 0 0 1px rgba(0,234,255,.18) inset;
  outline:none;
}
.portal:hover .pname,.portal:focus-visible .pname{
  color:#fff;text-shadow:0 0 24px rgba(0,234,255,.4);
}
.portal:hover::after,.portal:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0);}
.portal:focus-visible{box-shadow:0 0 0 2px var(--neon),0 18px 60px rgba(0,234,255,.14);}
.portal--election{border-color:rgba(122,60,255,.4);}
.portal--election:hover,.portal--election:focus-visible{border-color:var(--plasma);box-shadow:0 18px 60px rgba(122,60,255,.18);}
.portal--election .purl{color:rgba(168,128,255,.7);}

/* ------------------------------------------- evolution + creed + foot -- */
#post .evolution{
  margin:9vh 0 0;font-size:10.5px;letter-spacing:.3em;line-height:2.6;text-transform:uppercase;
  color:rgba(244,246,248,.55);
}
#post .evolution i{font-style:normal;color:var(--neon);opacity:.7;margin:0 .6em;}
#post .evolution b{font-weight:400;color:var(--ice);text-shadow:0 0 18px rgba(41,100,142,.3);}
#post .creed{
  margin-top:8vh;font-size:10px;letter-spacing:.26em;line-height:2.8;text-transform:uppercase;
  color:rgba(244,246,248,.42);max-width:104ch;
}
#post .foot-links{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 22px;}
#post .foot-links a{
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(111,210,255,.55);
  text-decoration:none;transition:color .3s;
}
#post .foot-links a:hover,#post .foot-links a:focus-visible{color:var(--neon);outline:none;}
@media (prefers-reduced-motion: reduce){
  .portal,.portal:hover,.portal:focus-visible{transform:none;}
}
@media (max-width:760px){
  .portal{flex-direction:column;gap:8px;}
  .portal .purl{white-space:normal;}
}

.hero-creed{font-weight:300;text-transform:uppercase;letter-spacing:.42em;font-size:clamp(9px,.95vw,12px);opacity:.62;margin-top:16px;}
.hero-creed--dim{opacity:.42;font-size:clamp(8px,.8vw,10.5px);margin-top:8px;}

/* ============================================================================
   ROUND-6 · CINEMATIC EVOLUTION LAYER — Dragon Era ⇄ Electronic / Cyberpunk
   particle overlay · world-shift vortex · era typography · premium UI
   ============================================================================ */

/* ---- #fx : always-on 2D-canvas particle field (ash/embers → data photons).
   Sits above the WebGL render, below the film grain so the grade unifies it. ---- */
#fx{position:fixed;inset:0;width:100%;height:100svh;z-index:6;pointer-events:none;
  display:block;will-change:transform;}

/* ---- #worldshift : the Dragon→Electronic transition — a slow volumetric colour
   vortex + drifting fog that surges as the world morphs. JS drives its opacity. ---- */
#worldshift{position:fixed;inset:0;z-index:7;pointer-events:none;opacity:0;
  mix-blend-mode:screen;overflow:hidden;transition:opacity .25s linear;}
#worldshift i{position:absolute;inset:-40%;will-change:transform;
  background:
    radial-gradient(circle at 50% 56%, rgba(255,150,70,.20), transparent 38%),
    radial-gradient(circle at 50% 46%, rgba(0,200,255,.18), transparent 44%),
    conic-gradient(from 0deg at 50% 50%,
      rgba(122,60,255,.12), rgba(0,234,255,.10), rgba(255,140,60,.13),
      rgba(122,60,255,.10), rgba(122,60,255,.12));
  filter:blur(46px);animation:wsSpin 22s linear infinite;}
@keyframes wsSpin{to{transform:rotate(360deg);}}
body.worldshifting #cinegrade{filter:saturate(1.2);}

/* ---- era-driven TYPOGRAPHY shift : ancient high-contrast serif in the Dragon
   era, sleek techno-sans once the Electronic world takes over. Toggled by JS. ---- */
body.era-dragon .sc h1,
body.era-dragon .sc h2{font-family:'Cinzel',Georgia,'Times New Roman',serif;font-weight:600;}
body.era-dragon #strip .name{font-family:'Cinzel',Georgia,serif;font-weight:600;}
body.era-dragon .sc .label{font-family:'Cinzel',Georgia,serif;letter-spacing:.5em;}
body.era-electronic .sc h1,
body.era-electronic .sc h2{font-family:'Rajdhani',var(--font);font-weight:600;}
body.era-electronic #strip .name{font-family:'Rajdhani',var(--font);font-weight:600;letter-spacing:.3em;}
body.era-electronic #nav .brand,
body.era-electronic #nav a.nl,
body.era-electronic #menu-overlay a{font-family:'Rajdhani',var(--font);}

/* ---- premium NAV micro-interactions : a soft organic dust-glow blooms behind the
   link on hover (ember in the dragon era, cyan in the electronic era), plus a
   micro cyberpunk glitch once we cross into the electronic world. ---- */
#nav a.nl{overflow:visible;}
#nav a.nl::before{
  content:"";position:absolute;left:50%;top:46%;width:54px;height:54px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.35);opacity:0;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(0,234,255,.30),transparent 68%);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);}
#nav a.nl:hover::before{opacity:1;transform:translate(-50%,-50%) scale(1);}
#nav a.nl:hover{text-shadow:0 0 16px rgba(0,234,255,.55);}
body.era-dragon #nav a.nl::before{background:radial-gradient(circle,rgba(255,150,70,.32),transparent 68%);}
body.era-dragon #nav a.nl:hover{text-shadow:0 0 16px rgba(255,160,80,.6);}
body.era-electronic #nav a.nl:hover{animation:cyGlitch .5s steps(2,end) 1;}
@keyframes cyGlitch{
  0%{text-shadow:0 0 16px rgba(0,234,255,.55);}
  25%{text-shadow:-2px 0 rgba(255,30,110,.85),2px 0 rgba(0,234,255,.85);}
  50%{text-shadow:2px 0 rgba(122,60,255,.85),-2px 0 rgba(0,234,255,.7);}
  75%{text-shadow:-1px 0 rgba(0,234,255,.8),1px 0 rgba(255,30,110,.6);}
  100%{text-shadow:0 0 16px rgba(0,234,255,.55);}}
/* frosted-glass header for a luxury dashboard read */
#nav{-webkit-backdrop-filter:blur(7px) saturate(1.1);backdrop-filter:blur(7px) saturate(1.1);}

/* ---- premium MENU overlay : tactile hover — letters lift, glow, and emit a soft
   dust halo; electronic era adds the same micro-glitch signature. ---- */
#menu-overlay{background:
  radial-gradient(120% 90% at 50% 30%,rgba(0,40,60,.30),transparent 60%),
  rgba(2,11,19,.94);}
#menu-overlay a{position:relative;display:inline-block;
  transition:color .4s,letter-spacing .5s cubic-bezier(.2,.7,.2,1),text-shadow .4s,transform .5s;}
#menu-overlay a::before{
  content:"";position:absolute;left:50%;top:50%;width:120%;height:200%;border-radius:50%;
  transform:translate(-50%,-50%) scale(.5);opacity:0;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse,rgba(0,234,255,.16),transparent 70%);
  transition:opacity .5s,transform .55s;}
#menu-overlay a:hover{color:var(--ice);letter-spacing:.5em;text-indent:.5em;
  text-shadow:0 0 26px rgba(0,234,255,.5);transform:translateY(-2px);}
#menu-overlay a:hover::before{opacity:1;transform:translate(-50%,-50%) scale(1);}
body.era-dragon #menu-overlay a::before{background:radial-gradient(ellipse,rgba(255,150,70,.16),transparent 70%);}
body.era-dragon #menu-overlay a:hover{text-shadow:0 0 26px rgba(255,160,80,.5);}
body.era-electronic #menu-overlay a:hover{animation:cyGlitch .55s steps(2,end) 1;}

/* ---- CTA + cursor pick up the active era colour so the whole UI breathes with
   the journey from organic fire to electric light. ---- */
body.era-dragon .cta:hover,body.era-dragon .cta:focus-visible{
  border-color:rgba(255,170,90,.8);
  box-shadow:0 0 30px rgba(255,150,70,.24),0 14px 40px -16px rgba(0,0,0,.55);}
body.era-electronic .cta:hover,body.era-electronic .cta:focus-visible{
  border-color:rgba(0,234,255,.85);
  box-shadow:0 0 30px rgba(0,234,255,.26),0 14px 40px -16px rgba(0,0,0,.55);}
body.era-dragon #cursor{border-color:rgba(255,170,90,.6);box-shadow:0 0 16px rgba(255,150,70,.30);}
body.era-dragon #cursor::after{background:rgba(255,196,120,.95);}
body.era-electronic #cursor{border-color:rgba(0,234,255,.7);box-shadow:0 0 18px rgba(0,234,255,.35);}
body.era-electronic #cursor::after{background:rgba(120,225,255,.95);}

@media (prefers-reduced-motion:reduce){
  #worldshift i{animation:none;}
  #nav a.nl:hover,#menu-overlay a:hover{animation:none;}
}

/* ============== debug HUD — per-frame read-back overlay ===================== */
#buildstamp{
  display:none !important;   /* hidden per request — build bar no longer shown on the site */
  position:fixed; left:50%; top:84px; transform:translateX(-50%); z-index:2147483647;
  font:800 18px/1.3 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color:#8effa0; background:rgba(2,11,19,.96);
  padding:11px 22px; border:2px solid rgba(0,234,255,.9); border-radius:10px;
  letter-spacing:.04em; pointer-events:none; white-space:nowrap;
  text-shadow:0 0 8px rgba(0,234,255,.6); box-shadow:0 0 24px rgba(0,234,255,.45);
  text-align:center;
}
#dbg{
  display:none !important;
  position:fixed; top:8px; left:8px; z-index:99999;
  font:600 11px/1.4 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color:#9ffcff; background:rgba(2,11,19,.72);
  padding:6px 9px; border:1px solid rgba(0,234,255,.35); border-radius:6px;
  letter-spacing:.02em; white-space:pre; pointer-events:none;
  text-shadow:0 0 6px rgba(0,234,255,.4); max-width:96vw; overflow:hidden;
}