/* ========== EmberVault Games — Minimal AAA Coming Soon (Mustard × Olive + Animated BG) ========== */

/* --- Theme Tokens --- */
:root {
  --bg: #0f140c;        /* deep olive base */
  --bg-2: #1e2416;      /* olive surface */
  --text: #ececf2;
  --muted: #aeb2a2;
  --accent: #cd951d;    /* golden mustard */
  --accent-2: #e6b547;  /* light mustard */
  --card: #131812cc;    /* olive-tinted card */
  --border: #2b3324;    /* olive border */

  /* Notice palette */
  --nv-bg: #0f140c;
  --nv-border: #2b3324;
  --nv-fg: #ececf2;
  --nv-soft: #c9ccb9;
  --nv-accent: #cd951d;
  --nv-glow: rgba(205,149,29,.25);
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; } /* lock page scroll */

body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 80% 10%, #26311f 0%, #1a2217 45%, var(--bg) 100%) fixed,
    linear-gradient(180deg, var(--bg-2), var(--bg));
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  line-height: 1.6;
}

a { color: var(--text); text-decoration: none; }

/* One-viewport grid layout: header | hero | footer */
.wrap {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden; /* prevent internal scroll */
}

/* --- Header --- */
header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; z-index: 30;
  background: linear-gradient(to bottom, rgba(15,20,12,.9), rgba(15,20,12,.5), rgba(15,20,12,0));
  border-bottom: 1px solid rgba(43,51,36,.6);
  backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 12px; letter-spacing: 1px; }
.logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: conic-gradient(from 210deg, #26311f 0, #12160f 25%, #26311f 50%, #12160f 75%, #26311f 100%);
  position: relative;
  box-shadow: 0 0 40px rgba(205,149,29,.14), inset 0 0 30px rgba(230,181,71,.08);
}
.logo::after {
  content: ""; position: absolute; inset: 6px; border-radius: 8px;
  background: radial-gradient(70% 80% at 60% 40%,
    rgba(205,149,29,.95),
    rgba(230,181,71,.55) 40%,
    rgba(205,149,29,.18) 70%,
    transparent 72%);
}
/* ⬆️ Bigger brand title */
.brand h1 {
  font: 700 24px Rajdhani, Montserrat, sans-serif;
  margin: 0;
  letter-spacing: 1.5px;
}
/* ⬆️ Bigger “Launching Soon” chip */
.chip {
  font: 700 14px/1 Rajdhani, sans-serif; color: #111;
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  padding: 8px 14px; border-radius: 999px;
  letter-spacing: 1px;
}

/* --- Hero (centered, single screen) --- */
.hero {
  position: relative;
  display: grid;
  place-items: center;  /* perfect centering */
  padding: 0 22px;      /* no top/bottom padding */
  min-height: 0;        /* prevent grid overflow */
}

/* film grain */
.noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .06;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.6"/></svg>');
}

/* --- Animated Aurora (mustard × olive) --- */
.bg-aurora{
  position: fixed;
  inset: -10% -10% -10% -10%;
  pointer-events: none;
  filter: blur(42px) saturate(120%);
  opacity: .28;
  mix-blend-mode: screen;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(205,149,29,.35), transparent 60%),
    radial-gradient(35% 45% at 80% 20%, rgba(30,36,22,.45), transparent 60%),
    radial-gradient(45% 60% at 60% 70%, rgba(230,181,71,.25), transparent 65%),
    radial-gradient(35% 45% at 20% 80%, rgba(30,36,22,.35), transparent 60%);
  animation: auroraShift 38s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes auroraShift{
  0%   { transform: translate3d(0,0,0) scale(1); opacity:.26; }
  50%  { transform: translate3d(-2%, -3%, 0) scale(1.05); opacity:.32; }
  100% { transform: translate3d(2%, 3%, 0) scale(1.02); opacity:.28; }
}

/* ensure hero content sits above BG effects */
.hero { z-index: 1; }
.hero-inner { max-width: 980px; text-align: center; position: relative; z-index: 2; }

.eyebrow { font: 600 14px Rajdhani, sans-serif; color: var(--muted); letter-spacing: 3px; text-transform: uppercase; }
.title { font: 700 64px/1.05 Rajdhani, sans-serif; margin: .25em 0 .1em; letter-spacing: 1px; }
.title .ember {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(205,149,29,.18));
}

/* ✅ New tagline style */
.tagline {
  font-weight: 700;
  font-size: 20px;
  color: var(--accent-2);
  letter-spacing: 2px;
  margin: 12px 0 20px;
  text-transform: uppercase;
}

.subtitle { color: var(--muted); font-weight: 500; font-size: 18px; max-width: 780px; margin: 0 auto 30px; }

/* --- CTA Buttons --- */
.cta-bar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }
.btn {
  border: 1px solid var(--border); background: linear-gradient(180deg, #171e14, #11170f);
  color: var(--text); padding: 14px 18px; border-radius: 12px; font-weight: 600; letter-spacing: .3px; transition: transform .15s ease, border-color .15s ease;
}
.btn:hover { border-color: #35402e; transform: translateY(-1px); }
.btn--primary { border: none; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #111; box-shadow: 0 10px 30px rgba(205,149,29,.22); }

/* --- Footer --- */
footer { padding: 16px 22px 24px; text-align: center; color: var(--muted); }
.mail { font-weight: 600; }
.sep { opacity: .3; margin: 0 10px; }

/* --- Small screens --- */
@media (max-width: 520px) {
  .title { font-size: 42px; }
}

/* ========== Premium Notice (Success) ========== */
.notice{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--nv-border);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.2)), var(--nv-bg);
  color:var(--nv-fg);
  border-radius:14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.35), 0 0 0 0 var(--nv-glow) inset;
  transform: translateY(6px);
  opacity:0;
  pointer-events:none;
}
.notice--show{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
  transition: opacity .5s ease, transform .5s ease, box-shadow .5s ease;
  box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 0 1px var(--nv-glow) inset;
}
.notice__icon{
  display:grid;
  place-items:center;
  width:32px; height:32px;
  border-radius:50%;
  background: radial-gradient(closest-side, var(--nv-glow), transparent);
  color: var(--nv-accent);
  flex: 0 0 auto;
}
.notice__content{ line-height:1.35; }
.notice__title{ font-weight:600; letter-spacing:.2px; }
.notice__text{ font-size:.95rem; color: var(--nv-soft); margin-top:2px; }
.notice__close{
  margin-left:auto;
  background:transparent;
  border:0;
  color: var(--nv-soft);
  cursor:pointer;
  padding:6px;
  border-radius:10px;
  transition: background .2s ease, color .2s ease;
}
.notice__close:hover, .notice__close:focus-visible{
  color: var(--nv-fg);
  background: rgba(255,255,255,.06);
  outline:none;
}

/* ========== Animated Starfield (Parallax) ========== */
.starfield{ position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.starfield .stars{ position:absolute; inset:0; }

.starfield .stars i{
  position:absolute;
  width: 2px; height: 2px; border-radius: 50%;
  background: var(--accent-2); /* warm specks */
  opacity: .55;
  animation:
    twinkle var(--tw,6s) ease-in-out infinite,
    drift   var(--dr,60s) linear infinite;
  will-change: transform, opacity;
}

/* Layer speeds (parallax) */
.starfield .l1 i{ --dr: 60s; --tw: 6s;  opacity:.55; }
.starfield .l2 i{ --dr: 90s; --tw: 7.5s;opacity:.45; transform: scale(1.1); }
.starfield .l3 i{ --dr: 130s;--tw: 9s;  opacity:.35; transform: scale(1.25); }

@keyframes drift{
  0%   { transform: translate3d(0,0,0) }
  100% { transform: translate3d(-120px, -60px, 0) } /* slow diagonal drift */
}
@keyframes twinkle{
  0%,100%{ opacity:.2; transform: translateY(0) }
  50%    { opacity:1;  transform: translateY(-2px) }
}

/* Shooting star */
.shooting-star{
  position: absolute;
  top: 0; left: 0;
  width: 120px; height: 2px;
  background: linear-gradient(90deg, var(--accent-2), rgba(230,181,71,0));
  filter: drop-shadow(0 0 6px rgba(230,181,71,.9));
  transform: rotate(-20deg);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  animation: shoot 1.2s ease-out forwards;
}
@keyframes shoot{
  0%   { opacity:0; transform: translate3d(0,0,0) rotate(-20deg) }
  10%  { opacity:1; }
  100% { opacity:0; transform: translate3d(-1200px, 600px, 0) rotate(-20deg) }
}

/* === Overlay Panels (single-page, no scroll) === */
.panel{
  position: fixed;
  inset: 0;
  background: rgba(6,8,5,.6);
  backdrop-filter: blur(6px);
  display: none;
  place-items: center;
  z-index: 40; /* above hero and bg */
}
.panel[aria-hidden="false"]{ display: grid; }

.panel__dialog{
  width: min(720px, 92vw);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(205,149,29,.12) inset;
  animation: panelIn .25s ease both;
}
@keyframes panelIn{
  from{ transform: translateY(12px); opacity: 0; }
  to  { transform: translateY(0);    opacity: 1; }
}
.panel__close{
  position: absolute;
  top: 14px; right: 16px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 10px;
}
.panel__close:hover, .panel__close:focus-visible{
  color: var(--text);
  background: rgba(255,255,255,.06);
  outline: none;
}

/* --- Motion preferences --- */
@media (prefers-reduced-motion: reduce){
  .bg-aurora, .starfield .stars i, .shooting-star, .notice, .notice--show, .panel__dialog{
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .bg-aurora{ opacity:.18; }
}

/* === Contact Panel Email Input (Bigger & Premium) === */
.notify-form {
  display: flex;
  flex-direction: column;   /* stack neatly in the panel */
  gap: 14px;
  align-items: center;      /* center the field + button */
}

.notify-form input[type="email"] {
  width: 100%;
  max-width: 520px;         /* slightly bigger */
  padding: 18px 16px;       /* taller */
  font-size: 16px;          /* clearer */
  border-radius: 14px;      /* softer corners */
  border: 1px solid var(--border);
  background: #11170f;
  color: var(--text);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}

.notify-form .btn {
  width: 100%;
  max-width: 520px;         /* align button width to input */
  padding: 16px 18px;
  border-radius: 14px;
}


/* --- Mobile viewport & safe areas --- */
.wrap {
  height: 100dvh;               /* default */
}
@supports (height: 100svh) {
  .wrap { height: 100svh; }     /* fix for mobile browser UI bars */
}
body {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Title & tagline scale nicely on small screens */
.title {
  font-size: clamp(36px, 7.5vw, 64px);
}
.tagline {
  font-size: clamp(14px, 3.6vw, 20px);
  letter-spacing: 1.6px;
}

/* Bigger header text on phones without wrapping weirdly */
.brand h1 {
  font-size: clamp(18px, 5.2vw, 24px);
}
.chip {
  font-size: clamp(12px, 3.5vw, 14px);
  padding: 8px 14px;
}

/* Panel dialog: make sure it never overflows screen height on mobile */
.panel__dialog {
  max-height: min(80vh, 640px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Email input: comfy tap targets */
.notify-form input[type="email"],
.notify-form .btn {
  min-height: 48px;            /* finger-friendly */
  font-size: 16px;             /* prevents iOS zoom */
}

/* Prevent accidental subpixel scroll on some Android WebViews */
.hero { overscroll-behavior: none; }

/* Extra small devices */
@media (max-width: 360px) {
  .cta-bar { gap: 10px; }
  .btn { padding: 12px 14px; border-radius: 10px; }
}