:root {
  --purple: #240054;
  --purple-800: #2E0A63;
  --purple-600: #4A2585;
  --purple-300: #8E6FC4;
  --magenta: #E1017A;
  --magenta-soft: #F255A1;
  --cream: #FBF7F4;
  --cream-2: #F4ECF3;
  --ink: #271240;
  --glass-blur: 9px;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', sans-serif;
  --font-label: 'Montserrat', 'Inter', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--purple);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--magenta); color: #fff; }

.font-display { font-family: var(--font-display); }
.font-label { font-family: var(--font-label); }
.tight { letter-spacing: -0.01em; }

/* ---------- LIQUID GLASS ---------- */
.liquid-glass {
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 22%,
    rgba(255,255,255,0) 45%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.18) 80%, rgba(255,255,255,0.5) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
.liquid-glass--light {
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 5px)) saturate(1.2);
  backdrop-filter: blur(calc(var(--glass-blur) + 5px)) saturate(1.2);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 0 28px 70px -40px rgba(39,18,64,0.4);
  color: var(--ink);
}
.liquid-glass--light::before {
  background: linear-gradient(180deg,
    rgba(36,0,84,0.16) 0%, rgba(36,0,84,0.05) 24%,
    rgba(36,0,84,0) 45%, rgba(36,0,84,0) 60%,
    rgba(36,0,84,0.05) 80%, rgba(36,0,84,0.14) 100%);
}

/* ---------- BLUR FADE UP ---------- */
@keyframes blurFadeUp {
  from { opacity: 0; filter: blur(18px); transform: translateY(36px); }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
}
.animate-blur-fade-up { opacity: 0; animation: blurFadeUp 1s ease-out forwards; }
.reveal { opacity: 0; }
.reveal.in { opacity: 1; animation: blurFadeUp 1s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .animate-blur-fade-up, .reveal, .reveal.in {
    opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important;
  }
  .orb, .ken-burns { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- HERO: brand-purple stage with drifting orbs ---------- */
.hero-stage {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #38146F 0%, #260A57 42%, #1B0440 100%);
}
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: 0.55; pointer-events: none;
  will-change: transform;
}
.orb-1 { width: 46vw; height: 46vw; left: -8vw; top: 8vh;
  background: radial-gradient(circle, rgba(225,1,122,0.55), rgba(225,1,122,0) 70%);
  animation: drift1 22s ease-in-out infinite; }
.orb-2 { width: 40vw; height: 40vw; right: -6vw; top: 26vh;
  background: radial-gradient(circle, rgba(142,111,196,0.55), rgba(142,111,196,0) 70%);
  animation: drift2 26s ease-in-out infinite; }
.orb-3 { width: 32vw; height: 32vw; left: 40vw; bottom: -12vh;
  background: radial-gradient(circle, rgba(242,85,161,0.4), rgba(242,85,161,0) 70%);
  animation: drift3 30s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(6vw,4vh) scale(1.12);} }
@keyframes drift2 { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-5vw,5vh) scale(1.1);} }
@keyframes drift3 { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-4vw,-5vh) scale(1.15);} }
/* fine grain so the purple never looks flat */
.hero-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 5px);
}

/* slow elegant zoom for hero photo */
@keyframes kenBurns { 0%{ transform: scale(1.03);} 100%{ transform: scale(1.13);} }
.ken-burns { animation: kenBurns 16s ease-in-out infinite alternate; }

/* soft float for the photo frame */
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }
.floaty { animation: floaty 7s ease-in-out infinite; }

/* chevron bob */
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(8px);} }
.bob { animation: bob 2.2s ease-in-out infinite; }

/* navbar */
.navbar-solid { background: rgba(28,4,64,0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.08); }

.magenta-glow { box-shadow: 0 18px 50px -20px rgba(225,1,122,0.6); }
.accent-glow { box-shadow: 0 0 0 1px rgba(225,1,122,0.40), 0 40px 100px -44px rgba(225,1,122,0.55); }
.tighter { letter-spacing: -0.02em; }

input::placeholder { color: rgba(255,255,255,0.55); }
.input-light::placeholder { color: rgba(39,18,64,0.45); }

/* page-to-page fade-in */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
.page-in { animation: pageIn 0.5s ease-out; }