/* ============================================================
   theme.css — variables, base, cursor, sonar, nav, header,
   footer, top button, modal, scrollbars
   (Preserved from original SIELSIC identity)
   ============================================================ */
:root{
  --neon:#4cc9ff;
  --green:#00ff9d;
  --red:#ff4466;
  --bg:#030303;
  --card-bg:rgba(0,10,20,0.75);
  --card-hover:rgba(0,20,40,0.92);
  /* System stacks only — the site must render with zero network font fetches.
     Named faces stay first so the original look is kept on machines that have
     them installed locally; everyone else gets the nearest system equivalent. */
  --font-mono: ui-monospace, 'Cascadia Mono', 'JetBrains Mono', 'Roboto Mono', Consolas, 'SF Mono', Menlo, monospace;
  --font-display: 'Syncopate', 'Arial Black', 'Segoe UI Semibold', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
.stat-box,.danger-card,.legal-box,.sec-card,.gloss-item,.stat-bar-box,.sim-terminal,.sim-scene,.hud-item,.sim-feedback,.news-card-item,.news-error,.modal-content,.sim-btn,.moreBtn,.gbtn2,.news-refresh,.sim-restart,.sim-next,.nav button,.news-link,.badge,.danger-tag,.legal-source-link,.danger-more{border-radius:16px !important;}
html{scroll-behavior:smooth;}
body{
  background:#030303;
  background-image:url("../assets/images/background.svg?v=524b8108a9bf");
  background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;
  color:white;font-family:var(--font-mono);overflow-x:hidden;
}
#sonar{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;opacity:.38;pointer-events:none;}
.cursor{position:fixed;width:12px;height:12px;border-radius:50%;background:var(--neon);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .08s,opacity .2s;mix-blend-mode:screen;}
.cursor-ring{position:fixed;width:36px;height:36px;border-radius:50%;border:1px solid rgba(76,201,255,.5);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:all .18s ease;mix-blend-mode:screen;}
body:hover .cursor{opacity:1;}
body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px);pointer-events:none;z-index:1;animation:scanMove 8s linear infinite;}
@keyframes scanMove{0%{background-position:0 0;}100%{background-position:0 100px;}}
body::after{content:'';position:fixed;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--neon),transparent);opacity:0;pointer-events:none;z-index:2;animation:glitchLine 6s ease-in-out infinite;}
@keyframes glitchLine{0%,90%,100%{opacity:0;top:-10px;}92%{opacity:.6;top:20%;}94%{opacity:0;top:20%;}96%{opacity:.4;top:60%;}98%{opacity:0;top:60%;}}
nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(0,0,0,.85);border-bottom:1px solid rgba(0,255,157,.2);display:flex;justify-content:space-between;align-items:center;height:64px;padding:0 30px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
nav::after{content:'';position:absolute;bottom:-1px;left:0;height:1px;width:0;background:var(--neon);animation:navLine 3s ease forwards 1s;}
@keyframes navLine{to{width:100%;}}
.logo{font-size:1.5rem;font-weight:800;letter-spacing:3px;color:white;position:relative;}
.logo span{color:var(--green);}
.logo::before{content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:translateY(-50%) scale(1);}50%{opacity:.4;transform:translateY(-50%) scale(1.6);}}
.nav-buttons{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
nav button{background:transparent;border:1px solid rgba(76,201,255,.4);color:rgba(76,201,255,.8);padding:9px 20px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.15em;cursor:pointer;transition:all .25s;text-transform:uppercase;position:relative;overflow:hidden;border-radius:16px;}
nav button::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(76,201,255,.15),transparent);transition:left .4s;}
nav button:hover::before{left:100%;}
nav button:hover{background:rgba(76,201,255,.12);border-color:var(--neon);color:var(--neon);box-shadow:0 0 20px rgba(76,201,255,.2),inset 0 0 20px rgba(76,201,255,.05);}
header{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:64px;position:relative;}
.header-badge{font-size:.65rem;letter-spacing:.4em;color:rgba(76,201,255,.6);border:1px solid rgba(76,201,255,.2);padding:6px 20px;margin-bottom:30px;opacity:0;animation:fadeUp .8s ease forwards .3s;text-transform:uppercase;}
h1{font-family:var(--font-display);font-size:clamp(2.2rem,5.5vw,5rem);line-height:1.05;margin-bottom:16px;opacity:0;animation:fadeUp .9s ease forwards .6s;position:relative;}
.h1-line1{display:block;background:linear-gradient(135deg,#fff 0%,var(--neon) 60%,var(--green) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 30px rgba(76,201,255,.3));}
.h1-line2{display:block;background:linear-gradient(135deg,var(--neon) 0%,#fff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.sub{letter-spacing:5px;color:rgba(76,201,255,.7);font-size:.8rem;margin-top:8px;opacity:0;animation:fadeUp .8s ease forwards .9s;}
.header-stats{display:flex;gap:40px;margin-top:50px;opacity:0;animation:fadeUp .8s ease forwards 1.2s;}
.hstat{text-align:center;}
.hstat-num{font-size:1.8rem;font-weight:800;color:var(--neon);text-shadow:0 0 20px var(--neon);}
.hstat-label{font-size:.6rem;letter-spacing:.2em;color:#666;margin-top:4px;}
.scroll-hint{margin-top:50px;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;animation:fadeUp .8s ease forwards 1.5s;font-size:.65rem;letter-spacing:.3em;color:rgba(76,201,255,.5);}
.scroll-arrow{width:24px;height:38px;border:1px solid rgba(76,201,255,.3);border-radius:12px;position:relative;margin-bottom:6px;}
.scroll-arrow::after{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:3px;height:8px;border-radius:2px;background:var(--neon);animation:scrollDot 1.8s ease-in-out infinite;}
@keyframes scrollDot{0%{top:6px;opacity:1;}100%{top:22px;opacity:0;}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
.modal{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.93);justify-content:center;align-items:center;padding:20px;}
.modal.active{display:flex;}
.modal-content{background:#000;padding:40px;border:1px solid var(--neon);width:min(800px,90vw);max-height:85vh;overflow-y:auto;line-height:1.8;color:#fff;font-family:var(--font-mono);font-size:.88rem;box-shadow:0 0 50px rgba(76,201,255,.2),0 0 100px rgba(76,201,255,.05),inset 0 0 30px rgba(76,201,255,.03);animation:modalIn .3s cubic-bezier(.34,1.56,.64,1);scrollbar-width:thin;scrollbar-color:var(--neon) #111;position:relative;}
.modal-content::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--neon),transparent);}
.modal-content::-webkit-scrollbar{width:3px;}
.modal-content::-webkit-scrollbar-track{background:#0a0a0a;}
.modal-content::-webkit-scrollbar-thumb{background:var(--neon);}
@keyframes modalIn{from{transform:scale(.85) translateY(20px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
.modal-close-anim{animation:modalOut .25s ease forwards;}
@keyframes modalOut{to{transform:scale(.85) translateY(20px);opacity:0;}}
.close{float:right;font-size:26px;cursor:pointer;color:rgba(76,201,255,.7);line-height:1;margin-bottom:12px;transition:color .2s,transform .2s;}
.close:hover{color:#fff;transform:rotate(90deg);}
body.modal-open{overflow:hidden;}
#modalText h3{color:var(--neon);font-size:.95rem;letter-spacing:.1em;margin:18px 0 7px;text-transform:uppercase;}
#modalText p{color:#bbb;margin:0 0 10px;font-size:.83rem;line-height:1.8;}
#modalText .highlight{color:var(--neon);background:rgba(76,201,255,.06);padding:10px 14px;border-left:2px solid var(--neon);display:block;margin:12px 0;font-size:.8rem;line-height:1.6;}
#modalText .source{color:#444;font-size:.7rem;margin-top:6px;}
.cursor-blink::after{content:"█";animation:blink 1s infinite;color:var(--neon);}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}
#topBtn{position:fixed;bottom:36px;right:36px;width:52px;height:52px;border-radius:50%;border:1px solid var(--neon);font-size:20px;cursor:pointer;background:rgba(0,10,20,.9);color:var(--neon);box-shadow:0 0 20px rgba(76,201,255,.3);display:none;z-index:500;transition:transform .2s,box-shadow .2s;}
#topBtn:hover{transform:scale(1.1);box-shadow:0 0 35px rgba(76,201,255,.5);}

/* SIELSIC floating brand chip.
   Bottom-LEFT on purpose: #topBtn already owns bottom-right (z-index 500).
   z-index 600 keeps it above page content but below nav (1000), the modal
   (2000) and the custom cursor (9999), so it never intercepts those.
   Dismissible and remembered in localStorage, so it can be turned off
   permanently without touching the rest of the UI. */
.sielsic-float{
  position:fixed;
  left:calc(20px + env(safe-area-inset-left,0px));
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  z-index:600;
  width:196px;
  border-radius:14px;
  overflow:hidden;
  line-height:0;
  background:#00162B;                 /* matches the artwork's own backdrop */
  border:1px solid rgba(76,201,255,.22);
  box-shadow:0 8px 28px rgba(0,0,0,.55), 0 0 22px rgba(76,201,255,.14);
  opacity:0;
  transform:translateY(14px);
  pointer-events:none;
  transition:opacity .5s ease, transform .5s ease, box-shadow .3s ease, border-color .3s ease;
}
.sielsic-float.is-visible{opacity:1;transform:none;pointer-events:auto;}
.sielsic-float.is-dismissed{display:none;}
.sielsic-float a{display:block;line-height:0;}
.sielsic-float img{display:block;width:100%;height:auto;}
.sielsic-float:hover{
  border-color:rgba(0,255,157,.45);
  box-shadow:0 10px 32px rgba(0,0,0,.6), 0 0 30px rgba(0,255,157,.22);
}
.sielsic-float a:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:13px;}
.sielsic-float__close{
  position:absolute;top:0;right:0;
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-bottom-left-radius:10px;
  cursor:pointer;line-height:1;
  background:rgba(0,0,0,.62);color:#cfe9ff;font-size:15px;
  opacity:0;
  transition:opacity .25s ease, background .2s ease, color .2s ease;
}
.sielsic-float:hover .sielsic-float__close{opacity:1;}
.sielsic-float__close:hover{background:rgba(0,255,157,.9);color:#001018;}
.sielsic-float__close:focus-visible{opacity:1;outline:2px solid var(--green);outline-offset:-2px;}
@media (hover:none){.sielsic-float__close{opacity:1;}}   /* touch has no hover */
@media (max-width:640px){
  .sielsic-float{width:132px;left:calc(12px + env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));}
  .sielsic-float__close{opacity:1;width:24px;height:24px;font-size:14px;}
}
@media (prefers-reduced-motion:reduce){
  .sielsic-float,.sielsic-float__close{transition:none;transform:none;}
}
footer{text-align:center;padding:60px 20px;color:#2a2a2a;font-size:.7rem;letter-spacing:.2em;border-top:1px solid rgba(76,201,255,.06);position:relative;}
footer::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--neon),transparent);}

/* Secondary link under the hero eyebrow. Replaces what used to be an inline
   style, so the markup stays semantic and the look lives with the rest of
   the theme. */
.header-link{margin-top:10px;font-size:.75rem;letter-spacing:.15em;}
.header-link a{color:#4cc9ff;text-decoration:none;border-bottom:1px dashed rgba(76,201,255,.4);transition:color .2s,border-color .2s;}
.header-link a:hover{color:var(--green);border-bottom-color:var(--green);}
.header-link a:focus-visible{outline:2px solid var(--green);outline-offset:3px;}

/* Video wrappers in modals */
.video-wrapper{margin-top:24px;margin-bottom:16px;}
.video-wrapper h4{font-size:.7rem;letter-spacing:.1em;color:var(--neon);margin-bottom:10px;}
.video-container{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:1px solid rgba(76,201,255,.2);background:#000;}
.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.video-caption{font-size:.6rem;color:#6a8794;margin-top:8px;text-align:center;}
.video-caption a{color:#4cc9ff;}
.video-caption a:hover{color:var(--green);}
@media (max-width:640px){
  .video-container{aspect-ratio:16/9;}
}