/* Home only: the opening screen. One green room, a pedal in it, paper type on top.
   The poster is the base state; WebGL arrives later as body.gl and never changes this layout. */

/* ---- Desktop: the viewport is the room, so nothing scrolls. */
body.home{overflow:hidden;touch-action:manipulation}

/* One positioned box for everything that is laid over the picture, so every coordinate
   (poster crop, pedal hit box, hung tags) is measured against the same rectangle. */
.screen,main.overlay{position:fixed;inset:0}
main.overlay{pointer-events:none}
main.overlay a,main.overlay button{pointer-events:auto}

.poster,.poster img,#stage{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.poster-lit{opacity:0;transition:opacity 160ms ease-out}
.screen.is-lit .poster-lit{opacity:1;transition-duration:90ms}
#stage{opacity:0;transition:opacity .4s ease-out}
body.gl #stage{opacity:1}
/* A lost WebGL canvas is cut at once, not faded: its blank frame must never show over the poster. */
body.lost #stage,body.lost .intro h1{transition:none}
body.gl .tags::before{display:none}
/* Hung tags are placed in stage px, so their containing block must be main.overlay (same box as .screen),
   not the nav row, which base.css positions for its flat cable line. */
body.gl .tags:not(.flat){position:static}
body.gl .tags:not(.flat) a{position:absolute;left:0;top:0;will-change:transform}

/* ---- Top left: wordmark, headline, the tag row on its cable.
   Not positioned, so tags hung on the 3D cable later use main.overlay as their containing block.
   Its font size is Display so the 13.2em measure matches the spike. */
.intro{margin:var(--edge) 0 0 var(--edge);max-width:min(62vw,13.2em);font-size:clamp(46px,6.9vw,116px)}
.intro .word{display:block;width:fit-content;font-size:17px;line-height:1.4}
.home h1{margin:16px 0 0;font-size:1em;line-height:.93;letter-spacing:-.03em;text-wrap:balance;transition:opacity .4s ease-out}
/* The words are painted on the floor (D-18): the h1 fades out with the canvas fading in, then is
   visually hidden with the clip pattern once the fade is over. Screen readers keep it; it is never taken out of the page.
   Coming back (paint wiped, poster, lost GPU) it returns at once and fades up. */
body.paint .intro h1{opacity:0;position:absolute;width:1px;height:1px;margin:0;overflow:clip;clip-path:inset(50%);white-space:nowrap;
  transition:opacity .4s ease-out,position 0s .4s,width 0s .4s,height 0s .4s,margin 0s .4s,overflow 0s .4s,clip-path 0s .4s,white-space 0s .4s;
  transition-behavior:allow-discrete}
/* Home's flat cable (poster version) comes in from the left edge and ends one edge-width past the
   last tag, as on the shell pages' own rule. Full-bleed it would cross the poster's pedal; on phones
   the tag row fills the width, so it still runs edge to edge there. */
.home .tags{margin-top:12px;width:fit-content;max-width:100%}

/* ---- The pedal. A transparent box over the painted pedal; js/ui/poster.js sizes it. */
#pedal{position:absolute;left:0;top:0;width:0;height:0;background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;font:inherit;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#pedal:focus-visible{outline:2px solid var(--paper);outline-offset:6px}
body.running main.overlay{user-select:none;-webkit-user-select:none}

/* ---- Bottom corners sit above the footer row. */
:root{--foot:44px}
@media (min-width:1180px){:root{--foot:20px}}

.sheet{position:absolute;left:var(--edge);bottom:calc(var(--edge) + var(--foot) + 24px);width:min(26rem,calc(100vw - 2*var(--edge)))}
.status{margin-bottom:8px}
.running #hint,.priced #hint{visibility:hidden}
#tape{margin:0;min-height:8.2em;padding:12px 16px;background:var(--paper);color:var(--ink);font:400 13.5px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),97% 100%,94% calc(100% - 5px),91% 100%,88% calc(100% - 5px),85% 100%,82% calc(100% - 5px),79% 100%,76% calc(100% - 5px),73% 100%,70% calc(100% - 5px),67% 100%,64% calc(100% - 5px),61% 100%,58% calc(100% - 5px),55% 100%,52% calc(100% - 5px),49% 100%,46% calc(100% - 5px),43% 100%,40% calc(100% - 5px),37% 100%,34% calc(100% - 5px),31% 100%,28% calc(100% - 5px),25% 100%,22% calc(100% - 5px),19% 100%,16% calc(100% - 5px),13% 100%,10% calc(100% - 5px),7% 100%,4% calc(100% - 5px),0 100%)}
#tape .caret{display:inline-block;width:.6em;height:1.05em;vertical-align:-.17em;background:var(--ink)}

.price{position:absolute;right:var(--edge);bottom:calc(var(--edge) + var(--foot) + 24px);text-align:right}
#price-num{white-space:nowrap;font-size:clamp(46px,6.9vw,116px);font-weight:700;line-height:.93;letter-spacing:-.03em}
.price .concept{margin-top:8px}

#sound{position:absolute;right:var(--edge);top:var(--edge);background:none;border:0;color:var(--paper);font:inherit;font-size:15px;line-height:20px;padding:8px 0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
#sound:hover{text-decoration-thickness:2px}

/* ---- Footer: one quiet row along the bottom edge. */
.home .colophon{position:fixed;left:var(--edge);right:var(--edge);bottom:var(--edge);display:flex;flex-wrap:wrap;column-gap:24px;row-gap:4px;padding:0;margin:0}
.home .colophon p+p{margin-top:0}

/* Short laptops: the sheet would climb into the headline. Shorten the tape, never the type. */
@media (min-width:761px) and (max-height:700px){#tape{min-height:6.6em}}

@media (pointer: coarse){#sound{padding-block:12px;margin-top:-4px}}

/* ---- Short landscape (a phone on its side, a squat window): the headline and the sheet would meet.
   The first screen grows to fit them and the page scrolls, with the footer below it, as on phones.
   Its height: wordmark and gap (40), two headline lines (1.86em of Display), the tag row (52), a 24px
   gap, the sheet (150) and its 24px bottom margin, between the two edges. Viewports taller than 600px
   never match, so the desktop, laptop and phone layouts are untouched. */
@media (min-width:761px) and (min-aspect-ratio:1/1) and (max-height:600px){
  :root{--tall:max(100svh,calc(2*var(--edge) + 290px + 1.86*clamp(46px,6.9vw,116px)))}
  body.home{overflow:visible}
  .screen,main.overlay{position:absolute;left:0;top:0;right:auto;bottom:auto;width:100%;height:var(--tall)}
  .home .colophon{position:static;margin-top:var(--tall);padding:24px var(--edge) var(--edge)}
  .sheet,.price{bottom:calc(var(--edge) + 24px)}
}

/* ---- Phones and portrait: the first screen is exactly 100svh; the footer waits below it. */
@media (max-width:760px),(max-aspect-ratio:1/1){
  body.home{overflow:visible}
  .screen,main.overlay{position:absolute;left:0;top:0;right:auto;bottom:auto;width:100%;height:100svh}
  .home .colophon{position:static;margin-top:100svh;padding:24px var(--edge) var(--edge)}
  .intro{max-width:calc(100vw - 2*var(--edge));font-size:clamp(40px,12vw,76px)}
  .home .tags{width:auto}
  .sheet{bottom:calc(var(--edge) + 3.9em)}
  #tape{min-height:6.6em;font-size:12px;padding:8px 12px}
  .price{left:var(--edge);right:var(--edge);bottom:var(--edge);text-align:left;display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
  #price-num{font-size:40px}
  .price .concept{margin:0}
}

/* ---- Calm: nothing fades, everything snaps. */
/* The lit rule above outranks a bare .poster-lit, so calm repeats it to keep the rise instant too. */
@media (prefers-reduced-motion: reduce){#stage,.poster-lit,.screen.is-lit .poster-lit,.home h1,body.paint .intro h1{transition:none}}
html.calm #stage,html.calm .poster-lit,html.calm .screen.is-lit .poster-lit,html.calm .home h1,html.calm body.paint .intro h1{transition:none}