html,body{ background:#050605; }
  body{ -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  ::selection{ background:#47D45A; color:#050605; }
  ::-webkit-scrollbar{ width:9px; } ::-webkit-scrollbar-track{ background:#050605; }
  ::-webkit-scrollbar-thumb{ background:#1c241c; border-radius:9px; border:2px solid #050605; }
  ::-webkit-scrollbar-thumb:hover{ background:#2c382c; }

  .serif-it{ font-family:"Instrument Serif",serif; font-style:italic; font-weight:400; letter-spacing:-.01em; }

  /* grain */
  .grain::after{ content:''; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.045;
    background-image:url('../assets/grain.svg'); }
  /* vignette to frame every scene cinematically */
  .vignette::before{ content:''; position:fixed; inset:0; z-index:40; pointer-events:none;
    box-shadow:inset 0 0 220px 60px rgba(0,0,0,.7); }

  #scrollbar{ position:fixed; top:0; left:0; height:2px; width:0; z-index:60; background:linear-gradient(90deg,#47D45A,#7CF496); box-shadow:0 0 14px rgba(71,212,90,.7); }

  .gridbg{ background-image:linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px); background-size:78px 78px; }
  .dotgrid{ background-image:radial-gradient(rgba(71,212,90,.25) 1px,transparent 1px); background-size:15px 15px; }
  .glow{ background:radial-gradient(circle, rgba(71,212,90,.22), transparent 65%); }

  .wave-acid{ background:linear-gradient(90deg,rgba(71,212,90,0) 0%,#47D45A 30%,#7CF496 70%,rgba(71,212,90,0) 100%);
    -webkit-mask:url('../assets/wave.png') center/contain no-repeat; mask:url('../assets/wave.png') center/contain no-repeat; }
  .ico-acid{ filter:brightness(0) saturate(100%) invert(64%) sepia(58%) saturate(540%) hue-rotate(80deg) brightness(95%) contrast(90%); }
  .logo-wm{ filter:brightness(0) invert(1); }

  .text-grad{ background:linear-gradient(180deg,#ffffff 0%,#a9b6a9 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .acid-sheen{ background:linear-gradient(100deg,#47D45A 0%,#d6ffe0 46%,#47D45A 60%); background-size:230% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sheen 7s ease-in-out infinite; }
  @keyframes sheen{ 0%,100%{background-position:0 0} 50%{background-position:100% 0} }

  /* cinematic reveal */
  .reveal{ opacity:0; transform:translateY(34px); filter:blur(8px); transition:opacity 1s cubic-bezier(.16,.84,.3,1), transform 1s cubic-bezier(.16,.84,.3,1), filter 1s ease; }
  .reveal.in{ opacity:1; transform:none; filter:blur(0); }
  .reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
  .reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }

  .lux{ position:relative; overflow:hidden; transition:border-color .5s, transform .5s cubic-bezier(.16,.84,.3,1); }
  .lux::before{ content:''; position:absolute; inset:0; opacity:0; transition:opacity .5s; pointer-events:none;
    background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(71,212,90,.12), transparent 60%); }
  .lux:hover::before{ opacity:1; } .lux:hover{ transform:translateY(-3px); }

  @keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
  .mq{ animation:marquee 60s linear infinite; } .mq.slow{ animation-duration:90s; } .mq.rev{ animation-direction:reverse; }
  .mq-mask{ -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
  .logo-mq:hover .mq{ animation-play-state:paused; }

  @keyframes flow{ 0%{background-position:0 -22px} 100%{background-position:0 22px} }
  .flowline{ width:1px; background:repeating-linear-gradient(180deg,#47D45A 0 6px,transparent 6px 16px); animation:flow 1.1s linear infinite; }

  /* abstraction-layer sticky scene (transforms set by JS) */
  .chip{ position:absolute; left:50%; top:50%; will-change:transform,opacity; }
  .chip-inner{ display:block; animation:floaty 5s ease-in-out infinite; }
  @keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }

  /* per-slide auto-fit: scales content to the viewport, preserving layout */
  [data-fit]{ transform-origin:center center; transition:transform .45s cubic-bezier(.16,.84,.3,1); will-change:transform; }

  [x-cloak]{ display:none !important; }