/* ForgeFront FX kit: shared by the homepage and every shell page.
   Custom cursor, magnetic buttons, tilt + spotlight cards, line reveals,
   grain, ember canvases. Everything degrades: no JS = static page, and
   prefers-reduced-motion turns every animation off. */

/* ── cursor ─────────────────────────────────────────────────────────── */
@media (hover:hover) and (pointer:fine) {
  html.ff-cursor, html.ff-cursor a, html.ff-cursor button, html.ff-cursor label { cursor: none }
  #ffc { position:fixed; left:0; top:0; z-index:9999; pointer-events:none; mix-blend-mode:difference }
  #ffc .d { position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; background:#fff;
    transition: transform .25s cubic-bezier(.2,.8,.2,1) }
  #ffc .r { position:absolute; left:-20px; top:-20px; width:40px; height:40px; border-radius:50%;
    border:1.5px solid rgba(255,255,255,.85); transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s, border-color .3s }
  #ffc .l { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.6); opacity:0;
    font:700 11px/1 'JetBrains Mono',monospace; letter-spacing:.18em; color:#fff; white-space:nowrap;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s }
  #ffc.hov .r { transform:scale(1.6); border-color:rgba(255,255,255,.5) }
  #ffc.hov .d { transform:scale(.5) }
  #ffc.lab .r { transform:scale(2.4); border-color:transparent; background:rgba(255,255,255,.95) }
  #ffc.lab .d { transform:scale(0) }
  #ffc.lab .l { opacity:1; transform:translate(-50%,-50%) scale(1); color:#000; mix-blend-mode:normal }
  #ffc.down .r { transform:scale(.8) }
  #ffc.hide { opacity:0 }
}
#ffc { display:none }
html.ff-cursor #ffc { display:block }

/* ── grain + vignette ───────────────────────────────────────────────── */
.ff-grain { position:fixed; inset:-10%; z-index:98; pointer-events:none; opacity:.22; mix-blend-mode:overlay;
  background-image: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='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: ffgrain 1.2s steps(4) infinite }
@keyframes ffgrain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(1%,3%)} }

/* ── reveals ────────────────────────────────────────────────────────── */
.ff-rv { opacity:0; transform:translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1) }
.ff-rv.on { opacity:1; transform:none }
.ff-rv[data-d="1"]{transition-delay:.08s}.ff-rv[data-d="2"]{transition-delay:.16s}.ff-rv[data-d="3"]{transition-delay:.24s}
.ff-rv[data-d="4"]{transition-delay:.32s}.ff-rv[data-d="5"]{transition-delay:.4s}.ff-rv[data-d="6"]{transition-delay:.48s}
/* word-by-word headline: JS wraps each word in <span class=w><i>word</i></span> */
.ff-words .w { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em }
.ff-words .w i { display:inline-block; font-style:inherit; transform:translateY(110%) rotate(3deg); transition: transform 1s cubic-bezier(.2,.8,.2,1) }
.ff-words.on .w i { transform:none }
/* glowing underline that writes itself */
.ff-line { position:relative }
.ff-line::after { content:""; position:absolute; left:0; bottom:-10px; height:2px; width:100%;
  background:linear-gradient(90deg,var(--accent,#FF6B2B),transparent); transform:scaleX(0); transform-origin:left;
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1) .2s }
.ff-line.on::after { transform:scaleX(1) }
html.nojs .ff-rv, html.nojs .ff-words .w i { opacity:1; transform:none }

/* ── tilt + spotlight + sheen (cards, screens) ───────────────────────── */
.ff-tilt { --mx:50%; --my:50%; --rx:0deg; --ry:0deg; transform-style:preserve-3d;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .15s ease-out; will-change:transform }
.ff-tilt.rest { transition: transform .8s cubic-bezier(.2,.8,.2,1) }
.ff-spot { position:relative; isolation:isolate }
.ff-spot::before { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .4s;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(255,255,255,.16), transparent 60%) }
.ff-spot::after { content:""; position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity .4s; mix-blend-mode:soft-light;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, rgba(255,210,150,.6) 50%, rgba(255,255,255,.55) 55%, transparent 70%);
  background-size:250% 250%; background-position: calc(var(--mx) * 1.4) calc(var(--my) * 1.4) }
.ff-spot:hover::before, .ff-spot:hover::after { opacity:1 }
/* conic "running light" border */
.ff-ring { position:relative }
.ff-ring::before { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .4s;
  background: conic-gradient(from var(--ang,0deg), transparent 0 70%, var(--accent,#FF6B2B) 85%, #fff 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude }
.ff-ring:hover::before { opacity:1; animation: ffring 2.2s linear infinite }
@property --ang { syntax:'<angle>'; initial-value:0deg; inherits:false }
@keyframes ffring { to { --ang:360deg } }

/* ── magnetic buttons ───────────────────────────────────────────────── */
.ff-mag { display:inline-flex; will-change:transform; transition: transform .35s cubic-bezier(.2,.8,.2,1) }
.ff-mag > * { pointer-events:none }

/* ── ember canvas (section backgrounds) ─────────────────────────────── */
.ff-embers { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:.9 }

/* ── reading progress (chapter pages) ───────────────────────────────── */
#ffprog { position:fixed; left:0; top:0; height:2px; width:100%; z-index:120; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent,#FF6B2B),#FFD37A); box-shadow:0 0 12px var(--accent,#FF6B2B) }

/* ── page transition veil ───────────────────────────────────────────── */
#ffveil { position:fixed; inset:0; z-index:200; pointer-events:none; background:#050508; opacity:0; transition:opacity .35s ease }
#ffveil.on { opacity:1; pointer-events:auto }

/* ── ignition intro (homepage, once per session) ────────────────────── */
#ffign[hidden] { display:none }
#ffign { position:fixed; inset:0; z-index:300; background:#050508; display:grid; place-items:center; transition: opacity .6s ease, visibility .6s }
#ffign.off { opacity:0; visibility:hidden }
#ffign img { width:min(62vw,440px); height:auto; opacity:0; transform:scale(.94); filter:brightness(2.2) blur(8px); animation: ffignin 1s cubic-bezier(.2,.7,.2,1) .05s forwards }
@keyframes ffignin { 60% { opacity:1; filter:brightness(1.25) blur(0) } to { opacity:1; transform:scale(1); filter:brightness(1) blur(0) } }
#ffign svg { width:min(28vw,180px); color:#FFB300; overflow:visible }
#ffign path, #ffign circle, #ffign polygon { fill:none; stroke:currentColor; stroke-width:2; stroke-dasharray:420; stroke-dashoffset:420;
  animation: ffdraw 1.1s cubic-bezier(.4,0,.2,1) forwards }
#ffign circle:nth-child(3){ animation-delay:.35s }
#ffign .word { position:absolute; bottom:18vh; font:800 clamp(11px,1.2vw,14px)/1 'JetBrains Mono',monospace; letter-spacing:.5em; color:#F2EFE8; opacity:0; animation: ffup .8s ease .6s forwards }
@keyframes ffdraw { to { stroke-dashoffset:0 } }
@keyframes ffup { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

@media (prefers-reduced-motion: reduce) {
  .ff-rv, .ff-words .w i { opacity:1 !important; transform:none !important; transition:none !important }
  .ff-grain, .ff-ring::before { animation:none !important }
  .ff-tilt { transform:none !important }
  #ffign { display:none }
}