/* PhopWatch art layer, Phase 2B preview (/art-preview). Spec: DESIGN.md "Surfaces, texture and art".
   Techniques only, nothing copied from any reference site. Tokens live in tokens.css. Animations: transform and opacity only, paused off-screen, off for reduced motion.
   Exception (recorded in research/notes.md): .nav-pill width, one absolutely positioned element with contain. */

/* ---------- scrollbar: native, never hidden, works with Lenis ---------- */
html{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) var(--sb-track)}
@supports not (scrollbar-color:auto){
  ::-webkit-scrollbar{width:12px;height:12px}
  ::-webkit-scrollbar-track{background:var(--sb-track)}
  ::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:999px;border:3px solid var(--sb-track)}
  ::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover)}
}

/* ---------- wide container and 12 column grid ---------- */
.cw{max-width:var(--container-wide);margin:0 auto;padding:0 24px}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.g12>*{grid-column:span 12}
@media (min-width:768px){.g12>.c6{grid-column:span 6}}
@media (min-width:1024px){.g12>.c4{grid-column:span 4}.g12>.c6{grid-column:span 6}.g12>.c8{grid-column:span 8}}
@media (min-width:1280px){.g12{gap:32px}}
.measure{max-width:var(--measure-th)}

/* ---------- section scaffolding ---------- */
.ps{padding:var(--sp-8) 0;position:relative}
.ps h2{font-size:var(--fs-3xl);line-height:var(--lh-display);margin:0 0 var(--sp-3)}
.ps .lead{font-size:var(--fs-lg);color:var(--text-muted);margin:0 0 var(--sp-6)}
.spec{font-size:var(--fs-sm);color:var(--text-muted);margin:var(--sp-4) 0 0}
.opt{display:inline-block;font-size:var(--fs-sm);font-weight:600;margin:0 0 var(--sp-2);color:var(--accent)}
.tag-rec{background:var(--accent);color:var(--on-accent);border-radius:var(--r-pill);padding:2px 10px;margin-left:var(--sp-2);font-size:var(--fs-sm)}
.tag-no{background:var(--surface-3);color:var(--text);border-radius:var(--r-pill);padding:2px 10px;margin-left:var(--sp-2);font-size:var(--fs-sm)}

/* ---------- card surfaces (item 1) ---------- */
.sc{position:relative;isolation:isolate;overflow:hidden;background:var(--surface);border:var(--border-hair);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:var(--card-pad);min-height:240px}
.sc>*{position:relative;z-index:1}
/* grain: pre-rendered 96px tile, 1.9 KB */
.sc.grain::before{content:"";position:absolute;inset:0;z-index:0;background:var(--grain-tile) 0 0/96px 96px;pointer-events:none}
/* the rejected option B: live feTurbulence on the same area, for the benchmark only */
.sc.fe::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .1 0 0 0 0 .09 0 0 0 .5 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* corner glow: on --surface cards only (DESIGN.md contrast rule) */
.sc.glow::after{content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;z-index:0;background:var(--glow-corner);pointer-events:none}
.sc .ghost{position:absolute;z-index:0;right:20px;bottom:-4px;font:700 88px/1 var(--font-sans);color:var(--ghost-num);pointer-events:none;user-select:none}
.sc .ghost::before{content:attr(data-n)}
.sc .t{position:relative;padding-left:14px;font-size:var(--fs-lg);line-height:var(--lh-head);font-weight:600;margin:0 0 var(--sp-3)}
.sc .t::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:3px;border-radius:2px;background:var(--accent)}
.sc p{margin:0 0 var(--sp-4);color:var(--text-muted)}
.pills{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600;line-height:1.4;padding:4px 12px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent)}
/* bigger cards (item 4): padding 24/32/40, title 22, body 18 from 768px */
@media (min-width:768px){.sc.big .t{font-size:var(--fs-xl)}.sc.big p{font-size:var(--fs-lg);max-width:var(--measure-th)}}

/* ---------- pattern, gradient and themed layers (item 2) ---------- */
.lay{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-lg);border:var(--border-hair);background:var(--surface);min-height:220px}
.lay>.cap{position:absolute;left:16px;bottom:16px;z-index:2;background:var(--surface);border:var(--border-hair);border-radius:var(--r-md);padding:8px 14px;font-size:var(--fs-lg);font-weight:600}
.lay-dots{background-image:radial-gradient(color-mix(in srgb,var(--border-input) 40%,transparent) 1.4px,transparent 1.6px);background-size:24px 24px}
.lay-grid{background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px}
.lay-lines{background-image:repeating-linear-gradient(135deg,var(--border) 0 1px,transparent 1px 14px)}
.lay-blobs{background:radial-gradient(closest-side at 18% 20%,rgba(109,91,232,.20),transparent 70%),radial-gradient(closest-side at 85% 85%,rgba(251,191,36,.22),transparent 70%),var(--bg)}
.art-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.art-svg *{fill:none;stroke:var(--art-stroke);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.art-svg .nd{fill:var(--surface);stroke:color-mix(in srgb,var(--border-input) 55%,transparent);stroke-width:1.5}
.divider{display:block;width:100%;height:48px;margin-bottom:-1px}
.divider path{fill:var(--surface-2)}

/* constellation: box with a fixed 2:1 aspect so the pulse dots can use cqw and cqh */
.net{position:relative;container-type:size;aspect-ratio:2/1;width:100%}
.net .pd{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);will-change:translate;z-index:1}
.net .pd.a{animation:pulse-a 7s linear infinite}
.net .pd.b{animation:pulse-b 9s linear infinite;animation-delay:-3s}
@keyframes pulse-a{0.00%{translate:6.000cqw 23.333cqh}19.44%{translate:25.000cqw 29.333cqh}44.63%{translate:45.833cqw 56.667cqh}71.07%{translate:64.167cqw 19.333cqh}100.00%{translate:91.333cqw 37.333cqh}}
@keyframes pulse-b{0.00%{translate:10.000cqw 71.667cqh}36.86%{translate:45.833cqw 56.667cqh}54.84%{translate:55.000cqw 87.333cqh}80.89%{translate:78.333cqw 65.000cqh}100.00%{translate:91.333cqw 37.333cqh}}
.drift{animation:drift 48s ease-in-out infinite alternate}
.drift.slow{animation-duration:64s;animation-direction:alternate-reverse}
@keyframes drift{from{translate:0 0}to{translate:-14px 10px}}
.float{animation:float 6s var(--ease-inout) infinite alternate}
@keyframes float{from{translate:0 0}to{translate:0 -8px}}

/* radar: rings are static SVG, the sweep is a rotating conic wedge (compositor only) */
.radar{position:absolute;right:-60px;top:50%;width:380px;height:380px;margin-top:-190px;border-radius:50%;z-index:0}
.radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 290deg,rgba(59,54,201,.14) 360deg);animation:spin 9s linear infinite;will-change:transform}
.radar svg{position:absolute;inset:0;width:100%;height:100%}
@keyframes spin{to{transform:rotate(360deg)}}

/* heartbeat trace with a compositor-only dot (same path as piecewise translate) */
.hbx{position:relative;container-type:inline-size;height:64px;width:min(100%,520px)}
.hbx svg{width:100%;height:100%;display:block}
.hbx .pd{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);animation:hbx 3.6s linear infinite;will-change:translate}
@keyframes hbx{0.00%{translate:0.000cqw 32px}18.50%{translate:23.077cqw 32px}20.97%{translate:26.154cqw 32px}25.11%{translate:28.462cqw 8px}32.91%{translate:31.538cqw 56px}37.05%{translate:33.846cqw 32px}56.17%{translate:57.692cqw 32px}58.63%{translate:60.769cqw 32px}62.77%{translate:63.077cqw 8px}70.57%{translate:66.154cqw 56px}74.71%{translate:68.462cqw 32px}100.00%{translate:100.000cqw 32px}}

/* pause everything off-screen (IntersectionObserver toggles .is-off) and for reduced motion */
.is-off,.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .drift,.float,.radar .sweep,.net .pd,.hbx .pd,.par{animation:none!important}
  .net .pd{display:none}
  .hbx .pd{translate:100cqw 32px}
}

/* ---------- navigation (item 3) ---------- */
.anav{position:sticky;top:0;z-index:var(--z-nav);height:var(--nav-h);transition:transform var(--dur-slow) var(--ease-glide)}
.anav.is-hidden{transform:translateY(-100%)}
.anav-bar{position:absolute;inset:0;display:block;border-bottom:1px solid transparent;transition:transform var(--dur-base) var(--ease-glide),background-color var(--dur-base) linear,box-shadow var(--dur-base) linear,border-color var(--dur-base) linear,border-radius var(--dur-base) linear}
.anav.is-compact .anav-bar{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));border-bottom-color:var(--border);box-shadow:var(--sh-1);transform:translateY(-6px)}
.anav.is-compact .anav-in{transform:translateY(3px)}
.anav-in{position:relative;z-index:1;display:flex;align-items:center;gap:var(--sp-4);height:100%;transition:transform var(--dur-base) var(--ease-glide)}
.anav .brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text);text-decoration:none}
.anav-nav{margin:0 auto 0 var(--sp-5)}
.anav-links{position:relative;display:flex;gap:var(--sp-1);margin:0;padding:0;list-style:none}
.anav-links a{position:relative;z-index:1;display:block;padding:8px 14px;border-radius:var(--r-pill);text-decoration:none;color:var(--text);font-weight:500}
.anav-links a[aria-current="true"]{font-weight:700;color:var(--accent)}
.nav-pill-li{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.nav-pill{position:absolute;left:0;top:0;height:0;width:0;border-radius:var(--r-pill);background:var(--accent-soft);opacity:0;contain:layout paint;transition:transform var(--dur-base) var(--ease-inout),width var(--dur-base) var(--ease-inout),opacity var(--dur-fast) linear}
.anav-toggle{display:none}
.anav-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;z-index:2;pointer-events:none}
@supports (animation-timeline:scroll()){
  .anav-progress.native{animation:prog linear both;animation-timeline:scroll(root)}
  @keyframes prog{to{transform:scaleX(1)}}
}
@media (max-width:860px){
  .anav-nav{display:contents}
  .anav-toggle{display:inline-flex;margin-left:auto}
  .anav-links{position:absolute;left:0;right:0;top:var(--nav-h);margin:0;flex-direction:column;gap:0;background:var(--surface);border-bottom:1px solid var(--border);padding:var(--sp-2) 24px var(--sp-4);visibility:hidden;opacity:0;transition:opacity var(--dur-base) linear,visibility 0s linear var(--dur-base)}
  .anav-links.open{visibility:visible;opacity:1;transition-delay:0s}
  .anav-links li{opacity:0;translate:0 -8px;transition:opacity var(--dur-base) var(--ease-glide),translate var(--dur-base) var(--ease-glide)}
  .anav-links.open li{opacity:1;translate:0 0;transition-delay:calc(var(--i,0)*55ms + 60ms)}
  .anav-links a{padding:12px 4px;border-radius:var(--r-md)}
  .nav-pill-li{display:none}
  .anav-links a[aria-current="true"]{background:var(--accent-soft)}
  .anav .nav-cta{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .anav,.anav-bar,.anav-in,.nav-pill,.anav-links li{transition:none!important}
  .anav.is-hidden{transform:none}
  .anav-progress.native{animation:none}
}

/* parallax layer, max 40px via --py set by art.js */
.par{translate:0 var(--py,0px)}

/* ---------- signature pieces (item 7) ---------- */
.sig{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-lg);border:var(--border-hair)}
.sig-hero{min-height:420px;display:grid;align-content:center;padding:var(--sp-8) var(--card-pad);background:radial-gradient(closest-side at 15% 20%,rgba(109,91,232,.18),transparent 70%),radial-gradient(closest-side at 90% 90%,rgba(251,191,36,.20),transparent 70%),var(--bg)}
.sig-hero::before{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(color-mix(in srgb,var(--border-input) 40%,transparent) 1.4px,transparent 1.6px);background-size:24px 24px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 80%);mask-image:linear-gradient(90deg,#000,transparent 80%)}
.sig-hero .panel{position:relative;z-index:1;max-width:560px;background:color-mix(in srgb,var(--surface) 92%,transparent);border:var(--border-hair);border-radius:var(--r-lg);padding:var(--sp-5)}
.sig-hero h3{font-size:var(--fs-4xl);line-height:var(--lh-display);margin:0 0 var(--sp-3)}
.sig-hero p{margin:0;font-size:var(--fs-lg);color:var(--text-muted)}
.sig-how{background:var(--surface);padding:var(--sp-7) var(--card-pad)}
.sig-how::before{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:40px 40px;opacity:.6;-webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent)}
.nodes{position:relative;z-index:1;display:grid;gap:var(--sp-5);grid-template-columns:1fr}
.nodes .n{position:relative;background:var(--surface);border:var(--border-hair);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--sh-1)}
.nodes .n b{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:var(--fs-base);margin-bottom:var(--sp-3)}
.nodes .n h4{margin:0 0 var(--sp-2);font-size:var(--fs-xl)}
.nodes .n p{margin:0;font-size:var(--fs-lg);color:var(--text-muted)}
@media (min-width:900px){
  .nodes{grid-template-columns:repeat(3,1fr);gap:var(--sp-7)}
  .nodes::before{content:"";position:absolute;left:12%;right:12%;top:54px;height:0;border-top:2px dashed color-mix(in srgb,var(--border-input) 55%,transparent);z-index:0}
  .nodes .track{position:absolute;left:12%;right:12%;top:54px;height:0;z-index:2;container-type:inline-size}
  .nodes .track i{position:absolute;left:0;top:0;width:10px;height:10px;margin:-6px 0 0 -5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);animation:trk 6s linear infinite;will-change:translate}
  @keyframes trk{from{translate:0 0}to{translate:100cqw 0}}
}
@media (max-width:899px){.nodes .track{display:none}}
@media (prefers-reduced-motion:reduce){.nodes .track i{animation:none}}
.sig-cta{background:var(--surface-2);padding:var(--sp-8) var(--card-pad);text-align:center;border-radius:0 0 var(--r-lg) var(--r-lg);border-top:0}
.sig-cta::before{content:"";position:absolute;inset:0;z-index:0;background:var(--grain-tile) 0 0/96px 96px;pointer-events:none}
.sig-cta>*{position:relative;z-index:1}
.sig-cta h3{font-size:var(--fs-3xl);line-height:var(--lh-display);margin:0 0 var(--sp-3)}
.sig-cta p{margin:0 auto var(--sp-5);font-size:var(--fs-lg);color:var(--text-muted);max-width:var(--measure-th)}
.sig-cta-wrap{border-radius:var(--r-lg);overflow:hidden;border:var(--border-hair)}
.sig-cta-wrap .divider{background:var(--surface)}

/* intro and footer of the preview page */
.ahero{padding:var(--sp-7) 0 var(--sp-5)}
.ahero h1{font-size:var(--fs-4xl);line-height:var(--lh-display);margin:0 0 var(--sp-3)}
.ahero p{font-size:var(--fs-lg);color:var(--text-muted);margin:0}
.kv{display:grid;gap:var(--sp-2);margin:var(--sp-4) 0 0;padding:0;list-style:none;font-size:var(--fs-base)}
.kv li{padding-left:14px;position:relative}
.kv li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.afoot{padding:var(--sp-7) 0;color:var(--text-muted);font-size:var(--fs-sm)}