/* ============================================================
   BURNINGHAY — style.css
   Dark cinematic Coming Soon page
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Core palette */
  --color-bg:           #16110d;
  --color-cream:        #f5ead7;
  --color-cream-dim:    rgba(245, 234, 215, 0.58);
  --color-cream-faint:  rgba(245, 234, 215, 0.28);

  /* Ember spectrum */
  --color-ember-deep:   #8c2508;
  --color-ember-orange: #e8571a;
  --color-ember-gold:   #f0a052;
  --color-ember-bright: #f5c866;

  /* Typography */
  --font-display: 'Cinzel', Georgia, serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;

  /* Spacing scale (8pt grid) */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-6: 3rem;
  --sp-8: 4rem;

  /* Easing */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cinematic: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ───────────────────────────────────────────────────── */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background-color: var(--color-bg);
  color: var(--color-cream);
  font-family: var(--font-serif);
  overflow: hidden;
  position: relative;
}

/* ── Background layers ──────────────────────────────────────── */

/* Warm ember glow from below center */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 65%, rgba(110, 38, 5, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 100% 60% at 50% 110%, rgba(28, 8, 0, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(0, 0, 0, 0.35) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Animated film grain */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.038;
  pointer-events: none;
  z-index: 0;
  animation: grain 0.35s steps(8) infinite;
}

@keyframes grain {
  0%   { background-position:   0px   0px; }
  12%  { background-position: -22px  14px; }
  25%  { background-position:  18px  -8px; }
  37%  { background-position: -10px  22px; }
  50%  { background-position:  25px   6px; }
  62%  { background-position:  -6px -18px; }
  75%  { background-position:  16px  20px; }
  87%  { background-position: -24px  -4px; }
  100% { background-position:   0px   0px; }
}

/* ── Ember particles ────────────────────────────────────────── */
#embers {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.ember {
  position: absolute;
  bottom: -6px;
  border-radius: 50%;
  opacity: 0;
  animation: ember-rise linear forwards;
  will-change: transform, opacity;
}

@keyframes ember-rise {
  0%   { transform: translateY(0)        translateX(0)             scale(1);   opacity: 0;    }
  7%   { opacity: 0.9; }
  70%  { opacity: 0.4; }
  100% { transform: translateY(-105vh)   translateX(var(--drift, 0px))  scale(0.2); opacity: 0; }
}

/* ── Main content ───────────────────────────────────────────── */
main {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--sp-3), 3.5vh, var(--sp-4));
  padding: clamp(var(--sp-4), 6vw, var(--sp-8));
  text-align: center;
  max-width: 900px;
  width: 100%;
}

/* ── Logo ───────────────────────────────────────────────────── */
.logo-wrap {
  opacity: 0;
  animation: logo-reveal 1.1s var(--ease-out) 0.25s forwards;
}

.logo-wrap img {
  width: clamp(140px, 26vw, 260px);
  height: auto;
  display: block;
  animation: logo-pulse 5s ease-in-out infinite 2s;
}

@keyframes logo-reveal {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: drop-shadow(0 0 0px rgba(240, 160, 82, 0));
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter:
      drop-shadow(0 0 28px rgba(240, 160, 82, 0.32))
      drop-shadow(0 0 65px rgba(232, 87, 26, 0.16));
  }
}

@keyframes logo-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 28px rgba(240, 160, 82, 0.32))
      drop-shadow(0 0 65px rgba(232, 87, 26, 0.16));
  }
  50% {
    filter:
      drop-shadow(0 0 42px rgba(240, 160, 82, 0.50))
      drop-shadow(0 0 90px rgba(232, 87, 26, 0.28));
  }
}

/* ── Brand name ─────────────────────────────────────────────── */
.brand-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 10vw, 8rem);
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--color-cream);
  text-shadow: 0 0 100px rgba(232, 87, 26, 0.10);
  opacity: 0;
  animation: name-reveal 1.4s var(--ease-out) 0.85s forwards;
}

@keyframes name-reveal {
  from {
    opacity: 0;
    letter-spacing: 0.38em;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    letter-spacing: 0.18em;
    filter: blur(0);
  }
}

/* ── Divider ─────────────────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: clamp(180px, 44%, 380px);
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out) 1.55s forwards;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 160, 82, 0.45), transparent);
}

.divider-mark {
  width: 5px;
  height: 5px;
  background: var(--color-ember-gold);
  transform: rotate(45deg);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(240, 160, 82, 0.7);
}

/* ── Tagline ─────────────────────────────────────────────────── */
.tagline {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  color: var(--color-cream-dim);
  letter-spacing: 0.07em;
  line-height: 1.65;
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out) 1.95s forwards;
}

/* ── Coming Soon label ──────────────────────────────────────── */
.coming-soon {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.58rem, 1.15vw, 0.78rem);
  letter-spacing: 0.52em;
  color: var(--color-ember-gold);
  text-transform: uppercase;
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out) 2.45s forwards;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.coming-soon::before,
.coming-soon::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--color-ember-gold);
  opacity: 0.45;
}

/* ── Shared keyframes ────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .brand-name {
    letter-spacing: 0.08em;
    animation-name: name-reveal-mobile;
  }

  @keyframes name-reveal-mobile {
    from { opacity: 0; letter-spacing: 0.22em; filter: blur(8px); }
    to   { opacity: 1; letter-spacing: 0.08em; filter: blur(0); }
  }

  .coming-soon {
    letter-spacing: 0.38em;
  }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }

  .logo-wrap,
  .brand-name,
  .divider,
  .tagline,
  .coming-soon {
    opacity: 1;
    animation: none;
    filter: none;
  }

  .logo-wrap img {
    animation: none;
    filter:
      drop-shadow(0 0 28px rgba(240, 160, 82, 0.32))
      drop-shadow(0 0 65px rgba(232, 87, 26, 0.16));
  }

  .ember { display: none; }
}