/* ================================
   VitaDeva — Coming Soon (Blue/Turquoise/Gray)
   Mobile-polished + iOS-safe height
   ================================ */

/* Palette */
:root{
  --bg-deep: #0b1220;
  --text: #eaf0ff;
  --muted: #b5c1da;

  /* Accents: blue, turquoise, gray */
  --blue:  59 130 246;   /* #3b82f6 */
  --turq:  56 189 173;   /* #38bdad */
  --gray:  107 114 128;  /* #6b7280 */

  /* Support */
  --ink: #0a0a0a;                  /* wordmark black */
  --stroke: rgba(255,255,255,.85); /* outline for readability */
  --vh: 1vh;                       /* JS will set this to fix iOS 100vh */
}

@media (prefers-color-scheme: light){
  :root{
    --bg-deep: #eef3ff;
    --text: #0f1422;
    --muted: #495a7f;
    --stroke: rgba(255,255,255,.15);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden; /* allow scroll on small screens via media query below */
}

/* ---------- Background: blue / turquoise / gray ---------- */
.bg{ position: fixed; inset: 0; z-index: 0; overflow: hidden; }

/* Deep wash with gray tint */
.wash{
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 800px at 20% 15%, rgba(var(--blue)/.20), transparent 60%),
    radial-gradient(1000px 700px at 80% 85%, rgba(var(--turq)/.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.18)),
    var(--bg-deep);
}

/* Soft colored glows */
.glow{
  position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
  filter: blur(90px); opacity: .45; mix-blend-mode: screen;
  transform: translate(-50%, -50%);
}
.g1{ left: 15%; top: 20%; background: radial-gradient(circle, rgba(var(--blue)/.45), transparent 60%); }
.g2{ left: 85%; top: 80%; background: radial-gradient(circle, rgba(var(--turq)/.45), transparent 60%); }
.g3{ left: 55%; top: 55%; background: radial-gradient(circle, rgba(var(--gray)/.35), transparent 60%); }

/* Subtle animated diagonal lines for texture */
.lines{
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      120deg,
      rgba(255,255,255,.05) 0px,
      rgba(255,255,255,.05) 1px,
      transparent 1px,
      transparent 14px
    );
  opacity: .45;
  animation: drift 40s linear infinite;
}
@keyframes drift { to { transform: translateX(-8%) translateY(-6%); } }

/* ---------- Layout ---------- */
.shell{
  position: relative; z-index: 1;
  min-height: calc(var(--vh) * 100); /* iOS-safe viewport height */
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: center;
  justify-items: center;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(24px, 3vw, 48px);
  /* Respect notches/safe areas on iOS */
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* ---------- Wordmark ---------- */
.brand{ display: grid; place-items: center; }
.wordmark{
  margin: 0;
  font-weight: 750;
  color: var(--ink);
  line-height: 1.02;
  letter-spacing: .3px;
  font-size: clamp(42px, 5.5vw, 100px);
  -webkit-text-stroke: 1.4px var(--stroke);
  text-shadow:
    0 1px 0 rgba(255,255,255,.35),
    0 22px 60px rgba(0,0,0,.4);
}
.wordmark .tm{
  font-size: 40%;
  vertical-align: super;
  margin-left: .12em;
  font-weight: 800;
}

/* ---------- Hero (plain text, no pane) ---------- */
.hero-plain{
  text-align: center;
  margin-top: .25rem;
  padding: 0;
}
.headline{
  margin: 0 0 .3rem 0;
  font-weight: 900;
  font-size: clamp(26px, 3.9vw, 50px);
  line-height: 1.08;
}
.subhead{
  margin: 0 auto;
  max-width: 60ch;
  font-size: clamp(16px, 1.1vw + .4rem, 20px);
  color: var(--muted);
}

/* ---------- Footer ---------- */
.footer{
  width: 100%;
  display: grid; place-items: center;
  color: var(--muted);
  opacity: .95;
  padding: 8px;
}

/* ---------- Mobile fixes ---------- */
@media (max-width: 520px){
  body { overflow: auto; } /* allow scroll so Safari UI can collapse */
  .wordmark{
    font-size: clamp(40px, 9.5vw, 84px);
    -webkit-text-stroke: 1px var(--stroke);
    letter-spacing: .12px;
  }
  .headline{ font-size: clamp(22px, 5.2vw, 34px); }
  .glow{
    width: 80vmin; height: 80vmin;
    filter: blur(70px); opacity: .35;
  }
  .lines{ opacity: .30; animation-duration: 60s; }
}

@media (prefers-reduced-motion: reduce){
  .lines{ animation: none; }
}