/* OBADIAH'S LETTER, the gate's first arrival (unicorn-factory
   docs/art/OBADIAH_LETTER_SPLASH_2026-10-10.md at 93a9524; design answers
   f9a02bb). Lifted from docs/art/letter-reference/index.html: every rule and
   value as the reference has it, scoped under .g-letter so none of its class
   names (.kick, .fine, .door, .acts and the rest) touches the gate's own
   (answer 3); the image paths point at /assets/letter/. The one property the
   reference's fine print took from the gate's own .fine, its capitals, is
   written in here (answer 3: "The fine print stays in capitals"). */

/* The three layers' z-index is the reference's plus 100 (veil 140, read 145,
   door 150, in the same order): the gate's own menu button stands at 120,
   which the reference's mock gate did not, and the letter, like the brass
   door before it in the reference's look, sits over the whole gate, its menu
   included, under the veil. */

/* shown on a first visit only (answer 6), and always at /letter/ */
.g-letter{display:none}
html.g-letter-first .g-letter,body.g-letter-standalone .g-letter{display:block}
body.g-letter-standalone .g-letter .veil{display:none}

body.g-letter-held{overflow:hidden}
/* ── the splash: over the blurred, darkened gate ── */
.g-letter{--ink:#2a2017;--ink-2:#4a3a2a;--hand:"La Belle Aurore",cursive}
.g-letter .veil{position:fixed;inset:0;z-index:140;background:rgba(23,13,46,.66);-webkit-backdrop-filter:blur(16px) saturate(.8);backdrop-filter:blur(16px) saturate(.8);transition:opacity .7s}
.g-letter .veil.off{opacity:0;pointer-events:none}
.g-letter .door{position:fixed;inset:0;z-index:150;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;align-items:center;padding:max(14px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));gap:10px}
.g-letter .kick{font:500 10px/1 var(--f-m);letter-spacing:.3em;text-transform:uppercase;color:var(--dusk);display:flex;align-items:center;gap:14px;white-space:nowrap}
.g-letter .kick i{display:block;width:44px;height:1px;background:var(--line)}
.g-letter .stage{position:relative;width:min(92vw,600px);display:grid;place-items:center}
@media (orientation:landscape) and (max-height:520px){.g-letter .stage{width:min(70vh,520px)}}
.g-letter .env{position:relative;width:100%;aspect-ratio:1400/961;cursor:pointer;transform:rotate(-2.2deg);transition:transform .5s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent;container-type:inline-size;outline:0}
.g-letter .env:hover{transform:rotate(-1.4deg) translateY(-4px)}
.g-letter .env:focus-visible .face.front{outline:2px solid var(--brass);outline-offset:8px}
.g-letter .face{position:absolute;inset:0;filter:drop-shadow(0 26px 40px rgba(0,0,0,.7))}
.g-letter .face img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.g-letter .face.back{opacity:0}
/* the address, in his hand, printed into the paper */
.g-letter .addr{position:absolute;left:30%;top:42%;width:62%;font:400 clamp(16px,4.2cqi,36px)/1.3 var(--hand);color:var(--ink);mix-blend-mode:multiply;transform:rotate(-.8deg)}
.g-letter .addr small{display:block;font-size:.72em;color:var(--ink-2);margin-top:.12em;padding-left:1.2em}
.g-letter .hint{position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);font:500 10px/1 var(--f-m);letter-spacing:.28em;text-transform:uppercase;color:var(--brass-l);white-space:nowrap;opacity:.9}
.g-letter .acts{display:grid;justify-items:center;gap:10px;text-align:center}
.g-letter .walk{font:500 11px/1 var(--f-m);letter-spacing:.28em;text-transform:uppercase;color:var(--dusk);text-decoration:none;padding:13px 10px;border-bottom:1px solid var(--line);background:none;border-top:0;border-left:0;border-right:0;cursor:pointer}
.g-letter .walk:hover{color:var(--brass-l);border-bottom-color:var(--brass)}
.g-letter .fine{font:400 10px/1.5 var(--f-m);letter-spacing:.08em;color:#8f7fb0;max-width:36ch;margin:0}
/* the seal: two halves of the photograph's own wax, split on opening, over a patch of plain paper */
.g-letter .seal{--sx:0.502;--sy:0.507;--sr:0.086;--a:1.457;position:absolute;left:calc(var(--sx) * 100%);top:calc(var(--sy) * 100%);width:calc(var(--sr) * 2.3 * 100%);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.g-letter .seal i{position:absolute;inset:0;background:url(/assets/letter/envelope-back.webp) no-repeat;background-size:calc(100% / (var(--sr) * 2.3)) auto;
  background-position:calc((var(--sx) - var(--sr) * 1.15) / (1 - var(--sr) * 2.3) * 100%) calc((var(--sy) - var(--sr) * 1.15 * var(--a)) / (1 - var(--sr) * 2.3 * var(--a)) * 100%)}
.g-letter .seal i.b{background-position-x:calc((var(--sx) - var(--sr) * 1.15 - 0.2) / (1 - var(--sr) * 2.3) * 100%);-webkit-mask-image:radial-gradient(circle,#000 56%,transparent 70%);mask-image:radial-gradient(circle,#000 56%,transparent 70%)}
/* opening: the turn (2D, holds everywhere), the crack, the rise, the drop */
.g-letter .door.opening .env{cursor:default;animation:turn .9s cubic-bezier(.4,0,.2,1) forwards,drop .9s 2.6s cubic-bezier(.4,0,.8,.4) forwards}
@keyframes turn{0%{transform:rotate(-2.2deg) scaleX(1)}50%{transform:rotate(-1deg) scaleX(0)}100%{transform:rotate(0) scaleX(1) scale(1.04)}}
.g-letter .door.opening .face.front{animation:swapout .9s steps(1,end) forwards}.g-letter .door.opening .face.back{animation:swapin .9s steps(1,end) forwards}
@keyframes swapout{0%{opacity:1}50%{opacity:0}100%{opacity:0}}@keyframes swapin{0%{opacity:0}50%{opacity:1}100%{opacity:1}}
.g-letter .door.opening .hint{opacity:0;transition:opacity .3s}
.g-letter .door.opening .seal .l{clip-path:polygon(0 0,52% 0,48% 100%,0 100%);animation:crackl .7s 1.3s cubic-bezier(.3,.7,.3,1) forwards}
.g-letter .door.opening .seal .r{clip-path:polygon(52% 0,100% 0,100% 100%,48% 100%);animation:crackr .7s 1.3s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes crackl{to{transform:translate(-18%,10%) rotate(-14deg);opacity:0}}
@keyframes crackr{to{transform:translate(18%,-6%) rotate(12deg);opacity:0}}
.g-letter .sheet{position:absolute;left:12%;width:76%;top:4%;aspect-ratio:1200/1761;transform:translateY(0) scale(.9);opacity:0;z-index:-1;pointer-events:none;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.g-letter .sheet img{width:100%;height:100%;object-fit:contain;display:block}
.g-letter .door.opening .sheet{animation:rise 1.1s 1.7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rise{0%{opacity:0;transform:translateY(0) scale(.9)}30%{opacity:1}100%{opacity:1;transform:translateY(-44%) scale(.94)}}
@keyframes drop{from{transform:scale(1.04)}to{transform:translateY(120vh) rotate(6deg) scale(1.04);opacity:0}}
.g-letter .door.opening{animation:fade .6s 3.3s forwards}
@keyframes fade{to{opacity:0;visibility:hidden}}
/* ── the letter ── */
.g-letter .read{position:fixed;inset:0;z-index:145;overflow:auto;display:none;padding:max(14px,env(safe-area-inset-top)) 0 40px;scroll-behavior:smooth}
.g-letter .read.on{display:block}
.g-letter .read-in{width:min(94vw,620px);margin:0 auto;display:grid;gap:22px;justify-items:center;padding-bottom:30vh}
.g-letter .paper{position:relative;width:100%;aspect-ratio:1200/1761;container-type:inline-size;filter:drop-shadow(0 22px 36px rgba(0,0,0,.6))}
.g-letter .paper img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.g-letter .text{position:absolute;left:10%;top:8%;width:80%;font:400 clamp(12px,3.3cqi,26px)/1.5 var(--hand);color:var(--ink);mix-blend-mode:multiply}
.g-letter .text p{margin:0 0 .55em}
.g-letter .text .sal{margin-bottom:.9em}
.g-letter .text .sig{margin-top:.9em;font-size:1.15em;padding-left:55%}
.g-letter .text .ind{padding-left:1.6em}
.g-letter .w{display:inline-block;white-space:pre;--p:0;-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--p) * 108% - 8px),transparent calc(var(--p) * 108%));mask-image:linear-gradient(90deg,#000 calc(var(--p) * 108% - 8px),transparent calc(var(--p) * 108%))}
.g-letter .read.done .w{--p:1!important}
.g-letter .nib{position:absolute;width:3.4cqi;height:3.4cqi;pointer-events:none;opacity:0;transition:left .07s linear,top .07s linear,opacity .3s;transform:translate(-8%,-74%) rotate(-28deg);z-index:2}
.g-letter .paper.writing .nib{opacity:1}
.g-letter .nib svg{width:100%;height:100%;display:block}
.g-letter .ctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.g-letter .btn{font:500 11px/1 var(--f-m);letter-spacing:.24em;text-transform:uppercase;color:var(--bone);background:rgba(23,13,46,.5);border:1px solid var(--line);border-radius:999px;padding:12px 18px;cursor:pointer;text-decoration:none}
.g-letter .btn:hover{border-color:var(--brass);color:var(--brass-l)}
.g-letter .btn.skip{position:sticky;top:6px;z-index:3;justify-self:end;background:rgba(23,13,46,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:10px;padding:10px 14px}
.g-letter .read.done .btn.skip{visibility:hidden}
.g-letter .btn.go{background:linear-gradient(180deg,#FF5CA5,#FF3D9A 52%,#D91E70);border-color:transparent;color:#fff}
.g-letter .disc{font:400 10px/1.5 var(--f-m);letter-spacing:.08em;color:#a999c4;text-align:center;max-width:44ch;margin:0}
@media (prefers-reduced-motion:reduce){.g-letter .door.opening .env,.g-letter .door.opening .sheet,.g-letter .door.opening .seal i,.g-letter .door.opening .face,.g-letter .door.opening{animation-duration:.01s!important;animation-delay:0s!important}.g-letter .env,.g-letter .env:hover{transition:none;transform:none}.g-letter .read{scroll-behavior:auto}}

/* the gate's own fine-print capitals, as the reference rendered them */
.g-letter .fine{text-transform:uppercase}

/* Josh, 2026-10-10: the letter showed behind the rising sheet ("the paper in
   front of the paper"). The read comes on with the voice at 2.6 s; it now stays
   clear until the door's own fade begins (3.3 s) and comes up over the same
   0.6 s, so the sheet dissolves into the letter instead of standing over it */
.g-letter .door.opening~.read.on{animation:readin .6s .7s backwards}
@keyframes readin{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.g-letter .door.opening~.read.on{animation:none}}