/* ---------- Les trophées (tickets/T81-les-trophees.md) ----------------------
   The ceremony (a band across the dark, Dark Souls' red), the quiet toast, the
   rain and the words of Wake up, and the trophies in the drawer. Above the page
   but never in its way: nothing here takes a pointer.
   ------------------------------------------------------------------------- */

/* Cinzel 400, capitals only (3 KB, SIL OFL): Trajan's chiselled capital, the
   family the game's Optimus Princeps belongs to, without being its face. */
@font-face {
  font-family: "Cinzel Caps";
  src: url("../fonts/cinzel-caps.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* The way the game does it: no veil over the world, only a band across the
   middle — black, soft at both edges, a sixth of the screen — and the words,
   blood red, matte, no glow, fading in a beat after the band and slowly
   growing for as long as they stay. Nothing else written on it. */
.ceremony {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.2);   /* the world dims a little, so a light page doesn't turn the band grey */
  animation: ceremony-in 0.8s ease both;
}
.ceremony.is-out { animation: ceremony-out 1.2s ease both; }
.ceremony__band {
  width: 100%;
  height: clamp(200px, 32vh, 360px);   /* a third of the screen: thinner read as a strip (asked 07/10) */
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.88) 32%, rgba(0, 0, 0, 0.88) 68%, rgba(0, 0, 0, 0) 100%);
}
.ceremony__words {
  font-family: "Cinzel Caps", var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 9vw, 136px);
  line-height: 1;
  letter-spacing: 0.06em;
  padding-left: 0.06em;   /* the spacing trails the last letter: centred on the ink, not the box */
  white-space: nowrap;
  color: #9e1b14;
  animation: ceremony-words 1.6s ease 0.3s both, ceremony-swell 4.6s cubic-bezier(0.2, 0, 0.4, 1) both;
}
@keyframes ceremony-in { from { opacity: 0; } }
@keyframes ceremony-out { to { opacity: 0; } }
@keyframes ceremony-words { from { opacity: 0; } }
@keyframes ceremony-swell { from { transform: scale(0.96); } to { transform: scale(1.06); } }

/* The toast: the chip's capsule in glass. Liquid Glass the way the house
   already draws it (jam.css), a touch clearer since it floats over the page
   rather than holding a sheet: the page's colour thinned over a strong blur
   that saturates what is under it, the chip's sheen (186°) on top, a light
   fillet along the top edge and a hairline all round. */
.trophy-toast {
  position: fixed;
  left: 50%;
  top: max(16px, env(safe-area-inset-top));   /* trophies.js puts it under the bar */
  z-index: 1000;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 24px 0 16px;
  border-radius: 999px;
  pointer-events: none;
  max-width: calc(100vw - 32px);
  white-space: nowrap;
  color: var(--ink);
  /* The chip's own material, to the letter (more.css .chip): a hairline and a
     faint sheen at 186°, see-through — and behind it a blur that actually has
     something to blur, since the page shows through. An opaque fill read as a
     flat white pill (asked 07/10). */
  border: 1px solid rgba(217, 217, 217, 0.6);
  background: linear-gradient(186deg, rgba(238, 231, 231, 0.2) 28%, rgba(238, 231, 231, 0.4) 76%);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 24px rgba(0, 0, 0, 0.08);
  /* Out of a point: a circle the capsule's height, centred, opened to the
     whole capsule — clip, not width, so nothing inside is laid out again. */
  clip-path: inset(0 calc(50% - 23px) round 999px);
  scale: 0.6;
  opacity: 0;
  animation: toast-open var(--sheet-in) var(--jam-spring) forwards;
}
:root[data-theme="dark"] .trophy-toast {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(186deg, rgba(255, 255, 255, 0.04) 28%, rgba(255, 255, 255, 0.08) 76%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.4);
}
/* The pixel trophy at 24, on the device's pixels. */
.trophy-toast__cup { width: 24px; height: 24px; flex: none; shape-rendering: crispEdges; color: var(--ink); }
/* The Jam's word (T133): its led, lit, where the cup stands — centred in the
   cup's 24 so both capsules open out of the same point. */
.trophy-toast__led { flex: none; margin: 0 8px; background: var(--primary); }
.trophy-toast__words {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  opacity: 0;
  filter: blur(6px);
  animation: toast-focus var(--part-in) var(--ease-soft) calc(var(--part-lead) * 2) forwards;
}
.trophy-toast__words > * { overflow: hidden; text-overflow: ellipsis; }   /* a long title or a desk's reason ends in … rather than leaving the screen */
.trophy-toast__label { font-size: 10px; line-height: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.trophy-toast__name { font-size: 14px; line-height: 16px; }

/* Going: it does not fold back into its point — it lets go. The capsule lifts
   a few pixels, settles a hair smaller and dissolves into a blur, in one
   gesture on the house's leaving curve, the words with it. */
.trophy-toast.is-out { animation: toast-close var(--sheet-out) var(--ease-home) forwards; }

@keyframes toast-open {
  0% { opacity: 0; scale: 0.6; clip-path: inset(0 calc(50% - 23px) round 999px); }
  25% { opacity: 1; }
  100% { opacity: 1; scale: 1; clip-path: inset(0 0 round 999px); }
}
@keyframes toast-close {
  from { opacity: 1; scale: 1; translate: -50% 0; filter: blur(0); clip-path: inset(0 0 round 999px); }
  to { opacity: 0; scale: 0.94; translate: -50% -10px; filter: blur(8px); clip-path: inset(0 0 round 999px); }
}
@keyframes toast-focus { to { opacity: 1; filter: none; } }

/* Wake up: the rain in the paper's place, just over the water (z 0, under
   the page), and the words typed straight onto the page — no box, the green
   of the rain with a halo of the paper behind each letter so they read over
   the drops — in the widest empty stretch of the page (wake-up.js measures
   it), from the page's own left margin. */
.rain {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.rain.is-on { opacity: 0.7; }
.neo {
  position: fixed;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  font: 400 clamp(16px, 1.6vw, 22px)/1.4 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0;
  color: #0e7a34;
  text-shadow: 0 0 2px var(--bg), 0 0 6px var(--bg), 0 0 12px var(--bg);
  transition: opacity 1s ease, top 0.6s ease, left 0.6s ease;
}
:root[data-theme="dark"] .neo { color: #5cff92; text-shadow: 0 0 2px var(--bg), 0 0 8px var(--bg), 0 0 14px rgba(61, 255, 122, 0.35); }
.neo.is-out { opacity: 0; }
.neo p { min-height: 1.4em; white-space: pre; }
.neo p.is-typing::after { content: "█"; margin-left: 2px; animation: neo-caret 1s steps(1) infinite; }
@keyframes neo-caret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ceremony, .ceremony.is-out, .ceremony__words, .neo p.is-typing::after { animation: none; }
  /* The toast only fades: no opening, no lift, no light running. */
  .trophy-toast, .trophy-toast__words { animation: none; opacity: 1; scale: 1; filter: none; clip-path: none; transition: opacity 0.4s ease; }
  .trophy-toast.is-out { animation: none; }
  .trophy-toast.is-out { opacity: 0; }
}

/* The case, its own view in the account (T81): the Updates' row (drawer.css
   .feed), the pixel cup at 24 in the sleeve's 32 square, on the control grey
   a missing sleeve shows. The name under the line, not in italics: it is not
   somebody's word. */
.prize__art { display: grid; place-items: center; }
.prize__cup { width: 24px; height: 24px; shape-rendering: crispEdges; color: var(--ink); }
.prize__name { font-style: normal; }
/* Not on the air yet: the one place --ink-muted is for (CLAUDE.md). */
.prize--locked, .prize--locked .prize__cup { color: var(--ink-muted); }