/* 3dnegar — design tokens
   Ported verbatim from design_handoff_3dnegar/README.md's "Visual system" table
   and cross-checked against every page's own renderVals() theme block (identical
   values computed independently per page in the source — kept as static CSS here
   since there is no cross-page live sync in the source either, only persistence). */

:root {
  --ink: 255,255,255;
  --fg: #f2f3f6;
  --bg-rgb: 18,18,24;
  --accent1: #4f7dfb;
  --accent2: #8b5cf6;
  --accent1-rgb: 79,124,255;
  --accent2-rgb: 139,92,246;
  --accent3-rgb: 56,189,248;
  --accent3: #ff5340;
  --accent-soft: #8fa4ff;
  --accent-tint: #c9c3ff;
  --page-bg: #07070a;
  --heading-weight: 800;
  /* Shared "wide section" container width -- responsive so pages can go
     genuinely wide on large monitors (up to 1400px) while automatically
     narrowing on smaller viewports to always clear the fixed site-rail's
     collapsed 56px width (see the rail note further down this file). A
     static px value can't do both at once: 100vw-120px keeps >=60px clear
     on each side on any screen, and the 1400px cap is the max width we
     want sections to ever reach. */
  --s3d-wrap-w: min(1400px, calc(100vw - 120px));
}

:root[data-theme="light"] {
  --ink: 20,20,34;
  --fg: #12121c;
  --bg-rgb: 255,255,255;
  --accent1: #3358e6;
  --accent2: #7c3aed;
  --accent1-rgb: 51,88,230;
  --accent2-rgb: 124,58,237;
  --accent3-rgb: 14,165,233;
  --accent3: #d6301f;
  --accent-soft: #3355dd;
  --accent-tint: #5b3fd6;
  --page-bg: #eef0f7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  text-wrap: pretty;
  background: var(--page-bg);
  color: var(--fg);
  transition: background .4s, color .4s;
}
::selection { background: rgba(var(--accent2-rgb), 0.35); }

/* NOTE on the fixed side rail (site-rail, right:0): earlier attempts at
   reserving space for it via body padding (first with a logical property
   that resolved to the wrong side on this RTL page, then corrected to the
   physical side) technically stopped the overlap, but padding on only one
   side of body makes margin:auto centering skew the whole content block
   toward the OTHER edge -- trading "touches the rail" for "hugs the left
   edge instead," not actually fixing the complaint (too little margin,
   content reading as too wide/full-bleed). The real fix is on the content
   side: every section's own max-width is --s3d-wrap-w (defined above),
   min(1600px, 100vw-120px) -- a STATIC px value can't be both "as wide as
   possible on a big monitor" and "never collide with the rail on a small
   one" at the same time, so the width itself is responsive instead: it
   always keeps >=60px SYMMETRIC margin on both true edges (clearing the
   rail's collapsed 56px width) no matter the viewport, while still being
   free to reach the full 1600px cap once the viewport is wide enough to
   afford it. Only on narrower laptops does hovering the rail to its
   expanded 210px briefly overlap the content edge -- an accepted, purely
   cosmetic tradeoff (the rail floats above content, it doesn't reflow it).
   Don't replace --s3d-wrap-w with a fixed px value without re-deriving
   this math for whatever screens matter at the time. */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

a { color: var(--accent-tint); text-decoration: none; }
a:hover { color: var(--fg); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--page-bg); }
::-webkit-scrollbar-thumb { background: rgba(var(--ink), 0.15); border-radius: 6px; }

/* Background treatment -- present on every page */
.bg-dotgrid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background-image: radial-gradient(rgba(var(--ink), 0.14) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.35;
}
.bg-vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--accent1-rgb), 0.10), transparent 65%);
}

/* Scroll progress bar */
.scroll-progress-track {
  position: fixed; top: 0; inset-inline: 0; height: 2.5px; z-index: 51;
  background: rgba(var(--ink), 0.06);
}
.scroll-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
}

/* Keyframes used across pages */
@keyframes fadeUp { from { opacity: 0; transform: translateY(36px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes fadeUpSmall { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
[data-reveal] { animation: fadeUp .9s cubic-bezier(.16,.8,.24,1) both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
[data-reveal-small] { animation: fadeUpSmall .9s cubic-bezier(.16,.8,.24,1) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
/* Browsers without scroll-driven animations (Firefox, Safari <17.4) never advance the
   view() timeline, which would otherwise leave every [data-reveal] section stuck at the
   fadeUp "from" state (opacity:0) forever. Force the visible end state instead. */
@supports not (animation-timeline: view()) {
  [data-reveal], [data-reveal-small] { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}
@keyframes drift1 { 0%,100% { transform: translate(-6%,-4%) scale(1); } 50% { transform: translate(4%,6%) scale(1.15); } }
@keyframes drift2 { 0%,100% { transform: translate(6%,4%) scale(1.1); } 50% { transform: translate(-4%,-6%) scale(1); } }
@keyframes floatObj { 0%,100% { transform: translateY(0) rotateY(-6deg) rotateX(2deg); } 50% { transform: translateY(-18px) rotateY(6deg) rotateX(-2deg); } }
@keyframes shine { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(.85) translateY(30px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blinkCaret { 50% { border-color: transparent; } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dotPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent1-rgb), 0.5); } 50% { box-shadow: 0 0 0 6px rgba(var(--accent1-rgb), 0); } }
/* Hero "scroll to continue" hint -- ported from vapesig's own scroll indicator
   (tailwind.config.ts's scroll-down keyframe): a gradient segment slides down
   a thin track and fades at each end, rather than a static arrow glyph. */
@keyframes s3dScrollDown { 0% { transform: translateY(-100%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(200%); opacity: 0; } }


h1, h2, h3, h4, h5, h6 { line-height: 1.5 !important; letter-spacing: 0 !important; font-family: 'Archivo', 'Vazirmatn', sans-serif !important; }