/* Hallmark · shape: single screen, centred mark · genre: atmospheric · theme: brand
 * paper: oklch(17% 0.05 18) · accent: oklch(85% 0.17 95) · display: Cormorant Garamond · body: Manrope · hero: centred emblem over moving footage · nav: none, the emblem is the masthead · footer: one line, tagline and copyright · signature: the official medallion in a turning gold ring over the show's own stage loops
 * axes: dark/high-contrast-serif/warm · posture: drenched · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 · weakest: P, a holding page has little to argue; let the real stage loops and the emblem carry it instead of adding words */
/* Hallmark · waive 26b · no control on the page, only the emblem and text · this holding page has no link or button yet, so there is nothing to press */
/* Hallmark · dismissed 29 · the gold halo round the medallion is the brand standby look from the stage screen, not a depth shadow */
@import url("./tokens.css");
@import url("./base.css");

html, body { min-height: 100%; }
body {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100svh;
  isolation: isolate;
}

/* Background: the show's own stage loops, crossfaded, under a maroon veil */
.backdrop { position: fixed; inset: 0; z-index: -1; background: var(--color-paper); }
.bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  transform: scale(1.06);
  transition: opacity 2.4s var(--ease-in-out), transform 12s linear;
}
/* Without scripting only the first loop shows; the script adds .js to crossfade */
.bg + .bg { display: none; }
.js .bg + .bg { display: block; }
.js .bg { opacity: 0; }
.js .bg.is-on { opacity: 1; transform: scale(1); }
.wash { position: absolute; inset: 0; }
.wash::before, .wash::after { content: ""; position: absolute; inset: 0; }
/* Multiply ties the light watercolour and the gold loops to one maroon key */
.wash::before { background: var(--color-paper-3); mix-blend-mode: multiply; opacity: 0.45; }
.wash::after { background: radial-gradient(ellipse 70% 62% at 50% 46%, transparent 0%, var(--color-veil) 55%, var(--color-veil-deep) 100%); }

/* The mark */
.stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-md);
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding: var(--space-2xl) var(--gutter) var(--space-xl);
  text-align: center;
}
.mark {
  position: relative;
  width: clamp(180px, 40vmin, 380px);
  aspect-ratio: 1;
  margin-bottom: var(--space-lg);
  animation: rise 1.4s var(--ease-out) both, breathe 7s var(--ease-in-out) 1.4s infinite alternate;
}
.emblem {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-medallion);
  box-shadow: 0 0 0 4px var(--color-accent), 0 0 90px 10px var(--color-glow), 0 30px 80px var(--color-shadow);
}
/* A gold ring that turns slowly around the medallion */
.ring {
  position: absolute; inset: -7%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, var(--color-accent) 70deg, transparent 140deg, transparent 200deg, var(--color-accent) 260deg, transparent 330deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), var(--color-paper) calc(100% - 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), var(--color-paper) calc(100% - 1px));
  opacity: 0.85;
  animation: turn 18s linear infinite;
}

.bn {
  font-family: var(--font-outlier);
  font-weight: 500;
  font-size: var(--text-xl);
  color: var(--color-accent);
  animation: rise 1.2s var(--ease-out) 0.35s both;
}
.head {
  font-weight: 600;
  font-size: clamp(2.75rem, 6vw + 1rem, 6rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  max-width: none;
  text-shadow: 0 2px 30px var(--color-shadow);
  animation: rise 1.2s var(--ease-out) 0.5s both;
}
.lede {
  max-width: 44ch;
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--color-ink-2);
  animation: rise 1.2s var(--ease-out) 0.65s both;
}

/* Footer */
.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding: var(--space-lg) var(--gutter) max(var(--space-lg), env(safe-area-inset-bottom));
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.tag { color: var(--color-accent); }

@media (max-width: 40rem) {
  .foot { justify-content: center; text-align: center; flex-direction: column; }
  .stage { gap: var(--space-sm); }
}
/* Short landscape phones: keep everything on one screen */
@media (max-height: 30rem) and (orientation: landscape) {
  .mark { width: 34vmin; margin-bottom: var(--space-xs); }
  .stage { padding-block: var(--space-lg); }
  .head { font-size: clamp(2rem, 4vw + 0.5rem, 3rem); }
}

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.025); } }
@keyframes turn { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
  .mark, .bn, .head, .lede, .ring { animation: none; }
  .bg { transition: none; transform: none; }
}