@font-face{font-family:Roundo;src:url(../assets/font/Roundo-Bold.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  /* read off his own plates */
  --sky:#5787fd;
  --sky-deep:#2f56c9;
  --rock:#a98ee6;
  --rock-dark:#8470de;
  --cloud:#edeefb;
  --lime:#c5fa36;
  --lime-mid:#8ed11f;
  --lime-dark:#5f8a0d;
  --stem:#2c1708;
  --ink:#180b3a;

  --disp:Roundo,"Arial Black",system-ui,sans-serif;
  --ui:"Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;

  /* driven by the track, read in main.js */
  --beat:0;
  --bar:0;

  --pad:clamp(12px,2.2vw,30px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--sky-deep);color:#fff;font-family:var(--ui);
  overflow:hidden;overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
/* a component with its own display value beats the UA rule for [hidden] */
[hidden]{display:none!important}
:focus-visible{outline:4px solid var(--lime);outline-offset:3px}

/* ---------------------------------------------------------------- the world */
.world,.world-veil{position:fixed;inset:0;width:100%;height:100%}
.world{object-fit:cover;z-index:0;filter:saturate(1.15)}
.world-veil{
  z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 62%,transparent 30%,rgba(24,11,58,.5) 100%),
    linear-gradient(180deg,rgba(24,11,58,.42) 0%,transparent 26%,transparent 62%,rgba(24,11,58,.5) 100%);
}

/* ---------------------------------------------------------------- the scene */
.scene{
  position:relative;z-index:2;height:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"mark links" "stage stage" "foot foot";
  gap:0 var(--pad);padding:var(--pad);
}

/* ------------------------------------------------------------- the wordmark */
.mark{grid-area:mark;display:flex;align-items:center;gap:1.1em;margin:0;min-width:0}
.mark-word{
  width:clamp(150px,20vw,300px);height:auto;
  filter:drop-shadow(0 6px 0 rgba(24,11,58,.45));
  transform:rotate(-2deg) scale(calc(1 + var(--beat)*.012));
  transform-origin:left center;
}
.mark-tick{margin:0;transform:rotate(-2deg)}
.mark-tick span{
  display:inline-flex;align-items:center;height:clamp(34px,3.1vw,46px);
  padding:0 clamp(11px,1.2vw,17px);border-radius:999px;
  background:var(--lime);color:var(--ink);
  font-family:var(--disp);font-size:clamp(16px,1.7vw,25px);line-height:1;letter-spacing:.02em;
  box-shadow:0 6px 0 var(--lime-dark),0 7px 14px rgba(24,11,58,.35);
}

/* ------------------------------------------------------------------- links */
.links{grid-area:links;display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.lnk{
  --pill:clamp(38px,3.1vw,46px);
  display:flex;align-items:center;justify-content:center;gap:.5em;
  height:var(--pill);padding:0 clamp(12px,1.3vw,18px);border-radius:999px;
  background:#fff;color:var(--ink);
  font-family:var(--disp);font-size:clamp(13px,1.2vw,17px);line-height:1;
  box-shadow:0 6px 0 #b9a6e8,0 7px 14px rgba(24,11,58,.35);
  transition:transform .06s,box-shadow .06s;
}
.lnk:active,.lnk[aria-pressed=true]{transform:translateY(5px);box-shadow:0 1px 0 #b9a6e8}
.lnk-mark{display:grid;place-items:center;width:1.3em;height:1.3em;flex:0 0 auto}
.lnk-mark img{width:auto;height:100%;margin:0 auto}
.lnk-x .lnk-mark{
  background:currentColor;
  -webkit-mask:url(../assets/brand/x.svg) center/contain no-repeat;
  mask:url(../assets/brand/x.svg) center/contain no-repeat;
}
.lnk[aria-disabled=true]{background:#ded7ef;color:#6a5f85;box-shadow:0 6px 0 #a99cc4;cursor:not-allowed}
.lnk-snd[aria-pressed=true]{background:var(--lime)}

/* volume appears once the music is on, and wears the same pill as everything else */
.vol{display:none;background:#fff;box-shadow:0 6px 0 #b9a6e8,0 7px 14px rgba(24,11,58,.35);cursor:pointer}
body.sound-on .vol{display:flex}
.vol:active{transform:none;box-shadow:0 6px 0 #b9a6e8,0 7px 14px rgba(24,11,58,.35)}
.vol-in{
  -webkit-appearance:none;appearance:none;width:clamp(62px,6.6vw,92px);height:12px;
  border-radius:999px;background:linear-gradient(90deg,var(--lime-mid),var(--lime));
  border:2px solid var(--ink);cursor:pointer;
}
.vol-in::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--ink);border:3px solid var(--lime);cursor:grab;
}
.vol-in::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--ink);
  border:3px solid var(--lime);cursor:grab;
}

/* ------------------------------------------------------------------ the stage */
.stage{
  grid-area:stage;position:relative;
  display:flex;align-items:flex-end;justify-content:center;min-height:0;
  padding-top:calc(var(--pad)*2.2);
}

/* the bitten apple: one object used as hero, as every tile and as the lightbox */
.screen{display:block;position:relative;width:100%;aspect-ratio:1214/1218}
.screen-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.screen-hole{
  display:block;position:absolute;overflow:hidden;background:#120a2c;
  /* measured off the keyed asset: the bite is a real hole in a real object */
  left:8.65%;top:27.59%;width:83.44%;height:49.92%;
  border-radius:2% / 3%;
}
.screen-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
video.screen-media{opacity:0;transition:opacity .18s linear}
video.screen-media.on{opacity:1}
.screen-big{
  container-type:inline-size;
  transform:scale(calc(1 + var(--bar)*.006));
  flex:0 0 auto;height:90%;width:auto;max-width:min(92vw,900px);
  filter:drop-shadow(0 16px 10px rgba(60,30,110,.55)) drop-shadow(0 30px 40px rgba(24,11,58,.45));
}

/* he sits ON the thing, legs over the bite */
.mascot{
  position:absolute;z-index:3;
  left:68%;top:0;width:30%;
  transform:translate(-50%,-61%);
  touch-action:none;
}
.mascot canvas{width:100%;height:auto;filter:drop-shadow(0 10px 12px rgba(24,11,58,.45))}
.mascot:active canvas{transform:translateY(2px)}

.bites{
  position:absolute;left:34%;top:15%;z-index:3;margin:0;
  font-family:var(--disp);line-height:1;font-size:clamp(11px,4cqw,40px);
  color:#f2ffd0;-webkit-text-stroke:.17em #2f5a05;paint-order:stroke fill;
  pointer-events:none;white-space:nowrap;
  transform:translateX(-50%) rotate(-5deg) scale(calc(1 + var(--beat)*.06));
}
.bites b{font-size:1.35em;color:#fff}

/* the giant apple stands on the ground rather than floating over it */
.ground{
  position:absolute;left:50%;bottom:4%;z-index:0;
  width:52%;height:5%;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(60,26,110,.55),rgba(60,26,110,0) 70%);
  pointer-events:none;
}

/* ------------------------------------------------------- the contract object */
/* a crate end panel, so the address is branded onto a real thing and not onto a card */
.foot{grid-area:foot;display:flex;align-items:flex-end;gap:var(--pad);min-width:0}
.ca{position:relative;flex:0 0 auto;width:clamp(230px,23vw,340px)}
.ca-obj{width:100%;height:auto;filter:drop-shadow(0 12px 16px rgba(24,11,58,.5));transform:rotate(-1.6deg)}
.ca-in{position:absolute;left:11%;top:11%;width:78%;height:78%;transform:rotate(-1.6deg);
  display:flex;flex-direction:column;justify-content:center;gap:.6em;color:#2b1a0a}
.ca-lab{
  margin:0;font-family:var(--disp);font-size:clamp(10px,1.06vw,15px);
  letter-spacing:.07em;color:#3a250d;white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,236,196,.45);
}
.ca-val{
  margin:0;font-family:var(--mono);font-weight:700;
  font-size:clamp(10px,1.24vw,16px);line-height:1.3;letter-spacing:.01em;
  word-break:break-all;user-select:all;color:#241505;
  text-shadow:0 1px 0 rgba(255,236,196,.4);
}
.ca-val.empty{font-family:var(--disp);color:#5d431f;word-break:normal;letter-spacing:.04em}
.ca-copy{
  align-self:flex-start;height:clamp(24px,2.2vw,32px);padding:0 clamp(11px,1.1vw,16px);
  border-radius:999px;background:var(--lime);color:var(--ink);
  font-family:var(--disp);font-size:clamp(10px,1.02vw,14px);line-height:1;
  box-shadow:0 4px 0 var(--lime-dark);
}
.ca-copy:active{transform:translateY(3px);box-shadow:0 1px 0 var(--lime-dark)}
.ca-copy:disabled{background:#9e8358;color:#3a2a14;box-shadow:0 4px 0 #6d5636;cursor:not-allowed}
.ca-say{margin:0;min-height:1.1em;font-size:clamp(9px,1vw,13px);font-weight:700;color:#2f5405}
.ca-say.bad{color:#8d1a12}

/* ------------------------------------------------------------- the meme rail */
.rail{flex:1 1 0;min-width:0}
.rail-in{
  display:flex;gap:12px;margin:0;padding:4px 2px 10px;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;
  scrollbar-color:var(--lime) rgba(24,11,58,.35);
}
.rail-in::-webkit-scrollbar{height:9px}
.rail-in::-webkit-scrollbar-thumb{background:var(--lime);border-radius:9px}
.rail-in::-webkit-scrollbar-track{background:rgba(24,11,58,.35);border-radius:9px}
.tile{flex:0 0 auto}
.tile button{display:block;width:clamp(92px,9vw,124px);transition:transform .1s}
.tile button:hover,.tile button:focus-visible{transform:translateY(-6px) rotate(-2deg)}
.tile .screen{container-type:inline-size;filter:drop-shadow(0 8px 10px rgba(24,11,58,.5))}
.tile:nth-child(odd) button{transform:translateY(calc(var(--beat)*-3px))}
.tile:nth-child(even) button{transform:translateY(calc(var(--bar)*-3px))}

/* ------------------------------------------------------------------ the film */
/* the opening is footage and nothing else: a clip is never captioned here */
.intro{position:fixed;inset:0;z-index:40;background:#000;display:grid}
.intro-screen{position:relative;overflow:hidden;background:#000}
.intro-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.intro-skip{
  position:absolute;right:var(--pad);bottom:var(--pad);z-index:2;
  padding:9px 18px 11px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--ink);
  font-family:var(--disp);font-size:16px;line-height:1;
}

/* ------------------------------------------------------------------ the gate */
.gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(11,5,36,.72);backdrop-filter:blur(6px)}
.gate-in{text-align:center;padding:var(--pad)}
.gate-word{width:min(74vw,520px);height:auto;margin:0 auto;filter:drop-shadow(0 8px 0 rgba(24,11,58,.5))}
.gate-tick{margin:.1em 0 .7em;font-family:var(--disp);font-size:clamp(26px,6vw,64px);line-height:1;
  color:var(--lime);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
.gate-go{
  padding:16px 34px 20px;border-radius:999px;background:var(--lime);color:var(--ink);
  font-family:var(--disp);font-size:clamp(20px,3.6vw,34px);line-height:1;
  box-shadow:0 10px 0 var(--lime-dark),0 12px 24px rgba(0,0,0,.4);
  animation:pulse 1.2s ease-in-out infinite;
}
.gate-go:active{transform:translateY(8px);box-shadow:0 2px 0 var(--lime-dark);animation:none}
.gate-note{margin:.9em 0 0;font-size:14px;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* -------------------------------------------------------------- the lightbox */
.light{
  /* the object is square, so the height budget is what actually bounds it */
  width:min(92vw,86dvh,940px);max-width:none;max-height:none;padding:0;border:0;background:none;
  overflow:visible;color:#fff;
}
.light::backdrop{background:rgba(11,5,36,.86)}
.screen-light{container-type:inline-size;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6))}
.light-x{position:absolute;right:2%;top:1%;z-index:5;width:52px;height:52px;border-radius:50%;
  background:var(--lime);color:var(--ink);font-size:30px;line-height:1;font-family:var(--disp)}
.light-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);
  font-size:34px;line-height:1}
.light-prev{left:-14px}
.light-next{right:-14px}

/* ------------------------------------------------------------------- juice */
.flash{position:fixed;inset:0;z-index:30;pointer-events:none;background:#fff;opacity:0}
.flash.on{animation:fl .12s linear}
@keyframes fl{from{opacity:.5}to{opacity:0}}
.pop{position:fixed;z-index:31;pointer-events:none;font-family:var(--disp);
  font-size:clamp(18px,3vw,40px);color:var(--lime);-webkit-text-stroke:4px var(--ink);
  paint-order:stroke fill;animation:pop .7s ease-out forwards}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.5)}to{transform:translate(-50%,-190%) scale(1.25);opacity:0}}

/* ------------------------------------------------------------------ narrow */
@media (max-width:900px){
  .scene{gap:4px var(--pad)}
  .stage{padding-top:calc(var(--pad)*3.4);align-items:center}
  .mascot{left:58%}
  .foot{flex-direction:column;align-items:stretch;gap:6px}
  .ca{width:min(74vw,290px);align-self:center}
  .mark{flex-direction:column;align-items:flex-start;gap:0}
  .mark-word{width:clamp(112px,30vw,200px)}
  .mark-tick{font-size:clamp(18px,5vw,32px)}
  .screen-big{max-width:88vw;height:84%}
  .tile button{width:86px}
  .light-prev{left:2px}.light-next{right:2px}
}
@media (max-width:640px){
  /* the marks carry the meaning at this size; their names live in aria-label */
  .lnk-lab{display:none}
  .lnk{padding:0 12px;gap:0}
  .lnk-mark{font-size:1.25em}
}

@media (prefers-reduced-motion:reduce){
  .gate-go{animation:none}
  .screen-big,.tile button{transform:none}
  .mark-word,.bites{transform:none}
  .pop{animation-duration:.01ms}
  .hint{opacity:.9}
}