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

/* ── Variables ───────────────────────────────────────────────────────────── */
:root {
  --lavender:    #c8b8e8;
  --periwinkle:  #8080c0;
  --ghost:       #f8f6ff;
  --ink:         #2a2040;
  --muted:       #7060a8;
  --glass:       rgba(248,246,255,.52);
  --glass-border:rgba(200,184,232,.48);
  --rose:        #e0b8d0;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
html, body { height: 100%; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow-x: hidden;
}

/* ── Video background ────────────────────────────────────────────────────── */
.bg-video {
  position: fixed;
  top: 0; bottom: 0;
  left: -200px;
  width: calc(100% + 200px); height: 100%;
  object-fit: cover;
  z-index: -3;
  opacity: .42;
  filter: saturate(.5) brightness(1.35) hue-rotate(15deg);
}

/* ── Lavender wash ───────────────────────────────────────────────────────── */
.bg-wash {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    155deg,
    rgba(218,208,248,.6) 0%,
    rgba(230,220,252,.5) 35%,
    rgba(208,216,255,.48) 65%,
    rgba(240,228,255,.55) 100%
  );
}

/* ── Scanlines ───────────────────────────────────────────────────────────── */
.bg-scan {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(160,140,210,.022) 2px,
    rgba(160,140,210,.022) 3px
  );
  pointer-events: none;
}

/* ── Star field ──────────────────────────────────────────────────────────── */
.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.star {
  position: absolute;
  border-radius: 50%;
  background: rgba(180,160,230,.6);
  animation: star-drift var(--d,8s) var(--dl,0s) infinite ease-in-out alternate;
}
@keyframes star-drift {
  from { transform: translate(0,0); opacity: var(--op,.4); }
  to   { transform: translate(var(--tx,3px), var(--ty,-6px)); opacity: calc(var(--op,.4) * .4); }
}

/* ── Sparkles ────────────────────────────────────────────────────────────── */
.sparkles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.sp {
  position: absolute;
  color: var(--lavender);
  opacity: 0;
  animation: sp-twinkle var(--dur,4s) var(--delay,0s) infinite ease-in-out;
}
@keyframes sp-twinkle {
  0%,100% { opacity: 0; transform: scale(.5) rotate(0deg); }
  45%,55% { opacity: .75; transform: scale(1.1) rotate(18deg); }
}
.sp.rise {
  animation: sp-rise var(--dur,7s) var(--delay,0s) infinite ease-in-out;
}
@keyframes sp-rise {
  0%   { opacity: 0; transform: translateY(0); }
  15%  { opacity: .5; }
  85%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(-50px); }
}

/* ── Moon ────────────────────────────────────────────────────────────────── */
.moon-wrap {
  text-align: center;
  margin-bottom: 10px;
}
.moon {
  display: inline-block;
  font-size: 1.5rem;
  animation: moon-float 5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(180,160,220,.6));
  color: var(--periwinkle);
}
@keyframes moon-float {
  0%,100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-7px) rotate(4deg); }
}

/* ── Deco text ───────────────────────────────────────────────────────────── */
.deco {
  text-align: center;
  font-size: .72rem;
  letter-spacing: .28em;
  color: var(--lavender);
  margin-bottom: 2px;
}

/* ── Shared keyframe for shimmer headings ────────────────────────────────── */
@keyframes name-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}