/* ═══════════════════════════════════════════════════════════════
   VISUAL SYSTEM — collage · motion · illustration · colour
   Loads AFTER core.css. Everything decorative lives here.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. SECTION COLOUR THEMING
   Put data-accent="pink" on any element and every
   accent-coloured thing inside it re-themes.
   ───────────────────────────────────────────── */
/* light (default) — chosen so white text on the fill always passes AA */
[data-accent="orange"] { --accent:#ff3b00; --accent-2:#e03400; --accent-deep:#c62c00; --accent-wash:rgba(255,59,0,.12);  --accent-ink:#fff; }
[data-accent="acid"]   { --accent:#5f7a00; --accent-2:#4d6300; --accent-deep:#4d6300; --accent-wash:rgba(212,255,0,.30); --accent-ink:#fff; }
[data-accent="green"]  { --accent:#00a862; --accent-2:#00874e; --accent-deep:#00874e; --accent-wash:rgba(0,168,98,.13);  --accent-ink:#fff; }
[data-accent="blue"]   { --accent:#1668d8; --accent-2:#1254b0; --accent-deep:#1254b0; --accent-wash:rgba(22,104,216,.11);--accent-ink:#fff; }
[data-accent="pink"]   { --accent:#e6007e; --accent-2:#c00069; --accent-deep:#c00069; --accent-wash:rgba(230,0,126,.11); --accent-ink:#fff; }
[data-accent="violet"] { --accent:#7038d8; --accent-2:#5c2cb4; --accent-deep:#5c2cb4; --accent-wash:rgba(112,56,216,.11);--accent-ink:#fff; }
[data-accent="amber"]  { --accent:#b57d00; --accent-2:#946600; --accent-deep:#946600; --accent-wash:rgba(240,165,0,.18); --accent-ink:#fff; }

/* dark — brighter, ink flips to near-black on the fill */
[data-theme="dark"] [data-accent="orange"] { --accent:#ff5a2c; --accent-deep:#ff8a66; --accent-ink:#14130f; }
[data-theme="dark"] [data-accent="acid"]   { --accent:#d4ff00; --accent-deep:#c2e800; --accent-ink:#0f0f11; --accent-wash:rgba(212,255,0,.16); }
[data-theme="dark"] [data-accent="green"]  { --accent:#35d99a; --accent-deep:#35d99a; --accent-ink:#04140c; }
[data-theme="dark"] [data-accent="blue"]   { --accent:#6fa4ff; --accent-deep:#6fa4ff; --accent-ink:#041020; }
[data-theme="dark"] [data-accent="pink"]   { --accent:#ff62b5; --accent-deep:#ff62b5; --accent-ink:#1a0410; }
[data-theme="dark"] [data-accent="violet"] { --accent:#b18cff; --accent-deep:#b18cff; --accent-ink:#100620; }
[data-theme="dark"] [data-accent="amber"]  { --accent:#ffc247; --accent-deep:#ffc247; --accent-ink:#1a1200; }

/* colour swatch dot */
.dotc { width:11px; height:11px; display:inline-block; background:var(--accent); flex-shrink:0; }

/* ─────────────────────────────────────────────
   2. TEXTURE — film grain over the whole page
   ───────────────────────────────────────────── */
.grain::after {
  content:''; position:fixed; inset:-50%; z-index:1; pointer-events:none;
  opacity:.07; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 8s steps(6) infinite;
}
@keyframes grainShift {
  0%,100%{transform:translate(0,0)}      16%{transform:translate(-3%,-4%)}
  33%{transform:translate(2%,3%)}        50%{transform:translate(-2%,4%)}
  66%{transform:translate(3%,-2%)}       83%{transform:translate(-4%,2%)}
}
[data-theme="dark"] .grain::after { opacity:.16; mix-blend-mode:overlay; }
@media (prefers-reduced-motion:reduce){ .grain::after{ animation:none } }

/* ─────────────────────────────────────────────
   3. BACKDROPS — orbs, grids, rays
   ───────────────────────────────────────────── */
.bg-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.bg-layer + * { position:relative; z-index:2; }

.orb {
  position:absolute; border-radius:50%; filter:blur(80px);
  opacity:.32; will-change:transform;
}
[data-theme="dark"] .orb { opacity:.5; filter:blur(70px); }
.orb.o1 { width:min(46vw,540px); aspect-ratio:1; background:var(--accent);  top:-14%; left:-9%;  animation:drift1 22s ease-in-out infinite; }
.orb.o2 { width:min(38vw,440px); aspect-ratio:1; background:#4d9dff;        top:24%;  right:-11%; animation:drift2 27s ease-in-out infinite; }
.orb.o3 { width:min(30vw,360px); aspect-ratio:1; background:#d4ff00; opacity:.3; bottom:-14%; left:34%; animation:drift3 31s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(9%,13%) scale(1.14)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-13%,9%) scale(.88)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(7%,-11%) scale(1.2)} }
@media (prefers-reduced-motion:reduce){ .orb{ animation:none } }

/* graph-paper grid */
.gridbg {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right,  var(--line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
}
.gridbg.dense { background-size:22px 22px; }

/* diagonal warning stripes */
.stripes {
  background-image:repeating-linear-gradient(45deg,
    var(--accent) 0 10px, transparent 10px 20px);
  opacity:.85;
}

/* ─────────────────────────────────────────────
   4. COLLAGE — tilt, tape, stamps, marker, doodles
   ───────────────────────────────────────────── */
.tilt-l  { transform:rotate(-2deg); }
.tilt-r  { transform:rotate(2deg); }
.tilt-l2 { transform:rotate(-3.5deg); }
.tilt-r2 { transform:rotate(3.5deg); }
.tilt-l:hover, .tilt-r:hover, .tilt-l2:hover, .tilt-r2:hover { transform:rotate(0deg) scale(1.02); }
.tilt-l, .tilt-r, .tilt-l2, .tilt-r2 { transition:transform .3s var(--snap); }

/* tape strip across a corner */
.taped { position:relative; }
.taped::before {
  content:''; position:absolute; top:-13px; left:50%; z-index:5;
  width:112px; height:27px; transform:translateX(-50%) rotate(-2.5deg);
  background:var(--accent-wash);
  border-left:2px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-right:2px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  backdrop-filter:blur(2px);
}
.taped.corner::before { left:16px; top:-11px; transform:rotate(-32deg); width:88px; }

/* stamp badge */
.stamp {
  position:absolute; z-index:6; display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; background:var(--accent); color:var(--accent-ink);
  border:var(--bw) solid var(--border); box-shadow:var(--hard-sm);
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  transform:rotate(-4deg);
}
.stamp.tr { top:-14px; right:-12px; }
.stamp.tl { top:-14px; left:-12px;  transform:rotate(4deg); }
.stamp.br { bottom:-14px; right:-12px; transform:rotate(3deg); }

/* highlighter swipe behind text */
.marker {
  position:relative; display:inline; z-index:0; padding:0 .1em;
  background-image:linear-gradient(104deg,
    transparent .5%, var(--accent-wash) 2%, var(--accent-wash) 97%, transparent 99%);
  background-size:100% 62%; background-position:0 88%; background-repeat:no-repeat;
}
.marker.solid { background-image:none; background:var(--accent); color:var(--accent-ink); padding:.04em .18em; }

/* rough circle around a word */
.circled { position:relative; display:inline-block; padding:.1em .3em; }
.circled::after {
  content:''; position:absolute; inset:-24% -12%;
  border:2.5px solid var(--accent); border-radius:50%;
  transform:rotate(-2deg) scaleX(1.04);
  clip-path:polygon(0 8%,100% 0,100% 92%,0 100%);
}

/* hand-drawn underline squiggle */
.squiggle { position:relative; }
.squiggle::after {
  content:''; position:absolute; left:0; right:0; bottom:-.22em; height:.28em;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q30 2 58 7 T116 6 T174 8 198 4' fill='none' stroke='%23ff3b00' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* doodle arrow (rotate with --rot) */
.doodle {
  width:74px; height:56px; color:var(--accent); flex-shrink:0;
  transform:rotate(var(--rot,0deg));
}
.doodle path { stroke:currentColor; stroke-width:3.2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* draw-on-scroll for any svg path */
.draw path { stroke-dasharray:var(--len,1400); stroke-dashoffset:var(--len,1400); }
.draw.in path { animation:drawIn 1.5s var(--ease) forwards; }
@keyframes drawIn { to { stroke-dashoffset:0 } }
@media (prefers-reduced-motion:reduce){ .draw path{ stroke-dashoffset:0 } }

/* ─────────────────────────────────────────────
   5. PHOTO SLOTS
   <figure class="ph" style="--ar:4/5">
     <img src="..." alt="..." onerror="phFail(this)">
     <figcaption>filename.jpg · 1200×1500 · what to shoot</figcaption>
   </figure>
   ───────────────────────────────────────────── */
.ph {
  position:relative; aspect-ratio:var(--ar,4/5); overflow:hidden;
  border:var(--bw) solid var(--border); border-radius:var(--r);
  background:var(--bg-2); margin:0;
}
.ph img { width:100%; height:100%; object-fit:cover; display:block; }
.ph figcaption { display:none; }

/* empty state — deliberately styled, never looks broken */
.ph.empty img { display:none; }
.ph.empty {
  border-style:dashed; border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:
    repeating-linear-gradient(45deg,
      var(--accent-wash) 0 12px, transparent 12px 24px),
    var(--bg-2);
}
.ph.empty figcaption {
  display:flex; position:absolute; inset:0; flex-direction:column;
  align-items:center; justify-content:center; gap:9px; padding:22px; text-align:center;
  font-family:var(--mono); font-size:.7rem; line-height:1.6; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.ph.empty figcaption::before {
  content:'📷'; font-size:1.9rem; filter:grayscale(1) opacity(.75);
}
.ph.empty figcaption b { color:var(--accent); font-size:.76rem; letter-spacing:.1em; }
.ph.empty figcaption i { font-style:normal; color:var(--ink-4); font-size:.66rem; max-width:26ch; }

/* photo frames */
.ph.polaroid { border-width:0; padding:12px 12px 46px; background:var(--ink); border-radius:2px; box-shadow:var(--hard); }
.ph.polaroid img, .ph.polaroid.empty { border-radius:0; }
.ph.duo img { filter:grayscale(1) contrast(1.15); transition:filter .35s var(--ease); }
.ph.duo:hover img { filter:none; }

/* ─────────────────────────────────────────────
   6. MOTION & HOVER
   ───────────────────────────────────────────── */
.glow { transition:transform .2s var(--ease), box-shadow .3s var(--ease); }
.glow:hover { transform:translateY(-4px); box-shadow:0 0 0 var(--bw) var(--accent), 0 18px 44px var(--accent-wash); }

.lift { transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.lift:hover { transform:translate(-4px,-4px); box-shadow:7px 7px 0 var(--accent); }

/* parallax — JS sets --py */
.par { transform:translateY(var(--py,0px)); will-change:transform; }

/* staggered reveal that also scales/rotates in */
.rv.pop      { transform:translateY(22px) scale(.97); }
.rv.pop.in   { transform:none; }
.rv.slide-l  { transform:translateX(-34px); }
.rv.slide-r  { transform:translateX(34px); }
.rv.slide-l.in, .rv.slide-r.in { transform:none; }

/* number that counts up, oversized */
.bignum {
  font-family:var(--display); line-height:.82; letter-spacing:-.05em;
  font-size:clamp(3rem,9vw,7.5rem); color:var(--accent);
  -webkit-text-stroke:0; display:block;
}
.bignum.outline { color:transparent; -webkit-text-stroke:2.5px var(--accent); }

/* ticker row of pills */
.pillrow { display:flex; gap:10px; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.pillrow .track { display:flex; gap:10px; animation:slide 40s linear infinite; }
.pillrow span {
  border:var(--bw) solid var(--line); border-radius:100px; padding:8px 16px;
  font-size:.8rem; font-weight:700; white-space:nowrap; color:var(--ink-2);
}
.pillrow span.hot { border-color:var(--accent); color:var(--accent); }
@media (prefers-reduced-motion:reduce){ .pillrow .track{ animation:none } }

/* ─────────────────────────────────────────────
   7. VISUAL CONTENT BLOCKS
   ───────────────────────────────────────────── */

/* colour-coded section header with a big number */
.vhead { display:flex; align-items:flex-start; gap:clamp(16px,2.6vw,30px); }
.vhead .vn {
  font-family:var(--display); font-size:clamp(2.6rem,6.5vw,5rem); line-height:.78;
  color:transparent; -webkit-text-stroke:2.5px var(--accent); flex-shrink:0;
}
.vhead .vt h2 { font-family:var(--display); text-transform:uppercase; }

/* bento grid */
.bento { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.bento > * { grid-column:span 2; }
.bento .w1 { grid-column:span 1; }
.bento .w2 { grid-column:span 2; }
.bento .w3 { grid-column:span 3; }
.bento .w4 { grid-column:span 4; }
.bento .h2r { grid-row:span 2; }
@media (max-width:900px){ .bento{ grid-template-columns:repeat(2,1fr) } .bento .w3,.bento .w4{ grid-column:span 2 } }
@media (max-width:560px){ .bento{ grid-template-columns:1fr } .bento > *{ grid-column:span 1 !important } }

/* card with a coloured top bar */
.ccard {
  position:relative; background:var(--card); border:var(--bw) solid var(--border);
  border-radius:var(--r); padding:clamp(20px,2.6vw,28px); overflow:hidden;
  display:flex; flex-direction:column;
}
.ccard::before { content:''; position:absolute; inset:0 0 auto 0; height:6px; background:var(--accent); }
.ccard .cico {
  width:52px; height:52px; display:grid; place-items:center; font-size:1.5rem;
  border:var(--bw) solid var(--border); border-radius:var(--r-sm);
  background:var(--accent-wash); margin-bottom:16px;
}
.ccard h3 { font-family:var(--display); text-transform:uppercase; font-size:clamp(1.1rem,2.2vw,1.4rem); }
.ccard p { color:var(--ink-3); font-size:.9rem; line-height:1.56; margin-top:11px; flex:1; }
.ccard .cgo { margin-top:18px; font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); }

/* stat block with progress ring or bar */
.statbig { border:var(--bw) solid var(--border); border-radius:var(--r); padding:clamp(18px,2.4vw,26px); background:var(--card); }
.statbig .sv { font-family:var(--display); font-size:clamp(2rem,4.6vw,3.4rem); line-height:.85; letter-spacing:-.04em; color:var(--accent); }
.statbig .sl { font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:12px; }
.statbig .sbar { height:7px; background:var(--bg-3); margin-top:14px; overflow:hidden; }
.statbig .sbar i { display:block; height:100%; background:var(--accent); width:0; transition:width 1.2s var(--ease); }

/* quote card with big mark */
.qcard { position:relative; border:var(--bw) solid var(--border); border-radius:var(--r); padding:clamp(24px,3.4vw,40px); background:var(--card); overflow:hidden; }
.qcard::before {
  content:'"'; position:absolute; top:-42px; right:8px; font-family:var(--display);
  font-size:14rem; line-height:1; color:var(--accent); opacity:.12;
}
.qcard p { font-family:var(--display); text-transform:uppercase; font-size:clamp(1.15rem,2.8vw,2rem); line-height:1.04; letter-spacing:-.03em; position:relative; }

/* before/after or comparison split */
.vs { display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(12px,2vw,22px); align-items:stretch; }
@media (max-width:700px){ .vs{ grid-template-columns:1fr; } .vs .vsmid{ justify-self:center } }
.vs .vscol { border:var(--bw) solid var(--border); border-radius:var(--r); padding:clamp(18px,2.4vw,26px); background:var(--card); }
.vs .vscol.bad  { border-color:var(--ink-4); }
.vs .vscol.good { border-color:var(--accent); box-shadow:4px 4px 0 var(--accent); }
.vs .vscol h4 { font-family:var(--display); text-transform:uppercase; font-size:1.05rem; display:flex; align-items:center; gap:9px; }
.vs .vscol ul { margin-top:14px; display:grid; gap:9px; }
.vs .vscol li { font-size:.89rem; color:var(--ink-3); padding-left:1.4em; position:relative; line-height:1.5; }
.vs .vscol.bad li::before  { content:'✕'; position:absolute; left:0; color:var(--ink-4); font-weight:900; }
.vs .vscol.good li::before { content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:900; }
.vsmid { display:grid; place-items:center; font-family:var(--display); font-size:1.3rem; color:var(--ink-4); }

/* icon tile row */
.itiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.itile { border:var(--bw) solid var(--line); border-radius:var(--r-sm); padding:18px 14px; text-align:center; background:var(--card); transition:all .16s var(--ease); }
.itile:hover { border-color:var(--accent); transform:translateY(-3px); }
.itile .e { font-size:1.7rem; }
.itile b { display:block; font-size:.82rem; margin-top:10px; }
.itile span { display:block; font-family:var(--mono); font-size:.62rem; color:var(--ink-4); margin-top:5px; letter-spacing:.08em; text-transform:uppercase; }

/* video card — big, tilted, hover play */
.vtile { position:relative; display:block; border:var(--bw) solid var(--border); border-radius:var(--r); overflow:hidden; background:var(--bg-3); transition:transform .3s var(--snap), box-shadow .3s var(--ease); }
.vtile:hover { transform:rotate(0deg) scale(1.03) !important; box-shadow:8px 8px 0 var(--accent); z-index:4; }
.vtile img { width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .5s var(--ease), filter .3s; }
.vtile.tall img { aspect-ratio:9/14; }
.vtile:hover img { transform:scale(1.07); }
.vtile .vov {
  position:absolute; inset:auto 0 0 0; padding:44px 16px 15px;
  background:linear-gradient(transparent, rgba(0,0,0,.93) 62%);
}
.vtile .vov h4 { font-size:.94rem; line-height:1.2; color:#fff; letter-spacing:-.02em; }
.vtile .vov span { font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72); display:block; margin-top:7px; }
.vtile .vplay {
  position:absolute; top:50%; left:50%; width:60px; height:60px; margin:-30px 0 0 -30px;
  background:var(--accent); border:var(--bw) solid #fff; display:grid; place-items:center;
  color:#fff; font-size:1.1rem; opacity:0; transform:scale(.7); transition:all .3s var(--snap);
}
.vtile:hover .vplay { opacity:1; transform:scale(1); }
.vtile .vbadge { position:absolute; top:10px; left:10px; background:var(--accent); color:#fff; font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.12em; padding:4px 9px; border:1.5px solid #fff; }

/* scroll-driven progress path (roadmap) */
.pathwrap { position:relative; }
.pathwrap svg { width:100%; height:auto; overflow:visible; }
.pathwrap .track2 { stroke:var(--line); stroke-width:3; fill:none; }
.pathwrap .fill2  { stroke:var(--accent); stroke-width:3.5; fill:none; stroke-linecap:round; }
.pathnode { fill:var(--bg); stroke:var(--accent); stroke-width:3; }
.pathlabel { font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; fill:var(--ink-2); }
.pathnum { font-family:var(--mono); font-size:13px; font-weight:700; fill:var(--accent-deep); }

@media (max-width:560px){
  .stamp { font-size:.58rem; padding:5px 10px; }
  .tilt-l,.tilt-r,.tilt-l2,.tilt-r2 { transform:none; }
  .taped::before { width:84px; }
}