/* screens/code.css: owned by WP6. SPEC 3.4 (Code: "Your backstage pass").
   Title shot (first run): a scalloped notice card (Taiko notice) with brand bunting on the top corners, a warm
   paper with a halftone corner, the recovery code on a gig ticket (ADMIT ONE stub, "Shown once" hanko), Copy and
   "I saved it". Menu shot (Settings -> New recovery code): the same content as a two-column grid in the stall body.
   #code-value's textContent stays exactly the code (the ticket labels are pseudo-elements).
   Rules: transform / opacity only in animations; no filter, no backdrop-filter; text >= .875rem. */

/* the ticket is pressed onto the card: a short stamp that stays inside the card (the paper clips; a full ff-stamp
   at scale 1.9 would reach past --safe-title-r for its first frames) */
@keyframes ffw-ticket-in { 0% { opacity: 0; transform: translateY(-.7rem) scale(1.14) rotate(-2.5deg); } 16% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* ============================================================================ shared */
#code .notice__paper { display: grid; align-content: start; row-gap: 1rem; scrollbar-gutter: auto; scrollbar-width: thin; isolation: isolate; }
#code .notice__kicker {
  justify-self: start; margin: 0; padding: .1rem .75rem .12rem .45rem; gap: .35rem; rotate: -2deg;
  box-shadow: 0 .16rem 0 var(--ink); -webkit-text-stroke: max(1.5px, .08em) var(--ink); paint-order: stroke fill;
}
#code .notice__kicker::before {
  content: ''; flex: none; width: 1.05rem; height: 1.2rem;
  background: url(../../img/mascot/flame-icon.svg) 50% 100% / contain no-repeat;
}
#code .notice__paper h2 { margin: -.15rem 0 0; font-size: var(--fs-h1); line-height: 1.05; }
#code .body { margin: 0; font: 800 var(--fs-body)/1.45 var(--font-body); color: var(--ink-2); text-wrap: pretty; }

/* ---------------------------------------------------------------------------- the gig ticket */
#code .ticket--code { margin: .35rem 0 .2rem; rotate: -.6deg; }
#code .ticket--code::after { translate: .25rem .4rem; background: var(--cobalt); }      /* registration plate, not a grey drop */
#code .ticket--code::before { z-index: -1; }
#code .ticket__in {
  height: 7.4rem; padding: .95rem 0 .95rem 1.5rem; gap: 1rem;
  background:
    linear-gradient(90deg, transparent calc(100% - 4.6rem - 1.2rem), rgb(44 15 21 / .05) calc(100% - 4.6rem - 1.2rem)),
    radial-gradient(9rem 5rem at 0 0, rgb(255 210 58 / .28), transparent 70%),
    url(../../img/svg/paper-grain.webp) 0 0 / 16rem, var(--grad-ivory);
}
#code .ticket--code .code-value {
  margin: 0; font-size: clamp(1.05rem, (100cqi - 8.6rem) / 16.6, 1.6rem); letter-spacing: .08em; line-height: 1.2;
  overflow-wrap: normal; white-space: nowrap;
}
#code-value::before, #code-value::after {
  display: block; font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.2; white-space: nowrap;
  user-select: none; -webkit-user-select: none;
}
#code-value::before { content: 'Recovery code'; margin-bottom: .35rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--red-deep); }
#code-value::after { content: 'Keep it secret · Keep it safe'; margin-top: .4rem; font-weight: 800; letter-spacing: .02em; color: var(--ink-2); }
#code .ticket__stub {                                     /* the printed text is redrawn as two rotated lines */
  width: 4.4rem; margin: -.95rem 0; padding: .5rem .3rem; font-size: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  writing-mode: vertical-rl; text-orientation: mixed;
  border-left: .22rem dashed rgb(44 15 21 / .55);
  box-shadow: inset .3rem 0 0 rgb(0 0 0 / .12);
}
#code .ticket__stub::before, #code .ticket__stub::after { white-space: nowrap; line-height: 1; }
#code .ticket__stub::before { content: 'ADMIT ONE'; font: 700 1.2rem/1 var(--font-display); font-stretch: 85%; letter-spacing: .04em; }
#code .ticket__stub::after { content: 'AISU HERO'; font: 900 var(--fs-small)/1 var(--font-body); letter-spacing: .16em; color: var(--f2); }
/* the "Shown once" hanko, stamped on the ticket's top edge */
#code .code-stamp {
  position: absolute; z-index: 2; right: 6.4rem; top: -1.7rem; width: 4.5rem; height: 4.5rem; padding: 0 .4rem;
  rotate: -14deg; background: rgb(255 250 240 / .82); font-size: var(--fs-small); line-height: 1; pointer-events: none;
}

/* ---------------------------------------------------------------------------- message and buttons */
#code .form-msg { min-height: 2.5rem; margin: 0; color: var(--ink-2); }
body:not([data-shot="menu"]) #code .form-msg:empty { display: none; }
#code .form-msg:not(:empty):not(.err) {
  justify-self: start; padding: .3rem .8rem .3rem .45rem; gap: .5rem;
  border: var(--ow-s) solid var(--ink); border-radius: var(--r-pill); background: var(--paper); color: var(--ink);
  font-weight: 900; box-shadow: var(--drop-s);
}
#code .form-msg:not(:empty):not(.err)::before {
  content: ''; flex: none; width: 1.2rem; height: 1.2rem; background: url(../../img/svg/check.svg) 50% 50% / contain no-repeat;
}
#code .row { gap: 1rem; flex-wrap: nowrap; }
#btn-copy-code { min-height: 3rem; padding-inline: 1rem 1.25rem; gap: .65rem; }
#btn-copy-code .copy-ico {
  position: relative; isolation: isolate; flex: none; width: 1.05rem; height: 1.25rem; translate: .18rem .14rem;
  border: .17rem solid var(--ink); border-radius: .28rem; background: var(--paper);
}
#btn-copy-code .copy-ico::before {
  content: ''; position: absolute; z-index: -1; left: -.5rem; top: -.5rem; width: 100%; height: 100%;
  border: .17rem solid var(--ink); border-radius: .28rem; background: var(--ivory-2);
}
#btn-copy-code.is-copied {
  background: url(../../img/svg/paper-grain.webp) 0 0 / 16rem, linear-gradient(180deg, #4FD68A, var(--ok) 55%, #128A45);
  color: var(--ivory); -webkit-text-stroke: max(1.5px, .12em) var(--ink); paint-order: stroke fill;
}
#btn-copy-code.is-copied .copy-ico { translate: 0 0; width: 1.3rem; height: 1.3rem; border: 0; background: url(../../img/svg/check.svg) 50% 50% / contain no-repeat; }
#btn-copy-code.is-copied .copy-ico::before { display: none; }
#btn-code-done { min-height: 3.5rem; padding: .3rem 1.1rem .4rem 1.6rem; gap: .7rem; font-size: 1.35rem; }
#btn-code-done::before {                                  /* two flame tips on the top-right corner (as the title prompt) */
  content: ''; position: absolute; right: .9rem; top: -1.4rem; width: 2.4rem; height: 1.9rem; pointer-events: none;
  background: url(../../img/svg/flame-flame-rim.svg) 100% 100% / auto 1.9rem no-repeat, url(../../img/svg/flame-blaze-rim.svg) 0 100% / auto 1.3rem no-repeat;
}

/* hint bar: the Esc note gets a small lock */
#code .hint--note::before {
  content: ''; flex: none; width: 1.05rem; height: 1.15rem; margin-right: .2rem;
  background: url(../../img/svg/lock.svg) 50% 50% / contain no-repeat;
}

/* ============================================================================ title shot: the notice card */
body:not([data-shot="menu"]) #code .notice { top: max(11vh, 6.5rem); }
body:not([data-shot="menu"]) #code .notice__paper {
  padding: .7rem 1.25rem 1.05rem;
  background:
    radial-gradient(24rem 13rem at 100% 0, rgb(255 210 58 / .26), transparent 70%),
    radial-gradient(20rem 12rem at 0 100%, rgb(35 64 255 / .07), transparent 70%),
    url(../../img/svg/paper-grain.webp) 0 0 / 16rem, var(--ivory);
  background-clip: padding-box; background-origin: padding-box;
}
body:not([data-shot="menu"]) #code .notice__paper::before {     /* halftone dots fading out of the bottom-right corner */
  content: ''; position: absolute; z-index: -1; right: 0; bottom: 0; width: 17rem; height: 12rem; pointer-events: none;
  background: rgb(232 32 47 / .16);
  -webkit-mask: url(../../img/svg/pat-halftone.svg) 0 0 / .9rem .9rem, radial-gradient(closest-corner at 100% 100%, #000 10%, transparent);
  -webkit-mask-composite: source-in;
  mask: url(../../img/svg/pat-halftone.svg) 0 0 / .9rem .9rem, radial-gradient(farthest-side at 100% 100%, #000 15%, transparent);
  mask-composite: intersect;
}
/* the bichito peeks from behind the card's right edge, beside the copy */
body:not([data-shot="menu"]) #code .notice .mascot-anchor { left: calc(100% - 1.9rem); top: 8.2rem; width: 6rem; height: 7rem; }
body:not([data-shot="menu"]) #code .notice__bunting { top: -2.4rem; }

/* entrance: the card drops in with its bunting, the ticket is stamped, then the hanko; one shine sweeps the ticket */
@media (prefers-reduced-motion: no-preference) {
  body:not([data-shot="menu"]) #code .notice { --anim: ff-drop-in var(--t-stage) var(--spring-soft) var(--move-at, 0ms) backwards; animation: var(--anim); transform-origin: 50% -30%; }
  body[data-shot="menu"] #code .notice__paper > * { --anim: ff-rise-in var(--t-base) var(--ease-out) calc(var(--move-at, 0ms) + var(--rise-at, 0ms)) backwards; animation: var(--anim); }
  body[data-shot="menu"] #code .notice__paper > :nth-child(2) { --rise-at: 35ms; }
  body[data-shot="menu"] #code .notice__paper > :nth-child(3) { --rise-at: 70ms; }
  body[data-shot="menu"] #code .notice__paper > :nth-child(5) { --rise-at: 105ms; }
  body[data-shot="menu"] #code .notice__paper > :nth-child(6) { --rise-at: 120ms; }
  #code .notice__paper > .ticket--code { --anim: ffw-ticket-in 520ms var(--spring-stamp) calc(var(--move-at, 0ms) + 160ms) backwards; animation: var(--anim); }
  #code .code-stamp { --anim: ff-stamp 480ms var(--spring-stamp) calc(var(--move-at, 0ms) + 480ms) backwards; animation: var(--anim); }
  #code .ticket.shine .ticket__in::after { --at: calc(var(--move-at, 0ms) + 560ms); }
  #code .hintbar { --anim: ff-rise-in var(--t-base) var(--ease-out) calc(var(--move-at, 0ms) + 260ms) backwards; animation: var(--anim); }
}
@media (prefers-reduced-motion: reduce) { #code .ticket.shine .ticket__in::after { display: none; } }
body.lowfx #code .ticket.shine .ticket__in::after { display: none; }

/* narrow title shot (the card is narrower than 34rem): the ticket stub goes back to a slim strip */
@container (max-width: 34rem) {
  #code .ticket__stub { width: 3.6rem; }
  #code .code-stamp { right: 4.8rem; }
}

/* ============================================================================ menu shot: content of the stall */
body[data-shot="menu"] #code .notice { isolation: isolate; }
body[data-shot="menu"] #code .notice__paper {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "title ticket" "body ticket" "body msg" "body row";
  column-gap: 1.6rem; row-gap: .6rem; padding: 1.75rem 1.35rem 1rem;
}
body[data-shot="menu"] #code .notice__kicker { display: none; }
body[data-shot="menu"] #code .notice__paper h2 { grid-area: title; font-size: var(--fs-h2); margin: 0; }
body[data-shot="menu"] #code .body { grid-area: body; align-self: start; }
body[data-shot="menu"] #code .ticket--code { grid-area: ticket; align-self: center; margin: .6rem 0 .2rem; }
body[data-shot="menu"] #code-msg { grid-area: msg; align-self: end; min-height: 2.3rem; }
body[data-shot="menu"] #code .row { grid-area: row; justify-content: flex-end; }
body[data-shot="menu"] #btn-code-done { min-height: 3rem; font-size: var(--fs-btn); }
body[data-shot="menu"] #btn-code-done::before { top: -1.2rem; }
body[data-shot="menu"] #code .ticket__in { height: 7rem; }
body[data-shot="menu"] #code .code-stamp { width: 4rem; height: 4rem; top: -1.5rem; }
@container (max-width: 50rem) {
  body[data-shot="menu"] #code .notice__paper { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "title" "ticket" "msg" "row"; }
  body[data-shot="menu"] #code .body { display: none; }
}