/* ===========================================================
   Lumina Wellness Center — Coming Soon
   Brand palette derived exclusively from the Lumina logo:
   #6B3594 (core violet), tints/shades of it, plus white & near-black-violet.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,600&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --violet-900:#180B22;   /* deep near-black violet, dark bg */
  --violet-800:#2A1338;
  --violet-700:#4A2266;
  --violet-600:#6B3594;   /* brand core */
  --violet-500:#8A56B3;
  --violet-400:#A579CE;
  --violet-300:#C6A7E0;
  --violet-200:#E4D3F2;
  --violet-100:#F4EEFA;
  --white:#FFFFFF;

  --bg: var(--white);
  --surface: var(--violet-100);
  --text: var(--violet-900);
  --text-soft: var(--violet-700);
  --text-faint: var(--violet-500);
  --brand: var(--violet-600);
  --brand-strong: var(--violet-700);
  --border: rgba(107,53,148,.16);
  --dot-color: var(--violet-600);
  --shape-a: var(--violet-200);
  --shape-b: var(--violet-300);
  --shadow: 0 20px 60px -20px rgba(107,53,148,.35);
  --logo-current: url('../assets/logo-light.png');

  --fs-clamp: clamp(0.82, 1, 1);
}

html[data-theme="dark"]{
  --bg: var(--violet-900);
  --surface: var(--violet-800);
  --text: var(--violet-100);
  --text-soft: var(--violet-200);
  --text-faint: var(--violet-400);
  --brand: var(--violet-400);
  --brand-strong: var(--violet-300);
  --border: rgba(198,167,224,.18);
  --dot-color: var(--white);
  --shape-a: rgba(165,121,206,.14);
  --shape-b: rgba(198,167,224,.10);
  --shadow: 0 20px 70px -20px rgba(0,0,0,.55);
}

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

html,body{
  height:100%;
  margin:0;
  padding:0;
  overscroll-behavior:none;
  overflow-x:hidden;
  max-width:100%;
}

body{
  overflow-y:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  transition:background .45s ease, color .45s ease;
  -webkit-font-smoothing:antialiased;
}

.stage{
  position:relative;
  width:100vw;
  height:100dvh;
  overflow:visible;
  display:flex;
  flex-direction:column;
}

/* ---------- background decoration ---------- */
.bg-decor{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible; width:100vw; height:100vh; }

.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  transition:background .45s ease, opacity .45s ease;
}
.blob--1{ width:38vmax; height:38vmax; top:-16vmax; left:-12vmax; background:var(--shape-a); }
.blob--2{ width:26vmax; height:26vmax; bottom:-12vmax; right:-6vmax; background:var(--shape-b); }
.blob--3{ width:16vmax; height:16vmax; top:38%; left:46%; background:var(--shape-a); opacity:.6; }

.square-outline{
  position:absolute;
  border:1.5px solid var(--border);
  border-radius:18px;
}
.square-outline--1{ width:9vmax; height:9vmax; top:12%; right:8%; transform:rotate(18deg); }
.square-outline--2{ width:5vmax; height:5vmax; bottom:16%; right:30%; transform:rotate(-14deg); }

.dot-cascade{ 
  position:absolute; 
  color:var(--dot-color); 
  transition:color .45s ease;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
}
.dot-cascade--tl{ top:-8%; left:-3%; width:min(34vw,360px); height:auto; opacity:.9; }
.dot-cascade--br{ bottom:-4%; right:-3%; width:min(30vw,320px); height:auto; opacity:.7; transform:rotate(180deg); }

.sparkle{
  position:absolute;
  color:var(--brand);
  opacity:.55;
  transition:color .45s ease;
  pointer-events:none;
  z-index:1;
}
.sparkle svg{ width:100%; height:100%; display:block; }
.sparkle--1{ width:22px; height:22px; top:52%; left:56%; animation:twinkle 4.5s ease-in-out infinite; }
.sparkle--2{ width:14px; height:14px; top:66%; left:40%; animation:twinkle 4.5s ease-in-out infinite 1.4s; }
.sparkle--3{ width:18px; height:18px; top:34%; right:8%; animation:twinkle 4.5s ease-in-out infinite 2.6s; }
.sparkle--4{ width:16px; height:16px; top:12%; right:15%; animation:twinkle 5s ease-in-out infinite 0.8s; }
.sparkle--5{ width:13px; height:13px; bottom:24%; left:12%; animation:twinkle 4.2s ease-in-out infinite 1.2s; }
.sparkle--6{ width:19px; height:19px; top:48%; right:5%; animation:twinkle 4.8s ease-in-out infinite 2s; }
.sparkle--7{ width:11px; height:11px; bottom:18%; right:18%; animation:twinkle 4.6s ease-in-out infinite 0.6s; }
.sparkle--8{ width:15px; height:15px; top:11%; left:14%; animation:twinkle 5.2s ease-in-out infinite 1.8s; }
.sparkle--9{ width:12px; height:12px; bottom:32%; right:35%; animation:twinkle 4.4s ease-in-out infinite 0.4s; }

@keyframes twinkle{
  0%,100%{ opacity:.25; transform:scale(.85); }
  50%{ opacity:.85; transform:scale(1.05); }
}

/* ---------- header ---------- */
.topbar{
  position:relative;
  z-index:3;
  display:flex;
  flex-wrap:wrap;
  row-gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:clamp(16px,2.6vh,28px) clamp(20px,4vw,56px) 0;
}

@media (min-width:881px) and (max-width:1120px){
  .nav-menu{ gap:2px; }
  .nav-btn{ padding:4px 9px; font-size:.68rem; }
  .brand-mark .tagline{ display:none; }
}

.brand-mark{ display:flex; align-items:center; gap:12px; }
.brand-mark img{ height:clamp(45px,6vh,60px); width:auto; display:block; }
.brand-mark .divider{ width:1px; height:22px; background:var(--border); }
.brand-mark .tagline{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-faint);
}

.nav-menu{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
}

.nav-btn{
  padding:4px 12px;
  border-radius:4px;
  background:transparent;
  color:var(--text-soft);
  border:none;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.04em;
  cursor:pointer;
  transition:all .25s ease;
  text-transform:uppercase;
}

.nav-btn:hover{
  color:var(--text);
}

.nav-btn.active{
  background:var(--brand);
  color:var(--white);
  border-radius:12px;
  padding:4px 14px;
}

@media (prefers-reduced-motion:reduce){
  .nav-btn{
    transition:none;
  }
}

.theme-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px 8px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(244,238,250,.9));
  color:var(--text-soft);
  cursor:pointer;
  box-shadow:0 10px 24px rgba(107,53,148,.12);
  transition:transform .25s ease, box-shadow .25s ease, background .35s ease, border-color .35s ease, color .35s ease;
}
.theme-toggle:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(107,53,148,.18);
}
.theme-toggle:active{ transform:translateY(0); }
.theme-toggle__icon{
  width:34px;
  height:34px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--brand);
  color:#fff;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.25);
  transition:background .35s ease, transform .35s ease;
}
html[data-theme="dark"] .theme-toggle__icon{
  transform:rotate(20deg);
  background:linear-gradient(135deg, var(--violet-400), var(--violet-600));
}
.theme-toggle svg{
  width:15px;
  height:15px;
  flex-shrink:0;
}
.theme-toggle .theme-icon-sun{ display:block; }
.theme-toggle .theme-icon-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .theme-icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .theme-icon-moon{ display:block; }
.theme-toggle span.label{
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--text-soft);
}
html[data-theme="dark"] .theme-toggle{
  background:linear-gradient(135deg, rgba(42,19,56,.95), rgba(74,34,102,.92));
  border-color:rgba(198,167,224,.22);
  color:var(--text);
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
html[data-theme="dark"] .theme-toggle span.label{ color:var(--text); }

/* ---------- main split layout ---------- */
.main{
  position:relative;
  z-index:2;
  flex:1;
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  align-items:center;
  padding:0 clamp(20px,4vw,56px);
  min-height:0;
}

.panel-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(10px,1.8vh,18px);
  max-width:560px;
  padding-right:clamp(10px,3vw,40px);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  padding:6px 14px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--brand-strong);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.eyebrow .pulse{
  width:7px; height:7px; border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 0 rgba(107,53,148,.5);
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(107,53,148,.45); }
  70%{ box-shadow:0 0 0 9px rgba(107,53,148,0); }
  100%{ box-shadow:0 0 0 0 rgba(107,53,148,0); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

.eyebrow--top-right{
  position:absolute;
  top:clamp(0px, 1vh, 8px);
  left:50%;
  transform:translateX(-50%);
  z-index:2;
}

h1.headline{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-optical-sizing:auto;
  line-height:.98;
  margin:0 0 clamp(8px, 1.2vh, 14px) 0;
  font-size:clamp(2.4rem, 6vw, 5.6rem);
  letter-spacing:-.01em;
  color:var(--text);
}

@media (min-width:1024px){
  h1.headline{
    transform:translateY(-155%);
  }
}

h1.headline em{
  font-style:italic;
  font-weight:300;
  color:var(--brand);
}

.subhead{
  margin:0;
  font-size:clamp(.95rem,1.6vh,1.08rem);
  line-height:1.55;
  color:var(--text-soft);
  max-width:46ch;
}

.quote-wrap{
  margin-top:clamp(6px,1.2vh,12px);
  padding-left:clamp(14px,1.6vw,18px);
  border-left:2px solid var(--brand);
  min-height:64px;
}
.quote-text{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:300;
  font-size:clamp(1rem,1.9vh,1.2rem);
  color:var(--text);
  line-height:1.5;
  margin:0 0 4px;
}
.quote-source{
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-faint);
  font-weight:600;
}

.socials{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:clamp(8px,1.6vh,16px);
}
.socials a{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--brand-strong);
  transition:transform .25s ease, background .3s ease, color .3s ease, box-shadow .3s ease;
}
.socials a svg{ width:18px; height:18px; }
.socials a:hover{
  transform:translateY(-3px);
  background:var(--brand);
  color:#fff;
  box-shadow:var(--shadow);
}
.socials .divider-label{
  font-size:.68rem;
  color:var(--text-faint);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-right:2px;
  font-weight:700;
}

/* ---------- right visual panel ---------- */
.panel-right{
  position:relative;
  z-index:3;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.art-frame{
  position:relative;
  width:100%;
  max-width:680px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.art-frame .hero-image-stack{
  position:relative;
  width:100%;
  max-width:680px;
  min-height:clamp(320px, 68vh, 700px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.art-frame .hero-image{
  position:absolute;
  inset:0;
  margin:auto;
  width:100%;
  height:auto;
  max-height:72vh;
  object-fit:contain;
  opacity:0;
  visibility:hidden;
  transform:scale(0.94) translateY(10px);
  filter:blur(10px) brightness(.94);
  transition:opacity 1.2s ease, transform 1.2s cubic-bezier(.22,1,.36,1), filter 1.2s ease, visibility 0s linear 1.2s;
  filter:drop-shadow(0 25px 45px rgba(107,53,148,.25));
}
.art-frame .hero-image.active{
  opacity:1;
  visibility:visible;
  transform:scale(1) translateY(0);
  filter:blur(0) brightness(1) drop-shadow(0 25px 45px rgba(107,53,148,.25));
  transition:opacity 1.2s ease, transform 1.2s cubic-bezier(.22,1,.36,1), filter 1.2s ease;
}
html[data-theme="dark"] .art-frame .hero-image{
  filter:drop-shadow(0 25px 45px rgba(0,0,0,.5)) brightness(.97);
}

.art-frame .halo{
  position:absolute;
  width:78%;
  height:78%;
  border-radius:50%;
  background:radial-gradient(circle,var(--shape-a) 0%, transparent 70%);
  z-index:-1;
}

/* ---------- footer ---------- */
.footer{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:clamp(10px,1.8vh,18px) clamp(20px,4vw,56px) clamp(14px,2.4vh,24px);
  font-size:.72rem;
  color:var(--text-faint);
  letter-spacing:.02em;
}
.footer .dot-sep{ opacity:.5; margin:0 8px; }

/* ---------- responsive ---------- */
@media (max-width: 880px){
  body{ overflow-y:auto; overflow-x:hidden; }
  .stage{ height:auto; min-height:100dvh; overflow-x:hidden; }

  .topbar{ padding:14px 16px 0; gap:10px; }
  .brand-mark img{ height:clamp(30px,7vw,40px); }
  .brand-mark .tagline{ display:none; }
  .brand-mark .divider{ display:none; }
  .nav-menu{ display:none; }
  .theme-toggle{ padding:6px 10px 6px 6px; gap:6px; }
  .theme-toggle__icon{ width:28px; height:28px; }
  .theme-toggle span.label{ font-size:.68rem; }

  .main{
    grid-template-columns:1fr;
    padding:4px 20px 0;
    gap:18px;
  }
  .panel-left{ order:2; max-width:100%; padding-right:0; text-align:left; }
  .panel-right{ order:1; padding-top:44px; }
  .eyebrow--top-right{ top:0; white-space:nowrap; }
  .art-frame .hero-image-stack{ min-height:clamp(220px, 34vh, 360px); }
  .art-frame .hero-image{ max-height:34vh; }

  h1.headline{ font-size:clamp(2rem,10vw,2.8rem); }
  .subhead{ font-size:.92rem; }
  .quote-wrap{ min-height:0; }

  /* keep the scene calm on small screens: fewer, quieter accents */
  .blob--3, .square-outline--1, .square-outline--2{ display:none; }
  .sparkle--4, .sparkle--5, .sparkle--6, .sparkle--7, .sparkle--8, .sparkle--9{ display:none; }
  .sparkle--1{ top:6%; left:8%; }
  .sparkle--2{ top:10%; right:10%; left:auto; }
  .sparkle--3{ display:none; }
  .dot-cascade--tl{ width:38vw; opacity:.55; }
  .dot-cascade--br{ width:32vw; opacity:.4; }

  .footer{ flex-direction:column; gap:6px; text-align:center; padding-bottom:20px; }
}

@media (min-width: 881px){
  .panel-left{
    align-self:start;
    padding-left:clamp(24px, 4vw, 64px);
    margin-top:min(25vh, 170px);
  }

  .panel-left .headline{
    white-space:nowrap;
  }

  .art-frame .hero-image-stack{
    transform:translateX(-5%) translateY(10%);
  }
}

@media (max-width: 380px){
  h1.headline{ font-size:clamp(1.8rem,11vw,2.3rem); }
  .socials a{ width:38px; height:38px; }
  .eyebrow--top-right{ font-size:.62rem; padding:5px 10px; gap:6px; }
}

@media (max-height: 620px) and (min-width:881px){
  h1.headline{ font-size:clamp(2rem,5vw,3.4rem); }
  .art-frame .hero-image{ max-height:52vh; }
  .quote-wrap{ min-height:0; }
}

@media (prefers-reduced-motion: reduce){
  .sparkle, .eyebrow .pulse{ animation:none; }
  .theme-toggle .knob{ transition:none; }
}