/* "How This Site Is Built" page: visuals. Layout: templates/built.php. Choreography: public/assets/js/about-fx.js
   (shared generic engine — sets --p 0..1 on [data-r3d]/[data-hero]; everything else is declarative CSS below).
   Without JS, with reduced motion, or before html.ab-live is set, every section shows its final, fully readable state. */

/* ---------- Hero: dark blueprint ---------- */
.built-hero{position:relative;isolation:isolate;overflow:clip;min-height:min(100svh,50rem);display:grid;align-items:center;
  padding-block:7rem 5rem;color-scheme:dark;color:var(--ink);background:#0e1014}
.built-grid{position:absolute;inset:0;z-index:-1;opacity:.3;
  background-image:linear-gradient(#ffffff16 1px,transparent 1px),linear-gradient(90deg,#ffffff16 1px,transparent 1px);background-size:48px 48px;
  mask-image:radial-gradient(60% 60% at 50% 38%,#000 35%,transparent 85%)}
.built-glow{position:absolute;inset:-10%;z-index:-1;
  background:radial-gradient(45% 40% at 72% 28%,rgba(255,138,61,.35),transparent 70%),radial-gradient(35% 35% at 12% 88%,rgba(255,138,61,.16),transparent 70%)}
.built-hero-inner{max-width:min(90%,64rem);margin-inline:auto;text-align:center}
.built-hero .kicker{justify-content:center;display:flex}
.built-hero h1{margin:.5rem 0 1.1rem;font-size:clamp(2.2rem,1.1rem + 4vw,4rem);line-height:1.05}
.built-hero .lede{max-width:50rem;margin-inline:auto;color:var(--muted);font-size:1.2rem}
.built-cue{display:inline-flex;gap:.6rem;margin-top:2rem;font:500 .95rem var(--f-ui);text-decoration:none;color:var(--muted)}
.built-cue span{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .built-grid{animation:built-pan 26s linear infinite}
  @keyframes built-pan{to{background-position:48px 48px}}
  .built-cue span{animation:built-bob 1.6s ease-in-out infinite}
  @keyframes built-bob{50%{translate:0 .35rem}}
}

/* ---------- Stat row ---------- */
.built-stat-row{display:grid;gap:1.5rem;text-align:center;list-style:none;margin:0;padding:0}
@media (min-width:48em){.built-stat-row{grid-template-columns:repeat(4,1fr)}}
.built-stat-row li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;position:relative;overflow:clip}
.built-stat-row li::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 60% at 50% -10%,color-mix(in srgb,var(--orange) 16%,transparent),transparent 70%)}
.built-stat-row strong{display:block;font:800 clamp(2.3rem,1.4rem + 3.2vw,3.4rem)/1 var(--f-h1);background:linear-gradient(145deg,var(--orange),color-mix(in srgb,var(--orange) 55%,var(--ink)));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.built-stat-row span{display:block;margin-top:.3rem;font:500 .88rem/1.4 var(--f-ui);color:var(--muted)}

/* ---------- Prose sections: narrow, centered reading column ---------- */
.built-prose{max-width:46rem;margin-inline:auto}
.built-prose h2{font-size:clamp(1.6rem,1.1rem + 1.8vw,2.2rem);margin-bottom:.4em}
.built-operator{position:relative}

/* Section 1: "No Template..." — struck-through chip row, what was deliberately left out */
.built-not-list{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.5rem;padding:0}
.built-not-list li{padding:.4rem .9rem;border-radius:99px;box-shadow:var(--press);font:500 .85rem var(--f-ui);color:var(--muted)}
.built-not-list s{text-decoration-color:var(--orange)}

/* Section 2: "Native CSS, Not a Framework" — real native-CSS feature badges, monospace */
.built-code-row{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.5rem;padding:0}
.built-code-row code{display:inline-block;padding:.4rem .8rem;border-radius:.6rem;box-shadow:var(--raise);font:500 .85rem/1 ui-monospace,Menlo,Consolas,monospace;color:var(--orange)}

/* Section 3: "An Operator-Steered Build" — opening line as a large pull-quote */
.built-quote{margin:1.25rem 0 1.5rem;padding:1.1rem 1.4rem;border-radius:1.2rem;border-left:4px solid var(--deco);box-shadow:var(--raise);background:var(--surface)}
.built-quote p{margin:0;font:600 1.3rem/1.45 var(--f-body);color:var(--ink)}

/* Section 4: "What That Actually Buys You" — boxed in a glass panel with a closing checklist */
.built-buys{padding:clamp(1.75rem,4vw,3rem);text-align:left}
.built-buys-list{margin-top:1.5rem}
.built-buys .actions{margin-top:1.75rem}

/* Closing section: "If This Is What I Build for Myself" — wider than the standard reading column */
.built-closing{max-width:min(90%,64rem);text-align:center}
.built-closing h2{font-size:clamp(1.9rem,1.2rem + 2.4vw,2.8rem)}
.built-closing .prose{max-width:none}
.built-closing .prose p{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);line-height:1.6}

/* ---------- Stack layers ---------- */
.built-layers{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.5rem}
@media (min-width:48em){.built-layers{grid-template-columns:repeat(4,1fr)}}
.built-layer{position:relative;display:flex;flex-direction:column;gap:.5rem}
.built-layer-n{font:700 2.4rem/1 var(--f-h2);color:var(--deco)}
.built-layer h3{font-size:1.1rem}
.built-layer p{margin:0;color:var(--muted);font-size:.92rem}

/* ---------- Scroll reveal (reuses about-fx.js's [data-r3d]/--p engine, distinct motion: a gentle rise + fade, no 3D tilt) ---------- */
[data-r3d]{--p:1}
html.ab-live [data-r3d]{will-change:transform,opacity;opacity:calc(.94 + .06 * var(--p));transform:translate3d(0,calc((1 - var(--p)) * 32px),0)}

/* ---------- Page images: a section beside its image (see .pg-split in site.css) ---------- */
.built-operator .built-prose{max-width:none;margin:0}
.built-stack-split{align-items:center}
.built-stack-split .built-layers{margin:0}
@media (min-width:64em){
  .built-stack-split .built-layers{grid-template-columns:1fr}
  .built-stack-split .built-layer{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:center}
  .built-stack-split .built-layer-n{grid-row:1 / span 2}
}