/* /memento-mori. Always dark whatever the site theme; this page's colours live here, in :root.
   The dawn is the site's own navy warming toward its coral. */
:root{--m-black:#000;--m-white:#fff;--m-ivory:#f4f3ef;--m-muted:#92a1a8;--m-navy:#0c2835;--m-coral:#e4566e;--m-gold:#f2b880}
html,body.memento{background:var(--m-black);color:var(--m-white);height:100%;margin:0;overflow:hidden}
body.memento{font-family:var(--sans);-webkit-font-smoothing:antialiased;cursor:default}

/* The dawn: a glow rising from the bottom edge, faded in and out by memento.js. */
.dawn{position:fixed;inset:0;opacity:0;pointer-events:none;transition:opacity 7s ease-in-out;
 background:radial-gradient(120% 70% at 50% 115%,var(--m-gold) 0%,var(--m-coral) 18%,var(--m-navy) 55%,var(--m-black) 100%)}
.memento.is-dawn .dawn{opacity:.85}
.memento.is-dusk .dawn{opacity:0;transition:opacity 2.6s ease-in-out}

/* Everything sits stacked in the middle of the screen and takes its turn. */
.stage{position:fixed;inset:0;display:grid;place-items:center;padding:24px}
.stage>*{grid-area:1/1;margin:0}

.title{font-size:clamp(34px,7vw,96px);font-weight:500;letter-spacing:-.045em;line-height:1.05;text-align:center;text-wrap:balance}
.word{opacity:0;transition:opacity .9s ease-out}
.word.on{opacity:1}
.title.gone .word{opacity:0;transition:opacity .45s ease-in}

.poem{text-align:center;max-width:34em;font-size:clamp(16px,2.3vw,26px);line-height:1.5;color:var(--m-ivory)}
.poem-title{font:11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--m-muted);margin:0 0 1.6em;opacity:0;transition:opacity 2.2s ease}
.poem .line{margin:0}
/* Each word rises in gently from below, as it is spoken (timing in js/memento.js). */
.poem .w{display:inline-block;opacity:0;transform:translateY(.3em);transition:opacity .9s ease,transform .9s ease}
.poem .bookend{opacity:0;transform:translateY(.3em);transition:opacity 2.2s ease,transform 2.2s ease}
/* The title, first and last lines and the author arrive together at the end (js/memento.js). */
.poem .attribution{margin-top:1.4em;font:12px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--m-muted);opacity:0;transform:translateY(.3em);transition:opacity 1.8s ease,transform 1.8s ease}
.poem .on{opacity:1;transform:none}
/* The whole poem fades as one block, so word-split lines and whole lines go at the same rate. */
.poem.gone{opacity:0;transition:opacity 2.6s ease-in}

/* The close: Philippe de Champaigne's Still Life with a Skull (c. 1671): the tulip (life), the skull
   (death), the hourglass (time), its darks set to true black (assets/memento-still-life.jpg) and lit
   as if by one candle. The candle is a transparency mask, not a dark overlay: outside its light the
   painting is simply absent, so whatever is behind (the last of the dawn, then black) shows through
   and no edge or rectangle can appear. --lit is the radius of full light. It lights the skull,
   holds, and everything fades. Feathered edges are a second mask layer. */
@property --lit{syntax:'<percentage>';inherits:false;initial-value:20%}
.vanitas{width:min(94vw,112vh);opacity:0;transition:opacity 3s ease-out}
.vanitas-frame{--lit:20%;transition:--lit 3.6s ease-out;
 -webkit-mask-image:radial-gradient(circle closest-side at 50% 52%,#000 var(--lit),rgba(0,0,0,.5) calc(var(--lit) + 28%),rgba(0,0,0,.14) calc(var(--lit) + 58%),transparent calc(var(--lit) + 92%)),
  linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 11%,#000 89%,transparent);
 -webkit-mask-composite:source-in,source-in;
 mask-image:radial-gradient(circle closest-side at 50% 52%,#000 var(--lit),rgba(0,0,0,.5) calc(var(--lit) + 28%),rgba(0,0,0,.14) calc(var(--lit) + 58%),transparent calc(var(--lit) + 92%)),
  linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 11%,#000 89%,transparent);
 mask-composite:intersect}
.vanitas img{display:block;width:100%;height:auto;filter:saturate(.84) brightness(.92);animation:candle 5.3s ease-in-out infinite}
.vanitas.on{opacity:1}
.vanitas.on .vanitas-frame{--lit:38%}
.vanitas.gone{opacity:0;transition:opacity 4.4s ease-in}
/* A barely-there flicker, ±2% brightness. */
@keyframes candle{0%,100%{filter:saturate(.84) brightness(.92)}23%{filter:saturate(.84) brightness(.9)}41%{filter:saturate(.84) brightness(.93)}67%{filter:saturate(.84) brightness(.905)}83%{filter:saturate(.84) brightness(.925)}}

/* The last words, set like a Roman inscription: spaced capitals, held as the final frame. */
.coda{margin:0;font:400 clamp(20px,3.6vw,44px)/1.2 var(--sans);letter-spacing:.34em;margin-right:-.34em;text-transform:uppercase;color:var(--m-ivory);opacity:0;transition:opacity 3.2s ease-in-out}
.coda.on{opacity:1}
.replay-hint{position:fixed;left:0;right:0;bottom:28px;margin:0;text-align:center;font:10px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--m-muted);opacity:0;transition:opacity 1.5s ease}
.memento.is-done{cursor:pointer}
.memento.is-done .replay-hint{opacity:.45}

/* The start: the site's skull glyph on black, on every visit, warning that it plays with sound.
   Tapping it starts everything, with sound. */
.start{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:22px;margin:0;padding:0;border:0;background:var(--m-black);color:var(--m-muted);cursor:pointer;opacity:1;transition:opacity 1s ease}
.start[hidden]{display:none}
.start.gone{opacity:0;pointer-events:none}
.start .glyph{width:44px;opacity:.5;transition:opacity .4s}
.start .glyph .t{fill:var(--m-ivory)}
.start .glyph .f{fill:var(--m-muted)}
.start .glyph .fl{fill:#1a1d1f}
.start:hover .glyph,.start:focus-visible .glyph{opacity:.9}
.start:focus-visible{outline:none}
.start-hint{font:10px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.45}
/* The warning under it. */
.start-sound{margin-top:-16px;font:9px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.3}

/* The way home: the homepage's wordmark (site.css .brand-wordmark) in its place there, top left, in
   this page's colours. It fades in a while after "Memento mori" settles, and leaves with a replay. */
.home{position:fixed;top:26px;left:5%;z-index:2;color:var(--m-ivory);text-decoration:none;opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s 1.2s}
.home .dot{color:var(--m-coral)}
.home .tld{color:var(--m-muted)}
.memento.is-done .home{opacity:.85;visibility:visible;transition:opacity 2.4s ease 1.6s,visibility 0s 1.6s}
.memento.is-done .home:hover,.memento.is-done .home:focus-visible{opacity:1;transition:opacity .3s}
@media(max-width:650px){.home{top:22px}}

/* Replay: the last frame goes to black (is-leaving), then everything resets with no transitions. */
.stage,.replay-hint{transition:opacity 1.5s ease}
.memento.is-leaving .stage,.memento.is-leaving .replay-hint,.memento.is-leaving .home{opacity:0!important;transition:opacity 1.2s ease-in}
.memento.is-resetting,.memento.is-resetting *{transition:none!important}

/* Mute, bottom right; the voice's credit sits above it and goes when muted. */
.sound{position:fixed;right:10px;bottom:10px;z-index:2;display:flex;flex-direction:column;align-items:center}
.sound[hidden]{display:none}
.mute{width:36px;height:36px;display:grid;place-items:center;margin:0;padding:0;border:0;background:none;color:var(--m-muted);opacity:.4;cursor:pointer;transition:opacity .3s}
.mute:hover,.mute:focus-visible{opacity:.9}
.mute:focus-visible{outline:1px solid var(--m-muted);outline-offset:-4px}
.mute svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mute .spk{fill:currentColor;stroke:none}
.mute .x,.is-muted .mute .waves{display:none}
.is-muted .mute .x{display:inline}
.voice-credit{font:9px/1 var(--mono);letter-spacing:.06em;color:var(--m-muted);text-decoration:none;opacity:.35;transition:opacity .3s}
.voice-credit:hover,.voice-credit:focus-visible{opacity:.8}
.is-muted .voice-credit{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}

/* Reduced motion: no sequence. Everything is shown at once, in reading order. */
@media(prefers-reduced-motion:reduce){
 html,body.memento{overflow:auto}
 .stage{position:static;display:flex;flex-direction:column;align-items:center;gap:72px;padding:72px 24px}
 .word,.poem-title,.poem .w,.poem .bookend,.poem .attribution,.vanitas,.coda{opacity:1!important;transform:none!important;transition:none!important}
 .dawn{display:none}
 .vanitas img{animation:none}
 .vanitas-frame{--lit:96%!important;transition:none!important}
 .replay-hint,.start,.sound{display:none!important}
 .home{position:absolute;opacity:.85;visibility:visible}
}