/* The Gift instrument's room. Not the Music room: no paper hall, no transport, no parts.
   A letter placed on a dark table under one light. Sealed, it is present and closed: a whole seal.
   Available, its seal breaks open at twelve in amber (the house's word for now) and one action
   appears. Opened, the letter steps back and the message is what remains, quieter. */
[data-instrument=gift]{--g-ground:#141a16;--g-light:#26332b;--g-paper:#e9e2d3;--g-ink:#243128;--g-ink2:#5f6a60;--g-text:#ece6d9;--g-muted:#9ea797;--g-now:#d0773f;
  --settle:cubic-bezier(.22,.7,.12,1);
  box-sizing:border-box;min-height:100%;display:grid;place-items:center;padding:32px 20px calc(48px + env(safe-area-inset-bottom));
  background:radial-gradient(110% 75% at 50% 36%,var(--g-light),var(--g-ground) 72%);color:var(--g-text);font-family:var(--machine,system-ui)}
.gift-room{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;width:min(100%,420px)}

/* The letter: paper, a fold, a seal where the fold meets. */
.gift-letter{position:relative;margin:0;width:min(72vw,280px);aspect-ratio:3/4;border-radius:14px;background:var(--g-paper);color:var(--g-ink);
  box-shadow:0 34px 60px -30px #000d,0 2px 0 #0000002e;transform:rotate(-1.4deg);filter:saturate(.82) brightness(.9);
  transition:transform .7s var(--settle),filter .7s var(--settle),box-shadow .7s var(--settle)}
.gift-fold{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gift-edge{fill:none;stroke:var(--g-ink2);stroke-width:1;opacity:.35;vector-effect:non-scaling-stroke}
.gift-flap{fill:none;stroke:var(--g-ink);stroke-width:1.25;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.gift-seal{position:absolute;left:50%;top:47%;width:64px;height:64px;transform:translate(-50%,-50%);overflow:visible}
.seal-whole{fill:var(--g-paper);stroke:var(--g-ink);stroke-width:1.5}
.seal-broken{display:none;fill:none;stroke:var(--g-now);stroke-width:1.8;stroke-linecap:round}
.seal-dot{fill:var(--g-ink)}
.gift-caption{position:absolute;left:11%;right:11%;bottom:10%;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.gift-register{font:8.5px/1 var(--register,monospace);letter-spacing:.22em;text-transform:uppercase;color:var(--g-ink2)}
.gift-title{margin:0;font:400 25px/1.08 var(--work,Georgia,serif);letter-spacing:-.01em;text-wrap:balance}
.gift-from{font:8.5px/1.3 var(--register,monospace);letter-spacing:.06em;color:var(--g-ink2)}
.gift-when{margin:4px 0 0;font:10px/1.4 var(--register,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--g-muted);text-align:center}

/* The one action. It exists only when the Gift can be opened. */
.gift-open{min-height:46px;padding:0 28px;border:1px solid var(--g-now);border-radius:23px;background:var(--g-now);color:#1b120d;
  font:10.5px/1 var(--register,monospace);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;box-shadow:0 12px 30px -12px var(--g-now);
  transition:transform .25s var(--settle)}
.gift-open:hover{transform:translateY(-1px)}
.gift-open:focus-visible{outline:2px solid var(--g-text);outline-offset:3px}
[data-instrument=gift][data-state=sealed] .gift-open{display:none}

/* Available: the letter sits straight in the light, its seal broken open at twelve. */
[data-state=available] .gift-letter{transform:none;filter:none;box-shadow:0 34px 60px -30px #000d,0 0 0 1px color-mix(in srgb,var(--g-now) 38%,transparent),0 0 70px 8px color-mix(in srgb,var(--g-now) 16%,transparent)}
[data-state=available] .seal-whole{stroke:transparent}
[data-state=available] .seal-broken{display:block;stroke-dasharray:120;stroke-dashoffset:0;animation:seal-break 1s var(--settle) both}
[data-state=available] .seal-dot{fill:var(--g-now)}
[data-state=available] .gift-register{color:var(--g-ink)}
[data-state=available] .gift-when{color:var(--g-text)}
@keyframes seal-break{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}

/* Opened: the letter steps back; the message is the object. */
[data-state=opened] .gift-letter,[data-state=opened] .gift-when{display:none}
.gift-message{max-width:32ch;width:100%}
.gift-message[hidden]{display:none}
.gift-message-title{margin:0 0 16px;font:9px/1.3 var(--register,monospace);letter-spacing:.2em;text-transform:uppercase;color:var(--g-muted)}
.gift-words{margin:0;font:400 clamp(22px,6.2vw,30px)/1.36 var(--work,Georgia,serif);letter-spacing:-.005em;color:var(--g-text);white-space:pre-wrap}
.gift-colophon{margin:26px 0 0;font:9px/1.3 var(--register,monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--g-muted)}
[data-changed=available-opened] .gift-letter{display:block;position:absolute;top:0;animation:letter-away .65s var(--settle) forwards}
[data-changed=available-opened] .gift-message{animation:message-in .8s var(--settle) .3s both}
@keyframes letter-away{to{transform:translateY(-28px) scale(.9) rotateX(38deg);opacity:0}}
@keyframes message-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.gift-note{margin:0;max-width:34ch;font:9.5px/1.5 var(--register,monospace);letter-spacing:.04em;color:#e5b28f;text-align:center}
.gift-note:empty{display:none}

@media(prefers-reduced-motion:reduce){
  .gift-letter{transition:none}
  [data-state=available] .seal-broken,[data-changed=available-opened] .gift-letter,[data-changed=available-opened] .gift-message{animation:none}
  [data-changed=available-opened] .gift-letter{display:none}
}