/* Seagrave teaser. One voice for every word: Archivo, wide, spaced. One accent: the safelight.
   Four corners, nothing in the middle: the name, the countdown, the words, the request.
   On a phone the corners gather into one centred column. */
@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:block}
:root{--ink:#E8EBE5;--edge:rgba(232,235,229,.72);--dev:0;--pad:clamp(22px,3.4vw,56px)}
html,body{height:100%;margin:0;background:#000}
body{color:var(--ink);font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;overflow:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.stage{position:fixed;inset:0;background:#000}
.stage.flat{background:radial-gradient(60% 50% at 55% 18%,#3a0d02 0,#120300 45%,#000 100%)}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
button,input{font:inherit;color:inherit}
p{margin:0}
[hidden]{display:none!important}

.ui{opacity:0}
body.go .ui{animation:arrive 1.8s 3.2s ease forwards}

/* Two arrangements, never a snap: wide windows hold the four corners; narrow ones gather into one
   centred column (body.col). teaser.js glides every part from the old place to the new one. */
:root{--glide:.65s cubic-bezier(.26,.23,.17,.89)}

/* top: the name, and the time left */
.top{position:absolute;left:var(--pad);right:var(--pad);top:calc(var(--pad) + env(safe-area-inset-top,0px));display:flex}
.lockup{display:flex;align-items:center;font-size:clamp(11.5px,calc(9px + .45vw),14px);font-stretch:125%;
  letter-spacing:.36em;gap:1.3em}
.lockup .sg{display:flex;flex-direction:column;align-items:flex-start;gap:.36em;line-height:1;margin-right:-.36em}
.lockup b,.lockup em{display:inline-block;white-space:nowrap}
.lockup b{font-weight:620}.lockup em{font-style:normal;font-weight:300;font-size:.74em}
.lockup i{display:block;width:1px;height:2.5em;background:currentColor}
.vw{display:block;height:.86em;aspect-ratio:320/29;fill:currentColor;flex:none}

.count{position:absolute;right:0;top:50%;transform:translateY(-50%);font-stretch:125%;line-height:1;
  transition:opacity var(--glide),filter var(--glide),visibility 0s}
.digits{display:flex;justify-content:flex-end;gap:1.5em;font-variant-numeric:tabular-nums}
.digits span{display:flex;align-items:baseline;gap:.45em}
.digits b{font-weight:300;font-size:17px;letter-spacing:.08em}
.digits i{font-style:normal;font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.62}

/* bottom: the words, and the request */
.base{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--pad) + env(safe-area-inset-bottom,0px));
  display:flex;justify-content:space-between;align-items:flex-end;gap:28px}
h1{margin:0;font-weight:400;font-stretch:125%;text-transform:uppercase;line-height:1;font-size:clamp(17px,1.65vw,23px)}
h1 .pre,h1 .big{display:table;white-space:nowrap}
h1 .pre{font-size:.78em;letter-spacing:.2em;font-weight:300;opacity:.82;margin-bottom:.95em}
h1 .big{letter-spacing:.2em;font-weight:620;opacity:calc(.5 + .5*var(--dev))}

/* The pill: the one rounded shape, and the only thing on the page that asks to be pressed. */
.unit{position:relative;flex:none;width:clamp(352px,29vw,384px)}
.pill{display:flex;align-items:stretch;height:46px;box-sizing:border-box;border:1px solid var(--edge);border-radius:999px;
  overflow:hidden;background:rgba(0,0,0,.34);transition:border-color .25s}
.pill:hover{border-color:var(--ink)}
.pill input{flex:1;min-width:0;background:none;border:0;outline:0;padding:0 10px 0 22px;
  font-size:12.5px;font-stretch:108%;letter-spacing:.05em}
.pill input::placeholder{color:var(--ink);opacity:.55}
.pill .act{flex:none;width:170px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-left:1px solid var(--edge);
  background:transparent;cursor:pointer;font-size:9.5px;font-weight:620;font-stretch:125%;letter-spacing:.22em;text-transform:uppercase;
  white-space:nowrap;transition:background-color .25s,color .25s}
.pill .act:hover{background:var(--ink);color:#000}
.pill:focus-within{outline:1px solid var(--ink);outline-offset:4px}
.note{position:absolute;left:22px;bottom:100%;margin:0 0 10px;font-size:10.5px;letter-spacing:.06em;opacity:.82;white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* the column: the name centred, no clock, the words above the request */
body.col .top{justify-content:center}
body.col .count{opacity:0;filter:blur(8px);visibility:hidden;transition:opacity var(--glide),filter var(--glide),visibility 0s var(--glide)}
body.col .base{flex-direction:column;align-items:center}
body.col .unit{width:100%}

/* the door: one line draws, then parts onto the room */
.door{position:fixed;top:0;bottom:0;width:50.05%;background:#000;z-index:5}
.door.l{left:0;--to:-100.5%}.door.r{right:0;--to:100.5%}
.door::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--ink);transform:scaleY(0)}
.door.l::after{right:0}.door.r::after{left:0}
body.go .door{animation:part 2.9s 1.25s cubic-bezier(.78,0,.16,1) forwards}
body.go .door::after{animation:draw .95s .25s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{transform:scaleY(1)}}
@keyframes part{to{transform:translateX(var(--to))}}
@keyframes arrive{to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .door{display:none}
  .count{transition:none}
  .ui,body.go .ui{animation:none;opacity:1}
}