/* keepitlit.ca landing — single sheet.
   All literals live in tokens; rules reference var(). */
:root{
  --bg:#070608;
  /* steady ambient halo */
  --glow-core:rgba(255,198,122,0.42);
  --glow-mid:rgba(255,158,72,0.15);
  --glow-edge:rgba(255,150,60,0.00);
  /* filament flicker core (tight, additive) */
  --fil-core:rgba(255,216,150,0.95);
  --fil-mid:rgba(255,180,100,0.48);
  --fil-edge:rgba(255,170,90,0.00);
  /* cinematic vignette */
  --vig-core:rgba(4,3,5,0.00);
  --vig-mid:rgba(4,3,5,0.34);
  --vig-edge:rgba(3,2,4,0.92);

  /* filament anchor + glow size — set in px by js/stands.js; fallbacks here */
  --fil-x:50%;
  --fil-y:40%;
  --fil-w:130px;
  --fil-h:340px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:var(--bg);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.stage{
  position:fixed;
  inset:0;
  overflow:hidden;
  background:var(--bg);
}

/* 1 — the photo, full-bleed and PERFECTLY STEADY. DOF + bokeh are baked in. */
.bulb{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 46%;
  display:block;
  transform:scale(1.02); /* hide any sub-pixel edge from blur/grain */
}

/* 2 — broad warm halo, centered on the filament. Constant; never flickers. */
.bloom{
  position:absolute;
  left:var(--fil-x);
  top:var(--fil-y);
  width:min(46vw,52vh);
  height:min(46vw,52vh);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    var(--glow-core) 0%,
    var(--glow-mid) 34%,
    var(--glow-edge) 70%);
  filter:blur(12px);
  mix-blend-mode:screen;
  pointer-events:none;
}

/* 3 — THE FLICKER. A tight additive glow pinned to (and sized from) the filament
   coil box — anchor + size both computed by js/stands.js. screen blend
   = it only ADDS light to the coil, so background, glass, stand and wood stay
   rock-steady. `linear` timing keeps each flick fast while the 9s cycle stays slow. */
.filament{
  position:absolute;
  left:var(--fil-x);
  top:var(--fil-y);
  width:var(--fil-w);
  height:var(--fil-h);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,
    var(--fil-core) 0%,
    var(--fil-mid) 46%,
    var(--fil-edge) 78%);
  filter:blur(6px);
  mix-blend-mode:screen;
  pointer-events:none;
  opacity:0.52;
  will-change:opacity;
  animation:flicker-filament 9s linear infinite;
}

/* 4 — dust motes */
#dust{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* 5 — vignette frames the bulb; transparent at the focal point */
.vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(125% 105% at 50% 45%,
    var(--vig-core) 0%,
    var(--vig-core) 36%,
    var(--vig-mid) 72%,
    var(--vig-edge) 100%);
}

/* 6 — faint living film grain for photographic texture */
.grain{
  position:absolute;
  inset:-50%;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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");
  animation:grain-shift 1.1s steps(6) infinite;
}

/* SUBTLE flicker — same fast-flick / slow-9s-cycle character, gentle amplitude.
   long calm holds, brief ~0.1s flicks that only lightly waver around the baseline. */
@keyframes flicker-filament{
  0%    { opacity:0.52; }
  16%   { opacity:0.52; }   /* calm hold */
  17%   { opacity:0.70; }   /* soft flick up */
  18%   { opacity:0.40; }   /* gentle dip */
  19%   { opacity:0.64; }
  20%   { opacity:0.50; }
  21%   { opacity:0.53; }
  40%   { opacity:0.52; }   /* calm hold */
  41%   { opacity:0.38; }   /* small dip */
  42%   { opacity:0.62; }
  43%   { opacity:0.52; }
  62%   { opacity:0.52; }   /* calm hold */
  63%   { opacity:0.70; }   /* soft burst */
  63.7% { opacity:0.44; }
  64.4% { opacity:0.66; }
  65.2% { opacity:0.50; }
  66%   { opacity:0.53; }
  85%   { opacity:0.52; }   /* calm hold */
  86%   { opacity:0.42; }   /* small double */
  87%   { opacity:0.64; }
  88%   { opacity:0.52; }
  100%  { opacity:0.52; }
}
@keyframes grain-shift{
  0%{ transform:translate(0,0); }
  20%{ transform:translate(-4%,2%); }
  40%{ transform:translate(3%,-3%); }
  60%{ transform:translate(-2%,4%); }
  80%{ transform:translate(4%,-2%); }
  100%{ transform:translate(0,0); }
}

/* respect reduced motion — calm, static frame */
@media (prefers-reduced-motion: reduce){
  .filament{ animation:none; opacity:0.52; }
  .grain{ animation:none; }
  .bulb{ transition:none; }
}