/* ============================================================
   QUILLON — FX layer
   shimmer text · spotlight cards · border beam · grid+aurora
   word-reveal · magnetic buttons · mobile nav
   (premium effects in the 21st.dev vocabulary, brand-tuned)
   ============================================================ */

@property --beam-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

/* ---------- accent word (clean, solid — no shimmer/gold) ---------- */
.shimmer{ color:var(--tick); -webkit-text-fill-color:currentColor; }
.on-ink .shimmer{ color:var(--tick-soft); -webkit-text-fill-color:currentColor; }
@media(prefers-reduced-motion:reduce){ .shimmer{ animation:none; } }

/* soft text glow used sparingly on dark */
.glow-soft{ text-shadow:0 0 26px rgba(143,176,162,.28); }

/* ---------- word reveal (blur-in, staggered) ---------- */
.words{ display:inline; }
.words .wd{ display:inline-block; opacity:0; filter:blur(10px); transform:translateY(.36em); transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); transition-delay:calc(var(--i,0) * 70ms); }
.words .wd.show{ opacity:1; filter:blur(0); transform:none; }
@media(prefers-reduced-motion:reduce){ .words .wd{ opacity:1; filter:none; transform:none; } }

/* ---------- spotlight (cursor-follow glow) ---------- */
.spot{ position:relative; }
.spot::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), var(--spot, rgba(34,80,63,.12)), transparent 62%);
  opacity:0; transition:opacity .45s var(--ease);
}
.spot:hover::before{ opacity:1; }
.spot > *{ position:relative; z-index:1; }
.on-ink .spot::before, .spot.on-ink::before{ --spot:rgba(176,138,78,.16); }

/* ---------- border beam: removed (read as cheap) — refined static instead ---------- */
.beam{ position:relative; }
.beam::after{ content:none; }

/* ---------- background: technical grid ---------- */
[data-navdark]{ position:relative; }
[data-navdark] > *:not(.bg-grid):not(.aurora):not(.ps-stage){ position:relative; z-index:1; }
.bg-grid{ position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--gridc, rgba(26,23,18,.045)) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridc, rgba(26,23,18,.045)) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 80%);
  mask-image:radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 80%);
}
.on-ink .bg-grid, .bg-grid.on-dark{ --gridc:rgba(239,234,224,.05); }

/* ---------- background: aurora (single sober green depth) ---------- */
.aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
[data-aurora]{ overflow:hidden; }
.aurora span{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.32; will-change:transform; }
.aurora .a1{ width:48vw; height:48vw; left:-8vw; top:-12vw; background:radial-gradient(circle, rgba(34,80,63,.55), transparent 70%); animation:drift1 28s ease-in-out infinite; }
.aurora .a2{ width:40vw; height:40vw; right:-6vw; top:8vw; background:radial-gradient(circle, rgba(143,176,162,.34), transparent 70%); animation:drift2 34s ease-in-out infinite; }
.aurora .a3{ width:34vw; height:34vw; left:30vw; bottom:-14vw; background:radial-gradient(circle, rgba(34,80,63,.30), transparent 70%); animation:drift1 40s ease-in-out infinite reverse; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(6vw,4vw) scale(1.12); } }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-5vw,3vw) scale(1.08); } }
@media(prefers-reduced-motion:reduce){ .aurora span{ animation:none; } }

/* ---------- buttons (clean lift — no glossy sheen) ---------- */
.btn{ will-change:transform; }
.btn.mag{ transition:transform .25s var(--ease), box-shadow .5s var(--ease); }

/* ---------- underline-grow link accent already in base; add tick dot pulse ---------- */
.pulse-dot{ position:relative; }
.pulse-dot::after{ content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:var(--tick); right:-12px; top:50%; transform:translateY(-50%); box-shadow:0 0 0 0 var(--tick-glow); animation:pulse 2.6s ease-out infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(34,80,63,.4); } 70%{ box-shadow:0 0 0 10px rgba(34,80,63,0); } 100%{ box-shadow:0 0 0 0 rgba(34,80,63,0); } }

/* ============================================================
   MOBILE NAV
   ============================================================ */
.nav__burger{
  display:none; position:relative; z-index:320;
  width:42px; height:42px; border:1px solid var(--ink-line); border-radius:3px;
  background:transparent; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav.on-dark:not(.scrolled) .nav__burger{ border-color:rgba(239,234,224,.28); }
.nav__burger span{ display:block; width:18px; height:1.6px; background:currentColor; transition:transform .35s var(--ease), opacity .25s; }
body.menu-open .nav__burger span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2){ opacity:0; }
body.menu-open .nav__burger span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

.navmenu{
  position:fixed; inset:0; z-index:300; overflow:hidden;
  background:var(--ink-900); color:var(--on-ink);
  display:flex; flex-direction:column; justify-content:center; gap:.4rem;
  padding:0 2rem; transform:translateY(-100%); opacity:0; pointer-events:none;
  transition:transform .6s var(--ease), opacity .5s var(--ease);
}
body.menu-open .navmenu{ transform:none; opacity:1; pointer-events:auto; }
.navmenu .aurora{ z-index:0; opacity:.5; }
.navmenu a{ position:relative; z-index:2; font-family:var(--font-serif); font-size:clamp(2rem,9vw,3.2rem); color:var(--paper-hi); padding:.32em 0; letter-spacing:-.02em; opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
body.menu-open .navmenu a{ opacity:1; transform:none; }
body.menu-open .navmenu a:nth-child(1){ transition-delay:.12s; }
body.menu-open .navmenu a:nth-child(2){ transition-delay:.18s; }
body.menu-open .navmenu a:nth-child(3){ transition-delay:.24s; }
body.menu-open .navmenu a:nth-child(4){ transition-delay:.30s; }
body.menu-open .navmenu a:nth-child(5){ transition-delay:.36s; }
.navmenu a .mi{ font-family:var(--font-mono); font-size:.8rem; color:var(--tick-soft); margin-right:1rem; letter-spacing:.1em; }
.navmenu__foot{ position:absolute; bottom:2.4rem; left:2rem; right:2rem; z-index:2; font-family:var(--font-mono); font-size:.8rem; color:var(--on-ink-mute); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.navmenu__foot a{ font-size:.8rem; font-family:var(--font-mono); color:var(--tick-soft); opacity:1; transform:none; }

@media(max-width:860px){
  .nav__burger{ display:flex; }
  .nav__cta{ display:none; }
  body.menu-open{ overflow:hidden; }
}
@media(min-width:861px){
  .navmenu{ display:none; }
}