@font-face {
  font-family: Montserrat;
  src: url('assets/montserrat.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Anton;
  src: url('assets/anton.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: Montserrat, Arial, sans-serif;
  background: #060605;
  color: #c99b82;
  --copper: #c99b82;
  --copper-light: #e9c1a5;
  --muted: #a48c7d;
  --hairline: #be8a6330;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 7px; }
button:hover, a:hover { color: var(--copper-light); }

.hero {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 40% 45%, #14110d70, transparent 65%), #060605;
}
.hero { min-height: 540px; height: 100svh; overflow: hidden; }
.intro-surface { position: absolute; inset: 0; z-index: -1; background: #090908 url('assets/intro-surface.svg') center / cover; pointer-events: none; transition: opacity 1.6s ease; }
.hero[data-phase=logo] .intro-surface { opacity: 0; }
.grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .065;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.55' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.hero-footer { position: absolute; left: 5%; right: 5%; display: flex; align-items: center; justify-content: center; z-index: 5; }

/* Display the emblem from the supplied card; keep the source image unchanged. */
.emblem { position: relative; aspect-ratio: 1; overflow: hidden; flex-shrink: 0; mask-image: radial-gradient(circle, #000 60%, transparent 71%); }
.emblem img { position: absolute; max-width: none; width: 254.7%; height: auto; left: -20.45%; top: -17.42%; }

.sequence { position: absolute; inset: 10% 0 14%; display: grid; align-items: center; }
.manifesto { width: 78%; margin: auto; transition: opacity .22s, filter .3s, transform .3s; }
.line { position: relative; width: max-content; font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: clamp(24px, 8.35vw, 150px); line-height: 1.14; letter-spacing: -.018em; white-space: nowrap; }
.letter { visibility: hidden; display: inline-block; white-space: pre; }
.letter.shown { visibility: visible; animation: ink-strike .12s ease-out both; }
.line:not(.final-line) .letter {
  color: #e0d1bc;
}
.line:not(.final-line):before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url('assets/intro-grit.svg') center / 160px 160px; mix-blend-mode: multiply; opacity: .58; }
.line.active:after { content: ''; width: .045em; height: .82em; background: #d8241b; position: absolute; left: var(--cursor, 0); top: .17em; animation: cursor .55s steps(1) infinite; }
.final-line { margin-top: .14em; padding: .015em .16em .055em; color: #080706; background: #eb1c13 url('assets/intro-grit.svg') center / 200px 200px; background-blend-mode: multiply; clip-path: inset(0 var(--cover, 100%) 0 0); }
.final-line.active:after { background: #090706; }
.final-line.complete { animation: stamp .23s ease-out both; }
.reveal { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: scale(1.045); filter: blur(5px); pointer-events: none; transition: opacity 1.5s ease, filter 1.6s ease, transform 2.5s cubic-bezier(.16,1,.3,1); }
.hero-emblem { width: min(54vh, 580px, 80vw); }
.hero-email { font-size: clamp(14px, 1.35vw, 20px); font-weight: 300; letter-spacing: -.02em; margin-top: 22px; padding: 7px 4px; }
.hero[data-phase=blast] .manifesto, .hero[data-phase=logo] .manifesto { opacity: 0; filter: blur(10px); transform: scale(1.07); }
.hero[data-phase=logo] .reveal { opacity: 1; transform: scale(1); filter: none; visibility: visible; pointer-events: auto; }
.hero[data-phase=logo] .hero-footer { display: none; }
.hero[data-phase=logo] .manifesto { display: none; }
.blast { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 48%, #fff0d5 0%, #e9a05c 7%, #8c3014 23%, transparent 65%); z-index: 3; }
.hero.is-blasting .blast { animation: blast 1.1s ease-out both; }
.shockwave { position: absolute; width: 40vw; height: 32vw; left: 30%; top: calc(48% - 16vw); background: radial-gradient(ellipse, transparent 40%, #98765348 62%, #c0976438 66%, transparent 74%); filter: blur(14px); opacity: 0; pointer-events: none; }
.hero.is-blasting .shockwave { animation: wave 1.6s ease-out both; }
.hero.is-blasting .sequence { animation: shake .48s linear; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.hero-footer { bottom: 30px; gap: 24px; }
.controls { display: flex; align-items: center; justify-content: center; gap: 34px; }
button { display: inline-flex; align-items: center; gap: 9px; border: 0; background: transparent; color: #c1b0a2; padding: 12px 0; cursor: pointer; font-size: 12px; white-space: nowrap; }
#sound[aria-pressed=true] { color: var(--copper-light); }
.controls svg { color: var(--copper); flex-shrink: 0; }
.sound-waves { opacity: .35; transition: opacity .2s; }
#sound[aria-pressed=true] .sound-waves { opacity: 1; }
#replay span { font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes cursor { 50% { opacity: 0; } }
@keyframes ink-strike { from { transform: translateY(1.5px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
@keyframes stamp { 0% { transform: translateY(1px) scaleY(.985); } 35% { transform: translateY(-1px) scaleY(1.01); } 100% { transform: none; } }
@keyframes blast { 0% { opacity: 0; transform: scale(.3); } 5% { opacity: .84; } 20% { opacity: .28; } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes wave { 0% { opacity: 0; transform: scale(.12); } 15% { opacity: .65; } 100% { opacity: 0; transform: scale(4); } }
@keyframes shake { 20% { transform: translate(-5px,3px); } 40% { transform: translate(4px,-3px); } 60% { transform: translate(-3px,-1px); } 80% { transform: translate(2px,2px); } }

@media (min-width: 1920px) { .manifesto { width: max-content; } }
@media (max-width: 600px) {
  .sequence { inset: 12% 0 22%; }
  .manifesto { width: 90%; }
  .line { font-size: 9.1vw; letter-spacing: -.018em; line-height: 1.22; }
  .final-line { margin-top: .16em; }
  .hero-emblem { width: min(90vw, 44vh); }
  .hero-footer { bottom: 22px; left: 6%; right: 6%; }
  .controls button, #replay span { font-size: 12px; }
  .hero-email { margin-top: 18px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none !important; transition: none !important; }
  .hero canvas, .blast, .shockwave { display: none; }
}