/* ═══════════════════════════════════════════════════════════
   V3 — Base Styles
   Reset, variables, typography, global elements
   ═══════════════════════════════════════════════════════════ */

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

:root {
  --bg:          #080c15;
  --surface:     #111827;
  --surface2:    #1a2236;
  --surface3:    #222d42;
  --border:      #1f2937;
  --border-light:#2a3650;
  --text:        #f0f2f8;
  --text-dim:    #c8cdd8;
  --muted:       #7b8ba5;
  /* Brand gradient: V-I-T-A (warm amber → hot pink → soft violet → lavender) */
  --vita-v:      #ffb347;  /* bright warm amber */
  --vita-i:      #ff6b9d;  /* hot pink */
  --vita-t:      #c471ed;  /* soft violet */
  --vita-a:      #e8a0ff;  /* light lavender */
  --accent:      #ff6b9d;  /* hot pink — primary accent */
  --accent-dim:  rgba(255, 107, 157, .15);
  --accent-glow: rgba(255, 107, 157, .25);
  --warm:        #f5a623;
  --success:     #4ade80;
  --error:       #f87171;
  --pink:        #e84393;
  --radius:      16px;
  --radius-sm:   10px;
  --radius-xs:   6px;
  --shadow:      0 4px 24px rgba(0,0,0,.3);
  --shadow-lg:   0 8px 40px rgba(0,0,0,.5);
  --transition:  .2s ease;
  --font:        -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

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

button {
  font-family: var(--font);
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  font-size: inherit;
}

input {
  font-family: var(--font);
  font-size: 16px; /* prevent iOS zoom */
}

img { max-width: 100%; display: block; }

/* ─── Starfield ──────────────────────────────────────────── */
.starfield {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.star {
  position: absolute; border-radius: 50%; background: #fff;
  animation: twinkle var(--dur) ease-in-out infinite alternate;
}
@keyframes twinkle {
  from { opacity: var(--o1); }
  to   { opacity: var(--o2); }
}

/* ─── Shooting Stars — tiny dot, no trail ─────────────── */
.shooting-star {
  position: absolute;
  width: 2.5px; height: 2.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 3px 1px rgba(255,255,255,.6);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ─── Sunrise Gradient ──────────────────────────────────── */
.sunrise-glow {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(
    to top,
    rgba(255, 154, 120, .14) 0%,
    rgba(255, 182, 150, .09) 15%,
    rgba(248, 160, 180, .07) 30%,
    rgba(200, 140, 200, .04) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* ─── Festival Light Motes ──────────────────────────────── */
.mote {
  position: absolute;
  bottom: -10px;
  width: var(--msize); height: var(--msize);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    hsla(var(--mhue), var(--msat), var(--mlight), .7),
    hsla(var(--mhue), var(--msat), var(--mlight), .2) 40%,
    transparent 100%
  );
  box-shadow: 0 0 4px hsla(var(--mhue), var(--msat), var(--mlight), .35);
  animation:
    moteRise var(--mdur) ease-out var(--mdelay) infinite,
    moteWobble calc(var(--mdur) * 0.35) ease-in-out var(--mdelay) infinite;
  opacity: 0;
  will-change: transform, opacity;
}
@keyframes moteRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  4%   { opacity: .65; }
  20%  { transform: translateY(-20vh) translateX(var(--mdrift1)); opacity: .55; }
  /* Wind gust — sudden sideways jolt */
  35%  { transform: translateY(-35vh) translateX(calc(var(--mdrift1) + var(--mgust))); opacity: .5; }
  50%  { transform: translateY(-50vh) translateX(var(--mdrift2)); opacity: .35; }
  70%  { transform: translateY(-70vh) translateX(calc(var(--mdrift2) - var(--mgust) * 0.5)); opacity: .2; }
  100% { transform: translateY(-105vh) translateX(calc(var(--mdrift1) + var(--mgust))); opacity: 0; }
}
@keyframes moteWobble {
  0%, 100% { margin-left: 0; }
  20%  { margin-left: var(--mwobble); }
  50%  { margin-left: calc(var(--mwobble) * -0.6); }
  80%  { margin-left: calc(var(--mwobble) * 0.4); }
}

/* ─── App Shell ──────────────────────────────────────────── */
#app {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
}

/* ─── Animations ─────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* ─── Utility ────────────────────────────────────────────── */
.accent {
  background: linear-gradient(135deg, var(--vita-v), var(--vita-i), var(--vita-t), var(--vita-a));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.warm   { color: var(--warm); }
.muted  { color: var(--muted); }

/* ─── Boot Loader ───────────────────────────────────────── */
.boot-loader {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100dvh; gap: 28px; position: relative; overflow: hidden;
}
.boot-logo {
  font-size: 36px; font-weight: 800; letter-spacing: -.03em;
  opacity: 0; animation: bootFadeIn .6s ease .1s forwards;
}
.boot-logo span {
  background: linear-gradient(135deg, var(--vita-v), var(--vita-i), var(--vita-t), var(--vita-a));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.boot-ring {
  width: 44px; height: 44px;
  opacity: 0; animation: bootFadeIn .5s ease .3s forwards;
}
.boot-ring svg { width: 100%; height: 100%; }
.boot-shimmer {
  position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,107,157,.04) 50%, transparent 100%);
  animation: bootShimmer 2s ease-in-out infinite;
  pointer-events: none;
}
/* Fade out the boot loader when app hydrates */
.boot-loader.hiding {
  animation: bootFadeOut .35s ease forwards;
  pointer-events: none;
}
@keyframes bootFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bootFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes bootShimmer {
  0%   { left: -100%; }
  100% { left: 100%; }
}

/* ─── Scrollbar ────────────────────────���─────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }