/* ============================================================
   RAM v2 — six candidate effects, each independently gated.
   Every block is switched by an attribute on <html>:
       data-fx-spotlight | data-fx-bento | data-fx-lightbox
       data-fx-countup   | data-fx-grain | data-fx-reveal
   Delete a block and its js/fx.js counterpart to drop that effect.
   ============================================================ */

/* ---------- 1. SPOTLIGHT CARDS ---------- */
html[data-fx-spotlight="on"] .ram-card{position:relative;overflow:hidden}
html[data-fx-spotlight="on"] .ram-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
    rgba(245,200,0,.13),transparent 62%);
  transition:opacity .28s ease;
}
html[data-fx-spotlight="on"] .ram-card:hover::before{opacity:1}
html[data-fx-spotlight="on"] .ram-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  border:1px solid transparent;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    rgba(245,200,0,.4),transparent 60%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity .28s ease;
}
html[data-fx-spotlight="on"] .ram-card:hover::after{opacity:1}
@media (hover:none){html[data-fx-spotlight="on"] .ram-card::before,
  html[data-fx-spotlight="on"] .ram-card::after{display:none}}

/* ---------- 3. LIGHTBOX ---------- */
html[data-fx-lightbox="on"] .ram-proj img{cursor:zoom-in}
.ram-lb{
  position:fixed;inset:0;z-index:300;display:none;
  background:rgba(8,8,8,.93);
  align-items:center;justify-content:center;padding:clamp(16px,4vw,54px);
}
.ram-lb[open]{display:flex}
.ram-lb__fig{margin:0;max-width:1100px;width:100%;display:flex;flex-direction:column;gap:14px}
.ram-lb__fig img{width:100%;max-height:76vh;object-fit:contain;border:1px solid var(--ram-border-2)}
.ram-lb__cap{display:flex;flex-direction:column;gap:3px}
.ram-lb__cap span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ram-yellow)}
.ram-lb__cap strong{font-size:18px}
.ram-lb__cap em{font-style:normal;font-size:14px;color:var(--ram-muted)}
.ram-lb__x{
  position:absolute;top:18px;right:20px;width:44px;height:44px;
  background:transparent;border:1px solid var(--ram-border-2);color:var(--ram-text);
  font-size:22px;line-height:1;cursor:pointer;border-radius:2px;
}
.ram-lb__x:hover{background:var(--ram-yellow);color:#111;border-color:var(--ram-yellow)}
.ram-lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:60px;background:transparent;border:1px solid var(--ram-border-2);
  color:var(--ram-text);font-size:22px;cursor:pointer;
}
.ram-lb__nav:hover{background:var(--ram-yellow);color:#111;border-color:var(--ram-yellow)}
.ram-lb__nav--prev{left:14px}
.ram-lb__nav--next{right:14px}

/* ---------- 4. COUNT-UP ---------- */
html[data-fx-countup="on"] .ram-stat__v{font-variant-numeric:tabular-nums}

/* ---------- 5. GRAIN + GRADIENT HAIRLINES ----------
   Grain must blend, not just fade: black noise over a #111 ground is
   invisible at any opacity. mix-blend-mode:overlay is what makes it read. */
html[data-fx-grain="on"] body::after{
  content:"";position:fixed;inset:0;z-index:400;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  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='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-fx-grain="on"] .ram-quote{
  border-top:0;position:relative;
}
html[data-fx-grain="on"] .ram-quote::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--ram-yellow),rgba(245,200,0,.05));
}
html[data-fx-grain="on"] .ram-proj{
  background-image:linear-gradient(var(--ram-surface),var(--ram-surface)),
    linear-gradient(135deg,rgba(245,200,0,.62),rgba(245,200,0,.04) 52%);
  background-origin:border-box;background-clip:padding-box,border-box;
  border-color:transparent;
}

/* ---------- 6. STAGGERED SCROLL REVEAL ---------- */
/* Content is visible by default. JS opts elements IN, and a watchdog
   force-reveals everything if the observer never fires (background tab,
   reduced motion, observer unsupported). Nothing is ever stranded hidden. */
/* One curve for the whole site (same as the buttons): fast start, long soft landing.
   24px of travel, not 18 or 60 — small travel reads expensive. */
html[data-fx-reveal="on"] .fx-armed{opacity:0;transform:translateY(24px)}
html[data-fx-reveal="on"] .fx-armed.fx-in{
  opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--fx-delay,0ms);
}
@media (prefers-reduced-motion:reduce){
  html[data-fx-reveal="on"] .fx-armed{opacity:1!important;transform:none!important}
}

/* ---------- DEV PANEL (delete js/fx-panel.js before deploy) ---------- */
.fxp{
  position:fixed;right:14px;bottom:14px;z-index:500;
  background:#0d0d0d;border:1px solid var(--ram-border-2);border-radius:3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:var(--ram-text);width:212px;box-shadow:0 10px 40px rgba(0,0,0,.6);
}
.fxp__hd{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 11px;border-bottom:1px solid var(--ram-border);
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-size:10px;color:var(--ram-yellow);
  cursor:pointer;user-select:none;
}
.fxp__body{padding:7px 11px 11px;display:flex;flex-direction:column;gap:1px}
.fxp.is-min .fxp__body,.fxp.is-min .fxp__foot{display:none}
.fxp label{display:flex;align-items:center;gap:8px;padding:5px 0;cursor:pointer}
.fxp input{accent-color:var(--ram-yellow);width:14px;height:14px;cursor:pointer;margin:0}
.fxp__foot{padding:0 11px 11px;display:flex;gap:6px}
.fxp__foot button{
  flex:1;background:transparent;border:1px solid var(--ram-border-2);color:var(--ram-muted);
  font-family:inherit;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:6px;cursor:pointer;border-radius:2px;
}
.fxp__foot button:hover{border-color:var(--ram-yellow);color:var(--ram-yellow)}
@media (max-width:760px){.fxp{right:8px;bottom:70px;width:184px}}