/* ============================================================
   Abdulrahman & Salma — a black & gold envelope.
   Tap it: the song starts, it opens, confetti, the invite.
   Beat-timed effects use 0.62s (≈ the song's tempo).
   ============================================================ */
:root {
  --void: #060606;
  --ice: #f7f5f0;
  --dim: #a8a39a;
  --faint: #6c675e;
  --gold: #f5c542;
  --gold-soft: #ffe08a;
  --gold-deep: #b8860b;
  --pink: #ff2e88;

  --f-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --f-script: 'Mr Dafoe', 'Brush Script MT', cursive;
  --f-text: 'Outfit', 'Helvetica Neue', Arial, sans-serif;

  --cy: 44vh;     /* ring centre — kept in sync with script.js */
  --R: 120px;     /* ring radius — set by script.js */
  --beat: .62s;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  background: var(--void);
  color: var(--ice);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body:not(.revealed) { overflow: hidden; height: 100vh; height: 100dvh; }

/* ---------- layers ---------- */
#confetti { position: fixed; inset: 0; z-index: 9; display: block; width: 100%; height: 100%; pointer-events: none; }
#spot {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(circle 380px at var(--mx, 50%) var(--my, 35%),
              rgba(245, 197, 66, .16), rgba(255, 255, 255, .03) 45%, transparent 70%);
  transition: opacity 1.2s ease 1s;
}
.revealed #spot { opacity: 1; }
.vig { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 125% 85% at 50% 45%, transparent 42%, rgba(0, 0, 0, .92) 100%); }

/* ---------- intro: the envelope ---------- */
.intro {
  position: fixed; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1.6rem, 6vh, 2.6rem);
  padding: 24px 16px;
  background: radial-gradient(ellipse at 50% 48%, #1d1a12, var(--void) 70%);
  transition: opacity .8s ease, visibility 0s linear .8s;
}
.intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.intro .eyebrow {
  margin: 0;
  font-family: var(--f-display); font-size: .95rem; letter-spacing: .5em; text-transform: uppercase;
  color: var(--gold); text-shadow: 0 0 14px rgba(245, 197, 66, .55);
  transition: opacity .4s;
}
.intro .hint {
  margin: 0; text-align: center;
  font-weight: 300; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
  animation: hintPulse 1.24s ease-in-out infinite;
  transition: opacity .4s;
}
.intro .hint small { display: block; margin-top: .4rem; font-size: .65rem; letter-spacing: .32em; color: var(--faint); }
.intro.is-opening .hint, .intro.is-opening .eyebrow { opacity: 0; animation: none; }
@keyframes hintPulse { 0%, 100% { opacity: .55; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.envelope {
  position: relative;
  width: min(84vw, 380px);
  aspect-ratio: 3 / 2;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  perspective: 1200px;
  animation: envFloat 3.2s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
.envelope:focus-visible { outline: 2px solid var(--gold); outline-offset: 12px; border-radius: 10px; }
.envelope.is-open { animation: none; }
@keyframes envFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }

.env__back {
  position: absolute; inset: 0; z-index: 1;
  border-radius: 10px;
  background: linear-gradient(160deg, #1f1f1f, #0d0d0d);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .65), 0 0 0 1px rgba(245, 197, 66, .5), 0 0 60px rgba(245, 197, 66, .14);
}

.env__card {
  position: absolute; left: 6%; right: 6%; top: 6%; height: 88%; z-index: 2;
  display: flex; justify-content: center;
  padding-top: 7%;
  border-radius: 6px;
  background: linear-gradient(180deg, #fbf8f0, #efe8d6);
  box-shadow: 0 0 0 1px rgba(184, 134, 11, .35), 0 10px 30px rgba(0, 0, 0, .35);
  color: #0a0a0a;
  transition: transform 1s cubic-bezier(.2, .8, .2, 1) .7s;
}
.envelope.is-open .env__card { transform: translateY(-62%); }
.env__card-inner { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; }
.env__card small { font-size: .62rem; font-weight: 600; letter-spacing: .4em; text-transform: uppercase; color: var(--gold-deep); }
.env__card b { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 10vw, 2.8rem); line-height: 1; letter-spacing: .04em; }
.env__card b i { font-family: var(--f-script); font-style: normal; color: var(--gold-deep); font-size: .9em; }
.env__card em { font-style: normal; font-weight: 700; font-size: .95rem; letter-spacing: .12em; color: #3a3a3a; }

/* pocket + flap: the clip-path lives on ::before so the wrapper's
   drop-shadow can draw the gold edge along the diagonal */
.env__pocket {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  filter: drop-shadow(0 -1px 0 rgba(245, 197, 66, .7));
}
.env__pocket::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 10px;
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(170deg, #202020, #0e0e0e);
}

.env__flap {
  position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 4;
  transform-origin: top center;
  filter: drop-shadow(0 1.5px 0 rgba(245, 197, 66, .85)) drop-shadow(0 8px 10px rgba(0, 0, 0, .5));
  transition: transform .7s cubic-bezier(.4, 0, .2, 1) .25s, z-index 0s linear .6s;
}
.env__flap::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 10px 10px 0 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #2a2a2a, #141414);
}
.envelope.is-open .env__flap { transform: rotateX(180deg); z-index: 1; }

.env__seal {
  position: absolute; left: 50%; top: 60%; z-index: 5;
  width: 22%; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff0bf, var(--gold) 45%, var(--gold-deep));
  box-shadow: 0 4px 14px rgba(0, 0, 0, .55), inset 0 0 0 3px rgba(255, 255, 255, .28), 0 0 24px rgba(245, 197, 66, .35);
  color: #3a2a00;
  font-family: var(--f-display); font-size: clamp(.95rem, 4.4vw, 1.25rem); letter-spacing: .02em;
  transform: translate(-50%, -50%);
  animation: sealBeat .62s ease-out infinite;
  transition: transform .45s ease, opacity .45s ease;
}
.env__seal i { font-family: var(--f-script); font-style: normal; margin: 0 .04em; }
.envelope.is-open .env__seal { animation: none; opacity: 0; transform: translate(-50%, -50%) scale(1.7) rotate(25deg); }
@keyframes sealBeat { 0% { transform: translate(-50%, -50%) scale(1.09); } 40%, 100% { transform: translate(-50%, -50%) scale(1); } }

/* ---------- ticker ---------- */
.ticker {
  position: fixed; top: 0; left: 0; right: 0; z-index: 6; overflow: hidden;
  padding: .55rem 0;
  padding-top: calc(.55rem + env(safe-area-inset-top, 0px));
  background: var(--gold); color: #0a0a0a;
  transform: translateY(-110%);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1) 1.4s;
}
.revealed .ticker { transform: none; }
.ticker__track { display: flex; width: max-content; animation: slide 26s linear infinite; }
.ticker span { font-family: var(--f-display); font-size: .82rem; letter-spacing: .28em; text-transform: uppercase; white-space: nowrap; padding-right: 2.4rem; }
.ticker span b { font-weight: 400; color: var(--gold); background: #0a0a0a; padding: .15em .5em; border-radius: 4px; }
@keyframes slide { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- mute ---------- */
.mute {
  position: fixed; z-index: 8; display: none; place-items: center;
  right: max(1rem, env(safe-area-inset-right, 0px));
  top: calc(env(safe-area-inset-top, 0px) + 3.2rem);
  width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(6, 6, 6, .6); border: 1px solid rgba(245, 197, 66, .55); color: var(--ice);
  box-shadow: 0 0 18px rgba(245, 197, 66, .35);
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease;
}
.revealed .mute { display: grid; }
.mute:hover { transform: translateY(-1px); }
.mute:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mute svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mute .body { fill: currentColor; stroke: none; }
.mute .slash { display: none; stroke: var(--pink); }
.mute.is-muted .wave { display: none; }
.mute.is-muted .slash { display: block; }
.mute.is-muted { color: var(--dim); border-color: rgba(168, 163, 154, .3); box-shadow: none; }

/* ---------- the invitation ---------- */
.invite {
  position: relative; z-index: 5;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(5rem, 12vw, 7rem) 1.25rem clamp(2.5rem, 7vw, 4rem);
}
.invite > * { opacity: 0; }
.revealed .invite > * { opacity: 1; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }

.pre {
  max-width: 21em; margin: 0 0 .8rem;
  font-weight: 300; font-size: clamp(.98rem, 3.6vw, 1.15rem); line-height: 1.5;
  color: var(--dim); text-wrap: balance;
}
.pre b { font-family: var(--f-display); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--pink); }
.pre em { font-style: normal; font-weight: 500; color: var(--ice); }
.revealed .pre { animation: rise .9s cubic-bezier(.2, .8, .2, 1) .75s both; }

/* names: stacked condensed caps, white with a gold glow, hit on the beat */
#lockup { will-change: transform; padding: .1em .2em .2em; }
.names {
  margin: 0;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  line-height: .92;
}
.names__a, .names__b {
  display: block; white-space: nowrap; color: #fff;
  text-shadow: 0 0 2px #fff, 0 0 12px rgba(255, 224, 138, .8), 0 0 30px rgba(245, 197, 66, .6), 0 0 70px rgba(245, 197, 66, .35);
}
.names__a { font-size: clamp(3.3rem, 16.5vw, 9.5rem); letter-spacing: .01em; }
.names__b { font-size: clamp(4.2rem, 21vw, 11rem); letter-spacing: .03em; }
.names__amp {
  font-family: var(--f-script); text-transform: none;
  font-size: clamp(3rem, 13vw, 6.5rem); line-height: .9; margin: .05em 0 -.02em;
  color: var(--gold-soft);
  text-shadow: 0 0 2px #fff, 0 0 10px var(--gold), 0 0 26px var(--gold), 0 0 60px rgba(245, 197, 66, .6);
}
.names .ch { display: inline-block; opacity: 0; transform: translateY(-70%) scaleY(1.6); }
.revealed .names .ch { animation: dropIn .55s cubic-bezier(.2, .9, .1, 1) both; animation-delay: calc(.1s + var(--i) * .045s); }
.revealed .names__amp { animation: ampIn 1s cubic-bezier(.18, 1.1, .3, 1.25) .6s both, flick 1.5s steps(1, end) .6s both; }
.names.is-strut .ch { animation: strut .5s cubic-bezier(.2, .9, .1, 1) both; animation-delay: calc(var(--i) * .025s); opacity: 1; transform: none; }
@keyframes dropIn { 0% { opacity: 0; transform: translateY(-70%) scaleY(1.6); } 60% { opacity: 1; transform: translateY(6%) scaleY(.9); } 100% { opacity: 1; transform: none; } }
@keyframes ampIn { from { transform: scale(.3) rotate(-20deg); filter: blur(10px); } to { transform: none; filter: blur(0); } }
@keyframes flick { 0% { opacity: 0; } 5% { opacity: 1; } 9% { opacity: .25; } 12% { opacity: 1; } 24% { opacity: .4; } 26% { opacity: 1; } 47% { opacity: .6; } 49%, 100% { opacity: 1; } }
@keyframes strut { 0%, 100% { transform: none; } 30% { transform: translateY(-12%) skewX(-10deg); } 60% { transform: skewX(8deg) scaleY(1.06); } }

/* ---------- when ---------- */
.when { margin-top: clamp(1.3rem, 4.5vw, 2.1rem); display: flex; flex-direction: column; align-items: center; }
.revealed .when { animation: rise .9s cubic-bezier(.2, .8, .2, 1) .95s both; }
.when .bigdate {
  margin: 0;
  font-weight: 700; font-size: clamp(2.35rem, 11.5vw, 4.4rem); letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(95deg, #fff3c4, var(--gold) 45%, var(--gold-deep) 75%, var(--gold-soft));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold);
  filter: drop-shadow(0 0 18px rgba(245, 197, 66, .45));
}
.when .bigdate small { font-size: .5em; font-weight: 500; vertical-align: .22em; margin: 0 .04em; }
.when .day { margin: .9rem 0 .1rem; font-family: var(--f-display); font-size: clamp(.8rem, 2.8vw, .95rem); letter-spacing: .4em; text-transform: uppercase; color: var(--dim); }
.when .time {
  margin: 0;
  font-weight: 700; font-size: clamp(2.1rem, 9.5vw, 3.4rem); line-height: 1; letter-spacing: -.01em;
  color: var(--ice); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(255, 255, 255, .35), 0 0 34px rgba(245, 197, 66, .45);
}
.when .time small { font-size: .5em; font-weight: 600; letter-spacing: .04em; margin-left: .15em; color: var(--gold); }
.when .where { margin: .75rem 0 0; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); }
.when .where:empty, .when .day:empty, .when .time:empty { display: none; }

.soon {
  margin: clamp(1.5rem, 4.5vw, 2.1rem) 0 0;
  font-family: var(--f-script); font-size: clamp(2rem, 8vw, 2.9rem); line-height: 1;
  color: #fff;
  text-shadow: 0 0 2px #fff, 0 0 10px var(--pink), 0 0 26px var(--pink), 0 0 60px rgba(255, 46, 136, .55);
}
.soon:empty { display: none; }
.revealed .soon { animation: rise .9s cubic-bezier(.2, .8, .2, 1) 1.1s both; }

/* ---------- actions ---------- */
.actions { display: flex; flex-direction: column; align-items: stretch; gap: .7rem; width: 100%; max-width: 21rem; margin-top: clamp(2rem, 6.5vw, 2.9rem); }
.revealed .actions { animation: rise .9s cubic-bezier(.2, .8, .2, 1) 1.3s both; }

.place {
  display: flex; flex-direction: column; gap: .85rem;
  padding: .95rem .95rem .8rem; border-radius: 20px;
  text-decoration: none; color: var(--ice);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  border: 1px solid rgba(245, 197, 66, .45);
  box-shadow: 0 0 30px rgba(245, 197, 66, .16), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}
.place:hover { transform: translateY(-2px); border-color: rgba(245, 197, 66, .8); box-shadow: 0 0 44px rgba(245, 197, 66, .32), inset 0 1px 0 rgba(255, 255, 255, .07); }
.place:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.place__top { display: flex; align-items: center; gap: .95rem; text-align: left; }
.place__pin {
  width: 40px; height: 40px; flex: 0 0 auto;
  background: linear-gradient(160deg, #fff3c4, var(--gold) 50%, var(--gold-deep));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 1.5C7.3 1.5 3.5 5.3 3.5 10c0 5.6 6.9 11.4 7.9 12.2a.9.9 0 0 0 1.2 0C13.6 21.4 20.5 15.6 20.5 10c0-4.7-3.8-8.5-8.5-8.5zm0 5.3a3.2 3.2 0 1 1 0 6.4 3.2 3.2 0 0 1 0-6.4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 1.5C7.3 1.5 3.5 5.3 3.5 10c0 5.6 6.9 11.4 7.9 12.2a.9.9 0 0 0 1.2 0C13.6 21.4 20.5 15.6 20.5 10c0-4.7-3.8-8.5-8.5-8.5zm0 5.3a3.2 3.2 0 1 1 0 6.4 3.2 3.2 0 0 1 0-6.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(245, 197, 66, .4));
}
.place__txt { display: flex; flex-direction: column; gap: .12rem; min-width: 0; flex: 1 1 auto; }
.place__name { font-weight: 600; font-size: 1rem; line-height: 1.2; }
.place__addr { font-size: .8rem; line-height: 1.3; color: var(--dim); }
.place__cta {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: .9rem 1.2rem; border-radius: 999px;
  font-family: var(--f-display); font-size: .9rem; letter-spacing: .2em; text-transform: uppercase;
  color: #0a0a0a; background: linear-gradient(95deg, var(--gold-soft), var(--gold) 50%, var(--gold-deep));
  box-shadow: 0 0 22px rgba(245, 197, 66, .5);
  animation: glowBeat var(--beat) ease-out infinite;
}
.place:hover .sheen { animation: sheen .75s ease-out; }
.place__gm { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--faint); text-align: center; }

.cal { display: flex; gap: .6rem; }
.btn {
  position: relative; overflow: hidden; flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem .9rem; border-radius: 999px;
  font-family: var(--f-display); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--ice);
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .04);
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}
.btn:hover { transform: translateY(-2px); border-color: #fff; box-shadow: 0 0 26px rgba(255, 255, 255, .25); }
.btn:hover .sheen { animation: sheen .75s ease-out; }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sheen { position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-18deg); }
@keyframes sheen { to { left: 130%; } }

/* ---------- equalizer + beat ---------- */
.eq { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 34px; margin-top: clamp(2rem, 6.5vw, 3rem); }
.revealed .eq { animation: rise .9s cubic-bezier(.2, .8, .2, 1) 1.45s both; }
.eq i { width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(0deg, var(--gold-deep), var(--gold) 55%, #fff); transform-origin: bottom; transform: scaleY(.3); opacity: .9; }
.is-playing .eq i { animation: eqBar var(--beat) ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.31s !important; } .eq i:nth-child(3) { animation-delay: -.15s !important; }
.eq i:nth-child(4) { animation-delay: -.46s !important; } .eq i:nth-child(5) { animation-delay: -.08s !important; }
.eq i:nth-child(6) { animation-delay: -.38s !important; } .eq i:nth-child(7) { animation-delay: -.22s !important; }
.eq i:nth-child(8) { animation-delay: -.5s !important; }  .eq i:nth-child(9) { animation-delay: -.12s !important; }
@keyframes eqBar { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* names hit on the beat while the song plays */
.is-playing.revealed .names { animation: hitBeat var(--beat) ease-out infinite; }
@keyframes hitBeat { 0% { transform: scale(1.03); } 35%, 100% { transform: scale(1); } }
@keyframes glowBeat { 0% { box-shadow: 0 0 40px rgba(245, 197, 66, .8); } 50%, 100% { box-shadow: 0 0 20px rgba(245, 197, 66, .45); } }

/* ---------- confetti button ---------- */
.party {
  position: relative; overflow: hidden;
  margin-top: clamp(1.4rem, 4.5vw, 2rem);
  padding: 1rem 1.8rem;
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--f-display); font-size: 1.05rem; letter-spacing: .18em; text-transform: uppercase;
  color: #0a0a0a;
  background: linear-gradient(95deg, #fff, #f1ead6 40%, var(--gold-soft));
  box-shadow: 0 0 22px rgba(255, 255, 255, .25), 0 6px 0 var(--gold-deep);
  transition: transform .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.party:hover { transform: translateY(-2px); }
.party:hover .sheen { animation: sheen .75s ease-out; }
.party:active { transform: translateY(4px); box-shadow: 0 0 22px rgba(255, 255, 255, .25), 0 2px 0 var(--gold-deep); }
.party:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.revealed .party { animation: rise .9s cubic-bezier(.2, .8, .2, 1) 1.5s both; }
.eq i:nth-child(3n) { background: linear-gradient(0deg, #777, #fff); }

/* ---------- outro ---------- */
.outro { margin-top: clamp(1.6rem, 5vw, 2.4rem); max-width: 24em; }
.revealed .outro { animation: rise .9s cubic-bezier(.2, .8, .2, 1) 1.6s both; }
.outro p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--dim); }
.outro p em { font-style: normal; font-weight: 500; color: var(--ice); }
.again {
  margin-top: 1.4rem; padding: .5rem .8rem; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-family: var(--f-display); font-size: .78rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--faint);
}
.again:hover { color: var(--gold); }
.again:focus-visible { outline: 1px solid var(--gold); }
.outro .credit { margin: 1.6rem auto 0; font-size: .62rem; line-height: 1.6; color: var(--faint); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revealed .invite > *, .names .ch { opacity: 1 !important; transform: none !important; filter: none !important; }
  .ticker { transform: none; }
  #spot { display: none; }
}