@charset "UTF-8";

:root {
  color-scheme: dark;
  --night: #240e34;
  --paper: #f4eddb;
  --gold: #d6b94f;
  --gold-light: #fff8d7;
  --sans: "Avenir Next", Avenir, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--night); color: var(--paper); font-family: var(--sans); }
.prelaunch { position: relative; display: grid; min-height: 100vh; min-height: 100svh; place-items: center; overflow: hidden; isolation: isolate; padding: 48px 24px 70px; background: #240e34; }
.city-background, .shade { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; }
.city-background { object-fit: cover; object-position: center; }
.shade { background: linear-gradient(180deg, rgba(20, 8, 31, .12) 0%, rgba(20, 8, 31, .22) 46%, rgba(14, 15, 31, .7) 78%, #030304 100%); }
.intro { width: min(940px, 100%); margin: auto; text-align: center; animation: appear .9s ease-out both; }
.brand-mark-wrap { position: relative; display: block; width: 177px; height: 152px; margin: 0 auto 10px; }
.brand-mark { width: 100%; height: 100%; object-fit: contain; }
.brand-mark-wrap::after { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 31%, rgba(255, 248, 215, .28) 41%, #fff 47%, rgba(255, 248, 215, .88) 51%, rgba(214, 185, 79, .2) 58%, transparent 68%); background-size: 260% 100%; content: ""; pointer-events: none; -webkit-mask-image: url("assets/Logo_Icon_gold.svg"); mask-image: url("assets/Logo_Icon_gold.svg"); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; animation: gold-shimmer 3.8s linear infinite; }
.eyebrow { margin: 0; color: var(--gold); font-size: 12px; letter-spacing: 4px; text-transform: uppercase; }
.eyebrow::before, .eyebrow::after { display: inline-block; width: clamp(24px, 7vw, 82px); height: 1px; margin: 0 14px 4px; background: rgba(214, 185, 79, .76); content: ""; }
h1 { margin: 24px 0 14px; background: linear-gradient(105deg, #a77918 0%, #d6b94f 25%, #f4dc85 37%, #fff8d7 42%, #fff 45%, #f4d66e 49%, #b48220 59%, #f1d477 76%, #9a6a16 100%); background-clip: text; background-size: 220% 100%; color: transparent; font-size: clamp(48px, 7vw, 86px); font-weight: 400; line-height: 1.08; -webkit-background-clip: text; animation: gold-shimmer 3.8s linear infinite; }
.descriptor { margin: 0; color: rgba(244, 237, 219, .92); font-size: 20px; line-height: 1.7; }
.descriptor span { display: inline-block; margin-top: 5px; color: rgba(244, 237, 219, .78); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; }
.divider { width: 54px; height: 1px; margin: 34px auto 24px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.coming-soon { margin: 0; color: var(--paper); font-size: clamp(36px, 5vw, 54px); font-weight: 300; letter-spacing: 1px; }
.coming-soon span { color: var(--gold); }

@keyframes gold-shimmer { from { background-position: 200% 50%; } to { background-position: -20% 50%; } }
@keyframes appear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 600px) {
  .prelaunch { min-height: 100svh; padding: 34px 20px 72px; }
  .brand-mark-wrap { width: 135px; height: 116px; margin-bottom: 8px; }
  .eyebrow { font-size: 10px; letter-spacing: 3px; }
  .eyebrow::before, .eyebrow::after { width: 22px; margin-inline: 9px; }
  h1 { margin: 22px 0 13px; font-size: clamp(39px, 11vw, 58px); }
  .descriptor { font-size: 18px; }
  .descriptor span { font-size: 10px; letter-spacing: 1.7px; }
  .divider { margin: 24px auto 18px; }
  .coming-soon { font-size: clamp(34px, 9vw, 42px); }
}

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