/* immersion.css: the world answering the player (immersion.js drives it). Cut from the same cardboard as style.css's kit.
   1. the parade gates: two kraft doors, each a green KCC felt panel (cream running stitch, gold satin rim) on brass strap
      hinges at the outer edges, a brass drop-latch across the seam behind the KCC crest (painted across the seam: it
      splits in half as they open), a sun rim on each right edge, the right door's shadow falling down-left onto the
      left one; closed over the page while the painting, crowd and questions load. Pure CSS
      (html::before / html::after + a tag on body::before), so they're there on the very first paint; immersion.js swings
      them open (html.im-open) and drops them (html.im-gone). No JS at all: a failsafe fades them after 12s.
   2. TAKE THE TEST before the questions land: unpainted kraft, "SETTING UP...", and a click is held until it's ready.
   3. fans' hand-lettered signs on sticks (#im-crowd, z 4: over the bridge, under the crowd canvas, so the crowd's
      raised arms and the deck hide the stick).
   4. the last question: the house lights come down around the sign (#im-dim), the scoreboard stub ticks.
   Light, as everywhere: the low sun behind-right; shadows fall down-left, rims catch on the right. */

/* ---------------- 1. the parade gates ---------------- */
html:not(.im-gone)::before,html:not(.im-gone)::after{
  content:'';position:fixed;top:0;bottom:0;width:calc(50% + 1px);z-index:60;box-sizing:border-box;
  --im-m:3.6vh;                                   /* the kraft margin round the felt panel */
  --im-crest:min(52vh,40vw);                      /* the KCC crest across the seam: each door carries its half */
  --im-latch-y:75vh;                              /* the drop-latch across the seam, under the crest's bow */
  padding:var(--im-m);                            /* so the content-box is the felt panel (the felt layer is clipped to it) */
  /* 27 layers, top first: pull eyelet, crest half, the seam's drop-latch, two strap hinges on the outer edge (the brass
     is rendered: kcc/brass/, tools/kcc-gen/gen_brass.py), the
     running stitch, the board's cut edge, then the felt panel in its gold satin rim, on kraft */
  background:
    var(--im-eye),
    var(--im-half),
    var(--lk-img) var(--lk-p)/auto 8vh no-repeat,
    var(--hg-img) var(--side) 0 top calc(17vh - 4.56vh)/auto 9.5vh no-repeat,
    var(--hg-img) var(--side) 0 top calc(79vh - 4.56vh)/auto 9.5vh no-repeat,
    repeating-linear-gradient(90deg,rgba(236,226,198,.82) 0 1.15vh,transparent 1.15vh 1.85vh) left calc(var(--im-m) + 1.5vh) top calc(var(--im-m) + 1.5vh)/calc(100% - var(--im-m) * 2 - 3vh) 2px no-repeat,
    repeating-linear-gradient(90deg,rgba(236,226,198,.82) 0 1.15vh,transparent 1.15vh 1.85vh) left calc(var(--im-m) + 1.5vh) bottom calc(var(--im-m) + 1.5vh)/calc(100% - var(--im-m) * 2 - 3vh) 2px no-repeat,
    repeating-linear-gradient(180deg,rgba(236,226,198,.82) 0 1.15vh,transparent 1.15vh 1.85vh) left calc(var(--im-m) + 1.5vh) top calc(var(--im-m) + 1.5vh)/2px calc(100% - var(--im-m) * 2 - 3vh) no-repeat,
    repeating-linear-gradient(180deg,rgba(236,226,198,.82) 0 1.15vh,transparent 1.15vh 1.85vh) right calc(var(--im-m) + 1.5vh) top calc(var(--im-m) + 1.5vh)/2px calc(100% - var(--im-m) * 2 - 3vh) no-repeat,
    repeating-linear-gradient(90deg,rgba(6,16,6,.55) 0 1.15vh,transparent 1.15vh 1.85vh) left calc(var(--im-m) + 1.5vh - 1px) top calc(var(--im-m) + 1.5vh + 1.2px)/calc(100% - var(--im-m) * 2 - 3vh) 2px no-repeat,
    repeating-linear-gradient(90deg,rgba(6,16,6,.55) 0 1.15vh,transparent 1.15vh 1.85vh) left calc(var(--im-m) + 1.5vh - 1px) bottom calc(var(--im-m) + 1.5vh - 1.2px)/calc(100% - var(--im-m) * 2 - 3vh) 2px no-repeat,
    repeating-linear-gradient(180deg,rgba(6,16,6,.55) 0 1.15vh,transparent 1.15vh 1.85vh) left calc(var(--im-m) + 1.5vh - 1px) top calc(var(--im-m) + 1.5vh + 1.2px)/2px calc(100% - var(--im-m) * 2 - 3vh) no-repeat,
    repeating-linear-gradient(180deg,rgba(6,16,6,.55) 0 1.15vh,transparent 1.15vh 1.85vh) right calc(var(--im-m) + 1.5vh + 1px) top calc(var(--im-m) + 1.5vh + 1.2px)/2px calc(100% - var(--im-m) * 2 - 3vh) no-repeat,
    var(--im-edge),
    var(--cb-fiber),
    var(--im-shade) center/calc(100% - var(--im-m) * 2) calc(100% - var(--im-m) * 2) no-repeat,
    radial-gradient(ellipse 90% 45% at 62% 18%,rgba(255,232,180,.1),transparent 70%) center/calc(100% - var(--im-m) * 2) calc(100% - var(--im-m) * 2) no-repeat,
    radial-gradient(ellipse 80% 40% at 30% 92%,rgba(0,0,0,.2),transparent 70%) center/calc(100% - var(--im-m) * 2) calc(100% - var(--im-m) * 2) no-repeat,
    var(--dp-felt,var(--cb-fiber)),
    radial-gradient(ellipse 70% 55% at 50% 46%,#2b703b,#1f5a2f 60%,#163f22) center/calc(100% - var(--im-m) * 2) calc(100% - var(--im-m) * 2) no-repeat,
    linear-gradient(#2a1a0c,#2a1a0c) center/calc(100% - var(--im-m) * 2 + 2px) calc(100% - var(--im-m) * 2 + 2px) no-repeat,
    linear-gradient(100deg,rgba(0,0,0,.28),transparent 45%,rgba(255,240,200,.25)) center/calc(100% - var(--im-m) * 1.5) calc(100% - var(--im-m) * 1.5) no-repeat,
    repeating-linear-gradient(58deg,#fff0b8 0 .8px,#d9a441 .8px 2px,#6e4a14 2px 2.8px) center/calc(100% - var(--im-m) * 1.5) calc(100% - var(--im-m) * 1.5) no-repeat,
    linear-gradient(rgba(60,28,6,.45),rgba(60,28,6,.45)) center/calc(100% - var(--im-m) * 1.5 + 3px) calc(100% - var(--im-m) * 1.5 + 3px) no-repeat,
    repeating-linear-gradient(90deg,rgba(60,28,6,.07),rgba(255,230,180,.06) 9px,rgba(60,28,6,.07) 18px),
    radial-gradient(ellipse at 30% 20%,rgba(255,226,170,.22),transparent 55%),
    radial-gradient(ellipse at 70% 85%,rgba(60,28,6,.22),transparent 60%),
    #c98f55;
  background-clip:border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,content-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box;
  /* the right edge catches the low sun, the other edge sits in a hair of shade; the right door casts down-left */
  box-shadow:inset -2px 0 0 rgba(255,214,150,.55),inset 1px 0 0 rgba(30,12,2,.35),var(--im-cast,0 0 0 transparent);
  pointer-events:auto;backface-visibility:hidden;will-change:transform;
  transition:transform 1.3s cubic-bezier(.6,.02,.28,1),opacity .4s;
  animation:im-failsafe .5s ease-in 12s forwards}
/* the left door: hinged on the left; it carries the latch's bar, two guides and the drop handle */
html:not(.im-gone)::before{content:'';left:0;transform-origin:0 50%;--im-hx:calc(100% - 1.8vh);
  --im-edge:repeating-linear-gradient(0deg,#6b3f1a 0 1px,#c88e52 1px 3px,#9a6431 3px 4px) right/8px 100% no-repeat;
  --im-shade:linear-gradient(90deg,rgba(10,20,8,.4),rgba(10,20,8,0) 45%,rgba(10,20,8,0) 90%,rgba(10,20,8,.3));
  --im-half:url(kcc/kcc-crest.webp) calc(100% + var(--im-crest) / 2) 46%/var(--im-crest) auto no-repeat;
  --side:left;--hg-img:url(kcc/brass/hinge-l.webp);
  --lk-img:url(kcc/brass/latch-l.webp);--lk-p:right 0 top calc(var(--im-latch-y) - 2.99vh);
  --im-eye:url(kcc/brass/eyelet.webp) right .2vh top calc(84vh - 1.6vh)/3.2vh 3.2vh no-repeat}
/* the right door: hinged on the right; the bar's end drops into its keeper, and it casts its shadow onto the left door */
html:not(.im-gone)::after{content:'';right:0;transform-origin:100% 50%;--im-hx:1.8vh;
  --im-edge:repeating-linear-gradient(0deg,#6b3f1a 0 1px,#c88e52 1px 3px,#9a6431 3px 4px) left/8px 100% no-repeat;
  --im-shade:linear-gradient(90deg,rgba(255,214,150,.1),rgba(10,20,8,0) 40%,rgba(10,20,8,.4));
  --im-half:url(kcc/kcc-crest.webp) calc(0% - var(--im-crest) / 2) 46%/var(--im-crest) auto no-repeat;
  --im-cast:-9px 7px 16px rgba(6,14,4,.55);
  --side:right;--hg-img:url(kcc/brass/hinge-r.webp);
  --lk-img:url(kcc/brass/latch-r.webp);--lk-p:left 0 top calc(var(--im-latch-y) - 2.99vh);
  --im-eye:url(kcc/brass/eyelet.webp) left .2vh top calc(84vh - 1.6vh)/3.2vh 3.2vh no-repeat}
/* the tag hung on the seam: what's happening behind the gates */
html:not(.im-gone) body::before{content:'SETTING UP THE PARADE';position:fixed;left:50%;top:77.5%;z-index:61;translate:-50% 0;transform-origin:50% -3em;rotate:-2deg;
  padding:.62em 1.3em .52em;white-space:nowrap;border-radius:2px;pointer-events:none;
  font:700 clamp(13px,1.35vw,20px)/1 'Barlow Condensed','Roboto Slab',sans-serif;letter-spacing:.16em;color:#b02a15;
  background:radial-gradient(circle at 50% .1em,#2a1a0c 0 .14em,#d9a441 .2em,#6b4a16 .3em,transparent .36em),var(--cb-fiber),var(--cb-light),#f6e8c8;
  box-shadow:0 2px 0 #8a6234,-4px 6px 6px rgba(30,12,2,.45);
  -webkit-mask:radial-gradient(circle at 0 50%,#0000 .3em,#000 .33em) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 .3em,#000 .33em) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 50%,#0000 .3em,#000 .33em) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 .3em,#000 .33em) right/51% 100% no-repeat;
  animation:im-swing 2.6s ease-in-out infinite,im-failsafe .3s ease-in 12s forwards;transition:opacity .25s,translate .35s ease-in}
/* the string it hangs from, over the seam */
html:not(.im-gone) body::after{content:'';position:fixed;left:50%;top:calc(75vh + .9vh);height:calc(77.5vh - 75.9vh);width:2px;z-index:61;translate:-50% 0;pointer-events:none;
  background:repeating-linear-gradient(0deg,#b88e55 0 3px,#7a5428 3px 5px);box-shadow:-1px 1px 0 rgba(40,18,4,.4);
  animation:im-failsafe .3s ease-in 12s forwards;transition:opacity .25s}
html.im-open::before{transform:perspective(1700px) rotateY(102deg);pointer-events:none}
html.im-open::after{transform:perspective(1700px) rotateY(-102deg);pointer-events:none}
html.im-open body::before{opacity:0;translate:-50% 3vh}
html.im-open body::after{opacity:0}
@keyframes im-swing{0%,100%{rotate:-2.2deg}50%{rotate:1.6deg}}
@keyframes im-failsafe{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  html.im-open::before,html.im-open::after{transform:none;opacity:0}
  html:not(.im-gone) body::before{animation:im-failsafe .3s ease-in 12s forwards}
}

/* ---------------- 2. TAKE THE TEST before the questions land ---------------- */
#start.im-wait{--cb-face:#dcb57c;--cb-edge-c:#7a5428;--cb-text:#4a2e14;--cb-score:rgba(90,55,20,.4);cursor:progress;text-shadow:none}
#start.im-wait.im-fail{cursor:pointer}
.im-dots i{font-style:normal;animation:im-dot 1.2s steps(1) infinite}
.im-dots i:nth-child(2){animation-delay:.3s}
.im-dots i:nth-child(3){animation-delay:.6s}
@keyframes im-dot{0%{opacity:.15}40%{opacity:1}}

/* ---------------- 3. the fans' signs ---------------- */
#im-crowd{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.im-held{position:absolute;left:0;top:0;width:0;height:0}
.im-pole{position:absolute;bottom:0;left:calc(var(--bw) / -2);width:var(--bw);height:var(--ph);transform-origin:50% 100%;will-change:transform}
/* a paint-stirrer stick, lit from the right */
.im-stick{position:absolute;left:50%;top:calc(var(--bh) * .45);bottom:0;width:var(--stw);translate:-50% 0;border-radius:1px;
  background:linear-gradient(90deg,#4f3217,#9a6c3f 30%,#c7965d 62%,#e6bb7f 80%,#6e4a26);box-shadow:-2px 3px 3px rgba(30,12,2,.35)}
/* the poster board: a hand-cut piece, its cut edge under it, its shadow down-left */
.im-board{position:absolute;left:0;top:0;width:var(--bw);height:var(--bh);rotate:var(--tilt);
  filter:drop-shadow(0 calc(var(--bh) * .03) 0 var(--edge)) drop-shadow(-3px 5px 4px rgba(30,12,2,.45))}
.im-face{position:absolute;inset:0;clip-path:var(--clip);display:grid;place-items:center;overflow:hidden;
  background:var(--cb-fiber),var(--cb-grain),linear-gradient(100deg,rgba(40,16,4,.16),transparent 42%,rgba(255,226,170,.3) 92%),var(--face)}
/* staples where it's tacked to the stick */
.im-face::after{content:'';position:absolute;left:calc(50% - .5px);top:56%;width:1.5px;height:34%;
  background:repeating-linear-gradient(transparent 0 30%,#8c8a84 30% 42%,transparent 42% 70%,#8c8a84 70% 82%,transparent 82%);opacity:.75}
/* the low sun is behind it: the face is a touch in its own shade, warm like the crowd's boards */
.im-face::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(200deg,#ffe2b8,#e8b688 55%,#c98c66)}
.im-ink{position:relative;z-index:1;display:block;max-width:92%;text-align:center;white-space:nowrap;
  font:400 var(--fs,20px)/.98 'Permanent Marker','Homecoming Parade',sans-serif;color:var(--ink);filter:url(#cb-ink);padding-top:.06em}
.im-ink b{display:block;width:max-content;margin:0 auto;font-weight:400}
.im-ink span{display:inline-block;rotate:var(--r,0deg);translate:0 var(--y,0)}
/* a hype sign gets doodled stars */
.im-held.hype .im-face>i{position:absolute;z-index:1;font:400 calc(var(--fs,20px) * .62)/1 'Permanent Marker',sans-serif;color:var(--accent);font-style:normal;filter:url(#cb-ink)}
.im-held.hype .im-face>i:nth-of-type(1){left:5%;top:5%;rotate:-14deg}
.im-held.hype .im-face>i:nth-of-type(2){right:5%;bottom:6%;rotate:12deg}

/* ---------------- 4. the last question ---------------- */
/* the house lights come down: everything but the sign dims a little, a warm pool of light stays on it */
#im-dim{position:fixed;inset:0;z-index:6;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .6s ease-out,visibility 0s .6s;
  background:radial-gradient(ellipse calc(var(--sw,40vw) * .74) calc(var(--sh,50vh) * .8) at calc(var(--sx,30vw) + var(--sw,40vw) / 2) calc(var(--sy,20vh) + var(--sh,50vh) * .46),
    rgba(255,214,150,0) 62%,rgba(255,200,130,.07) 70%,rgba(26,10,22,.3) 86%,rgba(16,6,16,.46) 100%)}
html.im-final #im-dim{visibility:visible;opacity:1;transition:opacity 1.8s ease-in-out,visibility 0s}
/* and the horns' flare (life.js #hornLight, screen-blended under #im-dim) comes down with them, or it blows out white */
#hornLight{transition:opacity .8s ease-out}
html.im-final #hornLight{opacity:.28;transition:opacity 1.2s ease-in-out}
/* the scoreboard stub ticks with the clock */
html.im-final #runclock .rc-stub{animation:im-tick 1s ease-out infinite}
@keyframes im-tick{0%{scale:1.06}22%{scale:1}100%{scale:1}}
@media (prefers-reduced-motion:reduce){html.im-final #runclock .rc-stub{animation:none}}