:root {
  color-scheme: dark;
  font-family: "Baskerville", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  color: #f7ead8;
  background: #240307;
  --gold: #ebce86;
  --pointer-x: 0px;
  --pointer-y: 0px;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
::selection { background: #a47334; color: #fff4df; }

.scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.backdrop { position: absolute; inset: -2%; transform: translate3d(var(--pointer-x), var(--pointer-y), 0); transition: transform 1.8s ease-out; }
.backdrop img { width: 100%; height: 100%; object-fit: cover; animation: backdrop-drift 28s ease-in-out infinite alternate; }
.light { position: absolute; inset: -30%; opacity: .3; background: conic-gradient(from 155deg at 50% 0%, transparent 0deg, #f4bc7433 12deg, transparent 26deg, #f4bc7414 36deg, transparent 52deg); mix-blend-mode: screen; transform-origin: 50% 0; animation: light-drift 20s ease-in-out infinite alternate; }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, transparent 25%, #10000230 100%); }
#particles { position: absolute; width: 100%; height: 100%; opacity: .65; }

.coming-soon { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100svh; padding: 26px 24px 24px; text-align: center; overflow: hidden; }
.brand { display: flex; flex-direction: column; align-items: center; width: min(100%, 980px); }
.emblem { display: block; width: auto; height: clamp(155px, 26vh, 250px); filter: drop-shadow(0 0 19px #ffb73516); }
.wordmark-row { display: flex; align-items: center; justify-content: center; width: 100%; }
.wordmark { width: 64%; height: auto; aspect-ratio: 2182 / 470; object-fit: cover; object-position: center 40%; display: block; }
.brand-rule { position: relative; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #c19a50); transform: translateY(2px); }
.brand-rule:last-child { transform: rotate(180deg) translateY(-2px); }
.brand-rule::after { content: "✦"; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 24px; text-shadow: 0 0 12px #f3b65e55; }

h1 { margin: 0; font-size: clamp(48px, 6.45vw, 110px); font-weight: 400; line-height: 1.2; letter-spacing: .105em; text-indent: .105em; text-transform: uppercase; color: #f0ce8f; background: linear-gradient(110deg, #b6823f 5%, #ffe6b1 24%, #d5a65c 40%, #fff0c9 50%, #e8bf7b 59%, #ffe6b1 76%, #b6823f 95%); background-size: 220% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 16px #f6af4840); animation: gold-shift 12s ease-in-out infinite; }
.ornament, .footer-rule { display: flex; align-items: center; justify-content: center; gap: 13px; color: var(--gold); }
.ornament { width: min(430px, 65%); margin: 0 0 8px; }
.ornament::before, .ornament::after, .footer-rule::before, .footer-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #e5bd75); }
.ornament::after, .footer-rule::after { transform: rotate(180deg); }
.ornament span { font-size: 24px; line-height: 1; }
.description { margin: 0; font-size: clamp(18px, 1.85vw, 31px); line-height: 1.55; letter-spacing: .11em; text-shadow: 0 2px 12px #000; }

.signup { width: min(100%, 745px); margin-top: clamp(28px, 5vh, 48px); }
form { display: flex; min-height: 72px; border: 1px solid #d4ae57; border-radius: 100px; background: #24030755; box-shadow: 0 6px 30px #0002; }
form:focus-within { outline: 2px solid #f5da9a; outline-offset: 5px; }
.email-field { display: flex; align-items: center; gap: 21px; flex: 1; min-width: 0; padding: 0 20px 0 39px; cursor: text; }
svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.email-field svg { color: #e8d097; }
input { width: 100%; min-width: 0; padding: 20px 0; background: transparent; border: 0; outline: 0; color: #fff0da; font-size: 21px; letter-spacing: .025em; }
input::placeholder { color: #decbb3; opacity: 1; }
.notify-button { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; min-width: 240px; margin: -1px; padding: 17px 30px; overflow: hidden; isolation: isolate; border: 1px solid #ffe7a8; border-radius: 100px; background: linear-gradient(105deg, #b78031, #f4d58c 44%, #e2b65e 75%, #b77e2d); box-shadow: inset 0 5px 13px #fff5c755, 0 0 28px #e5a34826; color: #261700; font-size: 24px; cursor: pointer; transition: box-shadow .3s, filter .3s; }
.notify-button::after { content: ""; position: absolute; inset: -50%; z-index: -1; background: linear-gradient(110deg, transparent 38%, #fff6d975 50%, transparent 62%); transform: translateX(-100%); animation: button-shine 8s ease-in-out infinite; }
.notify-button:hover { filter: brightness(1.1); box-shadow: inset 0 5px 13px #fff5c755, 0 0 35px #e5a34855; }
.notify-button:focus-visible, .socials a:focus-visible { outline: 2px solid #fff0c2; outline-offset: 6px; }
.notify-button svg { width: 24px; stroke-width: 1; }
.signup-caption { margin: 19px 0 0; font-size: 13px; line-height: 1.5; letter-spacing: .32em; text-transform: uppercase; color: #e7d3b1; }
.form-status { margin: 0; font-size: 15px; line-height: 1.5; color: #f8d6ab; }
.form-status:not(:empty) { margin-top: 12px; }

footer { width: min(1050px, 88%); margin-top: clamp(28px, 5vh, 50px); }
.footer-rule { gap: 0; }
.footer-rule span { font-size: 25px; line-height: 1; }
.socials { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 14px; }
.socials button, .socials a { display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; padding: 6px; border: 0; background: transparent; color: var(--gold); }
.socials button:disabled { opacity: 1; cursor: default; }
.solid { fill: currentColor; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@keyframes backdrop-drift { from { transform: scale(1); } to { transform: scale(1.055); } }
@keyframes light-drift { from { transform: rotate(-9deg); opacity: .15; } to { transform: rotate(10deg); opacity: .35; } }
@keyframes gold-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes button-shine { 0%, 65% { transform: translateX(-100%); } 90%, 100% { transform: translateX(100%); } }
@keyframes reveal { from { opacity: 0; translate: 0 18px; filter: blur(5px); } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: reveal 1.5s cubic-bezier(.2,.65,.3,1) var(--delay) both; }
  h1.reveal { animation: reveal 1.5s cubic-bezier(.2,.65,.3,1) var(--delay) both, gold-shift 12s ease-in-out infinite; }
}

@media (max-width: 600px) {
  .coming-soon { padding: 50px 24px 28px; }
  .emblem { height: clamp(126.5px, 18.4svh, 172.5px); }
  .brand { position: relative; top: -44px; width: 100%; }
  .wordmark-row { margin-bottom: 4px; }
  .wordmark { width: 87%; }
  .brand-rule::after { font-size: 15px; }
  h1 { font-size: clamp(32px, 8.3vw, 50px); letter-spacing: .075em; }
  .ornament { margin: 15px 0; }
  .description { max-width: 360px; font-size: 18px; letter-spacing: .06em; }
  .signup { margin-top: 32px; }
  form { flex-direction: column; gap: 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  form:focus-within { outline: 0; }
  .email-field { padding: 0 21px; gap: 13px; border: 1px solid #d4ae57; border-radius: 100px; background: #24030777; }
  .email-field:focus-within { outline: 2px solid #f5da9a; outline-offset: 4px; }
  input { font-size: 17px; padding: 18px 0; }
  .email-field svg { width: 22px; }
  .notify-button { min-width: 0; margin: 0; padding: 15px 24px; font-size: 21px; }
  .signup-caption { font-size: 10px; letter-spacing: .2em; margin-top: 19px; }
  footer { width: 100%; margin-top: 32px; }
  .socials { gap: 18px; }
}

@media (max-height: 700px) and (min-width: 601px) {
  .coming-soon { padding-top: 20px; padding-bottom: 20px; }
  .emblem { height: 155px; }
  .wordmark { width: 50%; }
  h1 { font-size: 64px; }
  .description { font-size: 22px; }
  .signup { margin-top: 24px; }
  footer { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .backdrop { transform: none; }
  #particles { display: none; }
}