/* build 84efa6d · main · 2026-09-06T09:14:24Z · f8cc3f5c */
/* The hero.
 *
 * Two halves that never mix. `.hero__stage` holds three layers a celebration
 * owns outright. `.hero__chrome` is the app's, and always renders — a plugin
 * that throws in enter() leaves a working screen with a readable name and a
 * Home button rather than a dead 50" panel. */

.hero { position: absolute; inset: 0; background: #0b0b0f; }

/* ---- the celebration's half ---- */

.hero__stage { position: absolute; inset: 0; overflow: hidden; }
.hero__layer { position: absolute; inset: 0; }

/* Particle canvases run at half device resolution and upscale. Confetti has no
   fine detail to lose and it is 4x fewer pixels to fill each frame, which is
   the difference between 60fps and not on kiosk-class hardware. */
.hero__canvas { width: 100%; height: 100%; }

/* ---- the app's half ---- */

.hero__chrome {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto auto auto auto;
  align-items: center;
  justify-items: center;
  gap: calc(var(--u) * 40);
  padding: calc(var(--u) * 110) calc(var(--u) * 90) calc(var(--u) * 90);
  pointer-events: none;          /* the hero root handles taps; buttons opt back in */
  text-align: center;
}

/* The mark card is near-white on purpose. Most brand logos are drawn dark-on-
   white and disappear against a coloured field; the card guarantees all 43 read
   correctly, and the brand colour lives in the celebration's backdrop instead. */
.hero__card {
  display: grid;
  place-items: center;
  width:  min(calc(var(--u) * var(--card-w, 1500)), 86%);
  height: calc(var(--u) * var(--card-h, 900));
  padding: calc(var(--u) * 70);
  background: #fdfdfd;
  border-radius: calc(var(--u) * 36);
  box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 90) rgb(0 0 0 / .45),
              0 calc(var(--u) * 4)  calc(var(--u) * 12) rgb(0 0 0 / .25);
}

.hero__mark { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Text marks — a donor board with no logos at all. Same card, name set large.
   The celebration system cannot tell the difference. */
.hero__textmark {
  font-size: calc(var(--u) * var(--textmark-size, 150));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #14141a;
  overflow-wrap: anywhere;
}

.hero__thanks {
  margin: 0;
  font-size: calc(var(--u) * 84);
  font-weight: 300;
  line-height: 1.15;
  color: var(--on-brand, #fff);
  text-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 18) rgb(0 0 0 / .35);
}
.hero__thanks strong { font-weight: 800; }
.hero__thanks-sub { display: block; font-size: calc(var(--u) * 52); opacity: .82; }

.hero__extra {
  margin: 0;
  font-size: calc(var(--u) * 44);
  color: var(--on-brand, #fff);
  opacity: .8;
}

.hero__footer {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 40);
}

.hero__home {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 22);
  padding: calc(var(--u) * 34) calc(var(--u) * 56);
  font-size: calc(var(--u) * 46);
  font-weight: 600;
  color: #14141a;
  background: #fdfdfd;
  border-radius: 999px;
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 30) rgb(0 0 0 / .35);
  transition: transform 90ms ease-out;
}
.hero__home:active { transform: scale(.96); }
.hero__home svg { width: calc(var(--u) * 48); height: calc(var(--u) * 48); fill: currentColor; }

/* A ring, not a countdown clock. Someone posing for a photograph should not be
   watching a number tick down at them. */
.hero__countdown {
  position: relative;
  width: calc(var(--u) * 108);
  height: calc(var(--u) * 108);
  display: grid;
  place-items: center;
  color: var(--on-brand, #fff);
  opacity: .55;
}
.hero__countdown svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.hero__countdown circle { fill: none; stroke-width: 6; }
.hero__ring-track { stroke: currentColor; opacity: .25; }
.hero__ring {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-dasharray: 283;                 /* 2 * pi * r, r = 45 */
  stroke-dashoffset: var(--ring-offset, 0);
}
.hero__countdown span { font-size: calc(var(--u) * 34); font-variant-numeric: tabular-nums; }

.hero__lockup {
  margin: 0;
  font-size: calc(var(--u) * 38);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-brand, #fff);
  opacity: .62;
}

/* Entry/exit are the app's, not a celebration's: chrome must appear even when a
   plugin fails before it ever calls back. */
.hero[data-state="entering"] .hero__chrome { animation: hero-chrome-in 420ms ease-out both; }
@keyframes hero-chrome-in {
  from { opacity: 0; transform: translateY(calc(var(--u) * 40)); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero[data-state="entering"] .hero__chrome { animation: none; }
}