/* The vision layer (vision.js) and the brain that invites you into it. Square corners, no circles. */

/* The brain peeking up behind the mark, bobbing, with a button beside the scroll cue */
/* The brain grows up out of the soil in the head. The wrapper covers the whole mark and fades to
   nothing just above the soil line (~36% down) with a soft mask, so at rest the brain is invisible below
   it and, lifted, it emerges out of the pot: fading in, growing, rising in front of the tree. */
.brain-peek { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .6s ease;
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 27%, transparent 36%); mask-image:linear-gradient(to bottom, #000 0, #000 27%, transparent 36%); }
.brain-peek img { position:absolute; left:33%; top:37%; width:31%; opacity:0; transform:scale(.8); transform-origin:50% 100%;
  filter:drop-shadow(0 14px 18px rgba(35,36,31,.25)); transition:transform 1.3s cubic-bezier(.2,.8,.2,1), opacity 1s ease; }
.brain-peek.up { opacity:1; }
.brain-peek.lift img { transform:translateY(-130%) scale(1); opacity:1; }
@keyframes brainBob { 50% { transform:translateY(-12px) rotate(-1.5deg); } }

.cues { position:fixed; white-space:nowrap; left:50%; bottom:28px; z-index:4; display:flex; gap:10px; transform:translateX(-50%); }
.cues .cue { position:static; transform:none; }
.cues .cue.gone { transform:translateY(12px); position:absolute; } /* out of the row once faded, so it leaves no gap */
.why {
  display:flex; align-items:center; padding:12px 20px 14px; cursor:pointer;
  background:var(--marble); color:var(--ink); border:1px solid var(--hair); box-shadow:var(--lift);
  font:500 15px/1 var(--sans); transition:transform .3s ease, background .2s;
}
.why img { width:34px; height:40px; object-fit:contain; background:var(--paper); }
.why:hover { transform:translateY(-2px); background:#fff; }
.night .why { background:var(--chalk); }

/* The layer itself */
.vision { position:fixed; inset:0; z-index:10; display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,4vw,64px); align-items:center;
  padding:clamp(24px,5vw,72px); background:var(--paper); opacity:0; pointer-events:none; transition:opacity .5s ease; }
.vision.on { opacity:1; pointer-events:auto; }
.night .vision { background:var(--floor); }
.vision-on, .vision-on body { overflow:hidden !important; }
.vz-stage { position:relative; width:100%; aspect-ratio:4/3; max-height:78vh; }
.vz-words { max-width:520px; }
.vz-kick { display:flex; align-items:center; gap:8px; font:500 12px/1 'JetBrains Mono',ui-monospace,monospace; color:var(--wood); letter-spacing:.04em; margin-bottom:16px; }
.vz-kick i { width:8px; height:8px; background:var(--wood); }
.vision h2 { font:400 clamp(30px,3.6vw,48px)/1.06 var(--serif); letter-spacing:-.025em; text-wrap:balance; color:var(--ink); }
.vision p { margin-top:18px; font:400 clamp(17px,1.5vw,20px)/1.6 var(--sans); color:var(--ink-soft); text-wrap:pretty; }
.night .vision h2 { color:var(--chalk); } .night .vision p { color:var(--sage-pale); }
.vz-ctl { display:flex; align-items:center; gap:14px; margin-top:28px; }
.vz-play { flex:0 0 42px; width:42px; height:42px; border:0; background:var(--ink); cursor:pointer; position:relative; }
.vz-play::before, .vz-play::after { content:''; position:absolute; top:13px; width:5px; height:16px; background:var(--marble); }
.vz-play::before { left:14px; } .vz-play::after { left:23px; }
.vz-play.paused::before { left:16px; width:0; height:0; background:none; border-left:13px solid var(--marble); border-top:8px solid transparent; border-bottom:8px solid transparent; }
.vz-play.paused::after { display:none; }
.vz-ticks { display:flex; gap:6px; }
.vz-ticks button { width:22px; height:6px; padding:0; border:0; background:var(--sage-pale); cursor:pointer; }
.vz-ticks button.done { background:var(--sage); } .vz-ticks button.on { background:var(--wood); }
.vz-next { border:0; background:none; font:500 14px var(--sans); color:var(--forest-deep); cursor:pointer; padding:8px 4px; }
.vz-close { position:absolute; top:20px; right:20px; border:1px solid var(--hair); background:var(--marble); padding:10px 16px; font:500 14px var(--sans); color:var(--ink); cursor:pointer; }
.vz-close:hover { background:#fff; }
.vision button:focus-visible, .why:focus-visible { outline:2px solid var(--forest); outline-offset:2px; }
.vision button:focus:not(:focus-visible) { outline:none; }

/* The pictures */
.vz { width:100%; height:100%; overflow:visible; }
.vz-duo { position:absolute; inset:0; }
.vz-head { position:absolute; left:36%; bottom:2%; width:44%; }
.vz-brain { position:absolute; left:4%; top:-14%; width:34%; filter:drop-shadow(0 20px 24px rgba(35,36,31,.25)); animation:brainBob 6s ease-in-out infinite; }
.vz-join { position:absolute; left:60%; bottom:-52px; transform:translateX(-50%); padding:0 26px; min-height:48px; border:1px solid var(--forest-deep); cursor:pointer; }
.vz-mono { font:500 12px 'JetBrains Mono',ui-monospace,monospace; fill:var(--sage); letter-spacing:.05em; }
.vz-serif { font:400 17px var(--serif); fill:var(--ink); }
.vz-hand { font:500 26px 'Caveat',cursive; fill:#34362F; }
.vz-chalk { fill:var(--chalk); } .vz-wood { fill:var(--wood); } .vz-wood-text { fill:var(--wood); font-style:italic; }
.vz-ink { fill:none; stroke:#34362F; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.vz-ink.vz-wood { stroke:var(--wood); stroke-width:3.6; }
.vz-ink.vz-thin { stroke-width:2; opacity:.7; }
.vz-dark { fill:var(--floor); } .vz-darkbar { fill:#2A3028; } .vz-lamp { fill:var(--wood); }
.vz-chalk-fill { fill:var(--chalk); stroke:var(--hair); } .vz-wood-fill { fill:var(--wood); } .vz-forest-fill { fill:var(--forest); }
.vz-card { fill:var(--marble); stroke:var(--hair); } .vz-soft { fill:var(--sage-pale); } .vz-paper { fill:var(--paper); }
.vz-scan { fill:var(--lichen); }
.vz-target { fill:none; stroke:var(--sage); stroke-width:2; }
.vz-polish { fill:none; stroke:var(--wood); stroke-width:6; stroke-linecap:round; filter:drop-shadow(0 3px 4px rgba(35,36,31,.3)); }
.vz-edge { stroke:var(--hair); stroke-width:1; }
.vz-chalk-text { fill:var(--chalk); font-size:22px; } .vz-reply { fill:var(--chalk); opacity:.85; }
.vz g, .vz rect, .vz text { transform-box:view-box; }

@media (max-width:760px) {
  .vision { grid-template-columns:1fr; align-content:start; padding:64px 16px 24px; gap:12px; overflow:auto; }
  .vision > * { min-width:0; } /* a grid item defaults to min-width:auto and would not let the words wrap */
  .vz-words { max-width:100%; }
  .vz-ticks { gap:4px; } .vz-ticks button { width:14px; }
  .vision h2 { font-size:28px; }
  .vz-stage { max-height:40vh; }
  .vision p { margin-top:10px; }
  .cues { bottom:auto; top:14px; }
  .cues .cue, .why { white-space:nowrap; padding:10px 14px 11px; font-size:14px; }
  .why { font-size:14px; }
}