:root {
  --bg: #020101;
  --bg-2: #0c0708;
  --ink: #f1e8e3;
  --muted: #9d8c87;
  --faint: #5a4b48;
  --crimson: #c2172f;
  --crimson-hi: #e8324a;
  --wine: #6d0a18;
  --ember: #ffb27a;
  --blush: #fadbd6;
  --display: "Cinzel", "Trajan Pro", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --gap-y: clamp(56px, 9vh, 96px); /* equal space above and below the email field */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 600px at 50% 105%, rgba(120, 10, 28, .14), transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ——— atmosphere ——— */
.grain {
  position: fixed; inset: -50%; z-index: 50; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
.vignette {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .75) 100%);
}

main { position: relative; z-index: 1; }

/* ——— hero ——— */
.hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 16px 0;
  text-align: center;
}
.eyebrow {
  margin: 0 0 8px;
  font: 400 11px/1 var(--sans);
  letter-spacing: .42em; text-transform: uppercase; color: var(--muted);
  padding-left: .42em;
}
.stage {
  position: relative;
  --s: min(92vw, 56svh, 600px);
  width: var(--s);
  aspect-ratio: 1;
  margin: calc(var(--s) * -.07) 0 calc(var(--s) * -.1);
  container-type: inline-size;
}
.eclipse { position: absolute; inset: 0; }
.eclipse img {
  width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(circle at 48.6% 48.6%, #000 52%, transparent 71%);
  mask-image: radial-gradient(circle at 48.6% 48.6%, #000 52%, transparent 71%);
  animation: rise 2.4s var(--ease) both, breathe 7s ease-in-out 2.4s infinite;
}
/* soft corona behind the ring (ring centre measured at 48.6% / 48.6% of the art) */
.corona {
  position: absolute; left: 48.6%; top: 48.6%; width: 70%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 54%, rgba(194, 23, 47, .22) 62%, transparent 74%);
  filter: blur(18px);
  animation: fade 3s ease .8s both, pulse 7s ease-in-out 3s infinite;
}
/* live twinkle on the diamond-ring flare */
.flare {
  position: absolute; left: 67.2%; top: 25%; width: 18%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 225, .9) 0%, rgba(255, 178, 122, .35) 22%, transparent 60%);
  mix-blend-mode: screen;
  animation: ignite 1.6s var(--ease) 1.1s both, twinkle 4.5s ease-in-out 2.7s infinite;
}
@keyframes rise { from { opacity: 0; transform: scale(1.06); filter: brightness(.2) blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes breathe { 50% { filter: brightness(1.12) saturate(1.1); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pulse { 50% { opacity: .55; transform: translate(-50%, -50%) scale(1.04); } }
@keyframes ignite { from { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .65; transform: translate(-50%, -50%) scale(.82); } }

.wordmark {
  /* +.047em: Cinzel caps sit high in their line box — nudge the glyphs onto the true centre */
  position: absolute; left: 48.6%; top: 48.6%; transform: translate(-50%, calc(-50% + .047em));
  margin: 0; white-space: nowrap;
  font: 400 6.6cqw/1 var(--display);
  letter-spacing: .14em; padding-left: .14em;
  display: flex;
}
.wordmark span {
  background: linear-gradient(180deg, var(--crimson-hi) 0%, var(--crimson) 45%, var(--wine) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(194, 23, 47, .35));
  display: inline-block;
  animation: letter 1.4s var(--ease) both;
}
.wordmark span:nth-child(1) { animation-delay: 1.30s; }
.wordmark span:nth-child(2) { animation-delay: 1.38s; }
.wordmark span:nth-child(3) { animation-delay: 1.46s; }
.wordmark span:nth-child(4) { animation-delay: 1.54s; }
.wordmark span:nth-child(5) { animation-delay: 1.62s; }
.wordmark span:nth-child(6) { animation-delay: 1.70s; }
.wordmark span:nth-child(7) { animation-delay: 1.78s; }
@keyframes letter { from { opacity: 0; transform: translateY(.18em); filter: blur(10px); } to { opacity: 1; transform: none; } }

.reveal { animation: up 1.4s var(--ease) var(--d, 0s) both; }
@keyframes up { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.reveal-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity 1.2s var(--ease) var(--d, 0s), transform 1.2s var(--ease) var(--d, 0s); }
.reveal-on-scroll.is-in { opacity: 1; transform: none; }

/* ——— notify (sits right under the wordmark) ——— */
.notify { width: 100%; max-width: 520px; margin: 0 auto; }
.notify__title {
  /* same voice as the "Original Series · Coming Soon" line; pushed away from the eclipse, closer to the field */
  margin: clamp(40px, 6vh, 64px) 0 28px;
  font: 400 11px/1 var(--sans); letter-spacing: .42em; text-transform: uppercase; color: var(--muted);
  padding-left: .42em;
}

.form { position: relative; }
/* no box and no resting line: the red ember line only appears while you type */
.field {
  position: relative; display: flex; align-items: center;
  height: 58px;
}
.field input[type="email"] {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: 0;
  height: 100%; padding: 0 4px;
  color: var(--ink); font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  caret-color: var(--crimson-hi);
}
.field input::placeholder { color: var(--faint); transition: color .5s; }
.field input:focus::placeholder { color: transparent; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* the bottom edge ignites on focus and a slow ember runs along it */
.field__line {
  position: absolute; left: -1px; right: -1px; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--wine) 15%, var(--crimson-hi) 45%, var(--ember) 50%, var(--crimson-hi) 55%, var(--wine) 85%, transparent);
  background-size: 200% 100%;
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease);
  box-shadow: 0 0 12px rgba(232, 50, 74, .6);
}
.field:focus-within .field__line, .form.is-loading .field__line { transform: scaleX(1); animation: ember 3.2s linear infinite; }
@keyframes ember { from { background-position: 200% 0; } to { background-position: 0 0; } }

.field button {
  position: relative; flex: none; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 44px; margin: 0 0 0 12px; padding: 0 24px;
  border: 0; border-radius: 1px; cursor: pointer;
  /* deep garnet metal — dark, with only a low brushed sheen */
  background:
    linear-gradient(180deg, rgba(255, 210, 205, .07) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .3) 100%),
    linear-gradient(100deg, #1a0205 0%, #36060e 20%, #520b16 38%, #6a1622 48%, #4a0913 62%, #2c040b 82%, #1a0205 100%);
  background-size: 100% 100%, 220% 100%;
  background-position: 0 0, 0% 0;
  color: #e6cbc7;
  font: 600 12px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
  transition: background-position 1.2s var(--ease), color .4s;
}
/* a faint glint crosses the metal every few seconds */
.field button::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 36%;
  background: linear-gradient(100deg, transparent, rgba(255, 225, 220, .1), transparent);
  transform: skewX(-20deg);
  animation: glint 6s ease-in-out 3.5s infinite;
}
@keyframes glint { 0% { left: -60%; } 22%, 100% { left: 130%; } }
/* hover: the sheen slides across, like turning metal in the light */
.field button:hover, .field button:focus-visible {
  outline: none; color: #f6e2de;
  background-position: 0 0, 100% 0;
}
.btn__label { position: relative; padding-left: .26em; }
.btn__arrow { position: relative; width: 18px; height: 18px; transition: transform .6s var(--ease), opacity .3s; }
.field button:hover .btn__arrow, .field button:focus-visible .btn__arrow { transform: translateX(5px); }
.btn__spinner {
  position: absolute; right: 26px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%; border: 1.5px solid rgba(244, 220, 216, .25); border-top-color: #f4dcd8;
  opacity: 0;
}
.form.is-loading .btn__arrow { opacity: 0; }
.form.is-loading .btn__spinner { opacity: 1; animation: spin .9s linear infinite; }
.form.is-loading button { pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.form__msg { position: absolute; left: 0; right: 0; top: 100%; margin: 14px 0 0; font: 500 10px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--crimson-hi); }
.form.is-error .field { animation: shake .5s var(--ease); }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.form.is-done { animation: out .7s var(--ease) forwards; }
@keyframes out { to { opacity: 0; transform: translateY(-8px); filter: blur(6px); } }

.success { display: flex; flex-direction: column; align-items: center; animation: up 1.2s var(--ease) both; }
.success[hidden] { display: none; }
.success__ring {
  position: relative; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--crimson), 0 0 24px rgba(194, 23, 47, .55), inset 0 0 14px rgba(194, 23, 47, .4);
  animation: ringIn 1.4s var(--ease) both;
}
.success__ring::after { /* the diamond — a spark on the rim */
  content: ""; position: absolute; right: 3px; top: 3px; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--ember) 40%, transparent 70%);
  box-shadow: 0 0 16px 4px rgba(255, 178, 122, .7);
  animation: ignite2 1s var(--ease) .6s both;
}
@keyframes ringIn { from { opacity: 0; transform: scale(.6) rotate(-90deg); } to { opacity: 1; transform: none; } }
@keyframes ignite2 { from { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.8); } to { opacity: 1; transform: scale(1); } }
.success__title { margin: 0; font: 500 13px/1.2 var(--sans); letter-spacing: .34em; text-transform: uppercase; padding-left: .34em; }
.success__sub { margin: 10px 0 0; font: 400 10px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); padding-left: .26em; }

/* ——— slate ——— */
.slate { max-width: 1040px; margin: 0 auto; padding: var(--gap-y) 16px 72px; }
.section-label {
  display: flex; align-items: center; gap: 20px;
  margin: 0 0 48px;
  font: 400 11px/1 var(--sans); letter-spacing: .42em; text-transform: uppercase; color: var(--muted);
}
.section-label::before, .section-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194, 23, 47, .55));
}
.section-label::after { background: linear-gradient(90deg, rgba(194, 23, 47, .55), transparent); }

/* one row at every width. The seal is round and the sign is wide, so the sign runs at .6 of
   the seal's height to carry the same visual weight; 2.32 = seal width + sign width in seal-heights */
.shows {
  --gap: clamp(24px, 7vw, 96px);
  --H: min(200px, calc((100vw - 32px - var(--gap)) / 2.32));
  display: flex; justify-content: center; align-items: center;
  gap: var(--gap);
  padding: 0 0 8px;
}
.show {
  position: relative; margin: 0;
  transition: opacity 1.2s var(--ease) var(--d, 0s), transform 1s var(--ease), filter 1s var(--ease);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .6));
}
.show img { width: auto; }
.show--heirs img { height: var(--H); }
.show--girlhood img { height: calc(var(--H) * .6); }
/* slow sheen across the logo on hover, clipped to the logo's own shape */
.show::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0;
  -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat;
  transition: background-position 1.4s var(--ease);
}
.show--heirs { --src: url("/img/heirs-of-sin.png"); }
.show--girlhood { --src: url("/img/girlhood-avenue.png"); }
.show:hover { transform: translateY(-6px) scale(1.035); filter: drop-shadow(0 24px 40px rgba(194, 23, 47, .45)); }
.show:hover::after { background-position: -50% 0; }

/* ——— footer ——— */
.footer {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: center; gap: 14px;
  padding: 0 16px 40px;
  font: 400 10px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--faint);
}
.footer .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--wine); }

/* ——— small screens ——— */
@media (max-width: 720px) {
  .hero { padding: 40px 16px 0; }
  .eyebrow, .section-label { letter-spacing: .32em; }
  .section-label { margin-bottom: 36px; }
}
@media (max-width: 460px) {
  .field { flex-direction: column; height: auto; border-bottom: 0; }
  .field input[type="email"] { flex: none; width: 100%; height: 54px; text-align: center; }
  .field button { width: 100%; height: 52px; margin: 18px 0 0; }
  .field__line { bottom: auto; top: 53px; }
  .form.is-loading .btn__label { opacity: 0; }
  .btn__spinner { right: calc(50% - 8px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal-on-scroll { opacity: 1; transform: none; }
}