/* ============================================================
   L'ATELIER CÉLESTE — DESIGN SYSTEM
   Skin, governed by time.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Raleway:wght@200;300;400;500&display=swap');

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  /* Day */
  --day-bg: #F9F3E6;
  --day-deep: #0C0907;
  --day-gold: #C4954A;
  --day-gold-light: #E8C87A;
  --day-gold-pale: #F5E9CF;
  --day-amber: #8B6420;
  --day-cream: #FDF8EE;

  /* Night */
  --night-bg: #07030F;
  --night-violet: #2D0F5E;
  --night-mid: #5C2BA0;
  --night-light: #9B72D4;
  --night-pale: #F1ECFF;
  --night-star: #F0EBFF;
  --night-deep: #03010A;

  /* Neutral */
  --white: #FDFCFA;
  --off-white: #F5F3EF;
  --black: #080705;
  --grey-warm: #9C9488;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Raleway', sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  --space-2xl: 14rem;

  /* Animation */
  --ease-luxury: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }

/* ── TYPOGRAPHY BASE ───────────────────────────────────────── */
.t-display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.t-headline {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
}
.t-subhead {
  font-family: var(--font-body);
  font-weight: 200;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: 0.65rem;
}
.t-body {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.85;
  letter-spacing: 0.01em;
}
.t-label {
  font-family: var(--font-body);
  font-weight: 200;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-size: 0.6rem;
}

/* ── NAVIGATION ────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 3rem;
  mix-blend-mode: normal;
  gap: 1.45rem;
}

/* Yellow→Purple gradient animation for home nav */
@keyframes spectrumShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.page-home .nav-logo {
  filter: invert(1) drop-shadow(0 0 18px rgba(155, 114, 212, 0.35));
}

/* Non-home pages: plain white logo */
.nav-logo {
  display: block;
  width: clamp(8.5rem, 14vw, 13rem);
  height: clamp(3.35rem, 5.8vw, 5.25rem);
  background: url('../assets/logo.png') center / contain no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  filter: invert(1) drop-shadow(0 0 28px rgba(0,0,0,0.45));
}

.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.98;
  transition: opacity 0.4s var(--ease-luxury), background-position 0.6s ease;
  text-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* Home page nav links: gradient shimmer */
.page-home .nav-links a {
  background: linear-gradient(90deg,
    #F5D060, #C4954A, #9B72D4, #6B3FA8, #9B72D4, #C4954A, #F5D060
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 1;
  animation: spectrumShift 10s ease-in-out infinite;
  text-shadow: none;
  filter: drop-shadow(0 0 8px rgba(196, 149, 74, 0.3));
}

/* Stagger each link's animation phase */
.page-home .nav-links li:nth-child(1) a { animation-delay: 0s; }
.page-home .nav-links li:nth-child(2) a { animation-delay: -2s; }
.page-home .nav-links li:nth-child(3) a { animation-delay: -4s; }
.page-home .nav-links li:nth-child(4) a { animation-delay: -6s; }
.page-home .nav-links li:nth-child(5) a { animation-delay: -8s; }

.page-home .nav-links a:hover {
  filter: drop-shadow(0 0 14px rgba(155, 114, 212, 0.7));
  opacity: 1;
}

.nav-links a:hover { opacity: 1; }
.nav-links a.active { opacity: 1; }

.nav--day .nav-logo,
.nav--day .nav-links a {
  color: var(--day-deep);
  text-shadow: none;
}

.nav--day .nav-logo {
  filter: drop-shadow(0 8px 22px rgba(95, 54, 0, 0.12));
}

.nav--night .nav-logo,
.nav--night .nav-links a {
  color: var(--night-pale);
  text-shadow: 0 0 30px rgba(90, 40, 180, 0.4);
}

.nav--night .nav-logo {
  filter: invert(1) drop-shadow(0 0 28px rgba(90, 40, 180, 0.4));
}

/* ── HOME PAGE ─────────────────────────────────────────────── */
body.page-home {
  background: var(--black);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.home-split {
  display: flex;
  height: 100vh;
  width: 100vw;
  position: relative;
}

/* Day panel */
.panel-day {
  flex: 1;
  position: relative;
  background: linear-gradient(
    135deg,
    #F9F2DC 0%,
    #EDD898 25%,
    #D4A843 55%,
    #A87830 80%,
    #6B4C1A 100%
  );
  cursor: pointer;
  transition: flex 0.8s var(--ease-luxury);
  overflow: hidden;
}

.panel-day::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 40%, rgba(255, 240, 180, 0.5) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 80%, rgba(160, 100, 20, 0.4) 0%, transparent 50%);
  pointer-events: none;
}

.panel-night {
  flex: 1;
  position: relative;
  background: linear-gradient(
    135deg,
    #12012E 0%,
    #1E0442 20%,
    #2D0A68 45%,
    #1A0840 70%,
    #07030F 100%
  );
  cursor: pointer;
  transition: flex 0.8s var(--ease-luxury);
  overflow: hidden;
}

.panel-night::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(100, 40, 200, 0.5) 0%, transparent 60%),
              radial-gradient(ellipse at 20% 70%, rgba(60, 15, 130, 0.4) 0%, transparent 50%);
  pointer-events: none;
}

.home-split:has(.panel-day:hover) .panel-day { flex: 1.4; }
.home-split:has(.panel-day:hover) .panel-night { flex: 0.6; }
.home-split:has(.panel-night:hover) .panel-night { flex: 1.4; }
.home-split:has(.panel-night:hover) .panel-day { flex: 0.6; }

/* Galaxy canvas - center strip */
.galaxy-strip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 280px;
  z-index: 10;
  pointer-events: none;
}

#milkyway-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Panel content */
.panel-content {
  position: absolute;
  bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Day content: inner-right edge (facing the galaxy) */
.panel-day .panel-content { right: var(--space-lg); text-align: right; }
/* Night content: inner-left edge (facing the galaxy) */
.panel-night .panel-content { left: var(--space-lg); text-align: left; }

.panel-label {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

.panel-day .panel-label { color: var(--day-amber); }
.panel-night .panel-label { color: var(--night-light); }

.panel-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 3.6vw, 3.6rem);
  line-height: 1.1;
}

.panel-day .panel-name { color: #C4954A; }
.panel-night .panel-name { color: var(--night-pale); }

.panel-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
}
.panel-day .panel-sub { color: rgba(30, 20, 5, 0.99); }
.panel-night .panel-sub { color: rgba(220, 210, 255, 0.99); }

.panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: gap 0.4s var(--ease-luxury);
}
.panel-day .panel-cta { color: var(--day-amber); }
.panel-night .panel-cta { color: var(--night-light); }
.panel-cta:hover { gap: 1.25rem; }

.panel-cta::after {
  content: '→';
  font-size: 0.8rem;
}

/* Center tagline overlay */
.home-tagline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  text-align: center;
  pointer-events: none;
  width: 260px;
}

.home-tagline .brand-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.5rem;
  background: linear-gradient(90deg,
    #F5D060, #C4954A, #9B72D4, #6B3FA8, #9B72D4, #C4954A, #F5D060
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: spectrumShift 9s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(196, 149, 74, 0.5));
}

.home-tagline .brand-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  display: block;
  line-height: 1.6;
  background: linear-gradient(90deg,
    #E2D4FF, #9B72D4, #F5D060, #9B72D4, #E2D4FF
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: spectrumShift 12s ease-in-out infinite reverse;
  filter: drop-shadow(0 0 10px rgba(155, 114, 212, 0.4));
}

/* ── PRODUCT PAGES ─────────────────────────────────────────── */

/* -- Day Product Page -- */
body.page-day {
  background: var(--day-bg);
  color: var(--day-deep);
}

/* -- Night Product Page -- */
body.page-night {
  background: var(--night-bg);
  color: var(--night-pale);
}

/* Shared product hero */
.product-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Day hero bg */
.page-day .product-hero {
  background: linear-gradient(
    160deg,
    #FDF6E3 0%,
    #F5E6BC 30%,
    #E8C86A 65%,
    #C9A050 100%
  );
}

/* Night hero bg */
.page-night .product-hero {
  background: linear-gradient(
    160deg,
    #04010C 0%,
    #0F0328 25%,
    #1D0845 55%,
    #2C1060 80%,
    #1A063A 100%
  );
}

/* Jar visual container */
.jar-scene {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 3rem auto;
  animation: float 6s ease-in-out infinite;
}

.product-jar-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.25));
}

.page-day .product-jar-image {
  filter: drop-shadow(0 30px 60px rgba(160, 100, 10, 0.35));
}

.page-night .product-jar-image {
  filter: drop-shadow(0 30px 60px rgba(80, 20, 180, 0.5));
}

.product-jar-image + .jar-svg {
  display: none;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-18px); }
}

/* SVG jar */
.jar-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.25));
}

/* Day jar specific shadows */
.page-day .jar-svg {
  filter: drop-shadow(0 30px 60px rgba(160, 100, 10, 0.35));
}

/* Night jar specific shadows */
.page-night .jar-svg {
  filter: drop-shadow(0 30px 60px rgba(80, 20, 180, 0.5));
}

/* Product content sections */
.product-header {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg) var(--space-md);
  max-width: 700px;
  margin: 0 auto;
}

.product-release-label {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 0.58rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  display: block;
}

.page-day .product-release-label { color: var(--day-gold); }
.page-night .product-release-label { color: var(--night-light); }

.product-headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

.product-philosophy {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.6;
  opacity: 0.98;
}

/* Product body content */
.product-body {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

.product-section {
  margin-bottom: var(--space-xl);
}

.product-section-label {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 0.55rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  display: block;
  opacity: 0.94;
}

.product-text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.9;
}

.product-text + .product-text {
  margin-top: 1.5rem;
}

/* Benefits list */
.benefits-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5;
}

.benefits-list li::before {
  content: '—';
  flex-shrink: 0;
  opacity: 0.9;
  margin-top: 0.1em;
}

/* Texture descriptor */
.texture-block {
  padding: 3rem;
  border-left: 1px solid;
  margin: var(--space-lg) 0;
}

.page-day .texture-block { border-color: rgba(180, 130, 40, 0.25); }
.page-night .texture-block { border-color: rgba(140, 100, 220, 0.25); }

.texture-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.8;
  opacity: 0.98;
}

/* Ritual block */
.ritual-block {
  padding: 3rem;
  position: relative;
}

.page-day .ritual-block { background: rgba(180, 130, 40, 0.05); }
.page-night .ritual-block { background: rgba(100, 50, 200, 0.08); }

.ritual-step {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}

.ritual-number {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  opacity: 0.9;
  flex-shrink: 0;
  margin-top: 0.15em;
}

.ritual-instruction {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.75;
}

/* Scarcity/unit block */
.unit-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-lg) 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
  gap: 1rem;
  margin: var(--space-xl) 0;
}

.page-day .unit-block { border-color: rgba(180, 130, 40, 0.2); }
.page-night .unit-block { border-color: rgba(140, 100, 220, 0.2); }

.unit-number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.02em;
}

.page-day .unit-number { color: var(--day-gold); }
.page-night .unit-number { color: var(--night-light); }

.unit-label {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.94;
}

/* CTA Button */
.btn-reserve {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 1.5rem 3rem;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  border: 1px solid;
  transition: all 0.5s var(--ease-luxury);
  position: relative;
  overflow: hidden;
}

.page-day .btn-reserve {
  color: var(--day-deep);
  border-color: var(--day-gold);
}

.page-day .btn-reserve::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--day-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-luxury);
  z-index: -1;
}

.page-day .btn-reserve:hover::before { transform: scaleX(1); }

.page-night .btn-reserve {
  color: var(--night-pale);
  border-color: var(--night-mid);
}

.page-night .btn-reserve::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--night-mid);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-luxury);
  z-index: -1;
}

.page-night .btn-reserve:hover::before { transform: scaleX(1); }
.page-night .btn-reserve:hover { color: var(--white); }

/* ── RELEASE PAGE ──────────────────────────────────────────── */
body.page-release {
  background: var(--black);
  color: var(--white);
  min-height: 100vh;
}

.release-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12rem var(--space-md) 5rem;
  position: relative;
  background: linear-gradient(160deg, #050010 0%, #0D0225 40%, #140535 70%, #0A0118 100%);
  overflow: hidden;
}

.release-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 50%, rgba(180, 120, 30, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 50%, rgba(90, 30, 180, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.release-roman {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  opacity: 0.92;
  margin-bottom: 2rem;
}

.release-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 1;
  text-align: center;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #E8C87A 0%, #FFFFFF 50%, #B8A0E8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.release-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.1rem;
  opacity: 0.92;
  margin-bottom: var(--space-lg);
}

/* Countdown */
.countdown {
  display: flex;
  gap: 3rem;
  margin-bottom: var(--space-lg);
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.countdown-number {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1;
  min-width: 2ch;
  text-align: center;
}

.countdown-label {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 0.52rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.91;
}

.countdown-divider {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 200;
  opacity: 0.2;
  align-self: flex-start;
  margin-top: 0.2rem;
}

/* Release products grid */
.release-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  max-width: 900px;
  margin: var(--space-lg) auto;
  border: 1px solid rgba(255,255,255,0.06);
}

.release-product {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
}

.release-product.is-day { background: rgba(180, 130, 30, 0.04); }
.release-product.is-night { background: rgba(80, 30, 160, 0.06); }

.rp-type-label {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 0.55rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
}

.is-day .rp-type-label { color: var(--day-gold); }
.is-night .rp-type-label { color: var(--night-light); }

.rp-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.4rem;
}

.rp-philosophy {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.85rem;
  opacity: 0.94;
}

/* Scarcity bar */
.scarcity-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.scarcity-numbers {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  opacity: 0.96;
}

.scarcity-track {
  height: 1px;
  background: rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}

.scarcity-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  transition: width 1.5s var(--ease-reveal);
}

.is-day .scarcity-fill { background: linear-gradient(to right, var(--day-amber), var(--day-gold)); }
.is-night .scarcity-fill { background: linear-gradient(to right, var(--night-violet), var(--night-mid)); }

.rp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 2rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  border: 1px solid;
  transition: all 0.4s var(--ease-luxury);
  margin-top: auto;
}

.is-day .rp-btn {
  color: var(--day-gold-light);
  border-color: rgba(180, 130, 30, 0.3);
}

.is-night .rp-btn {
  color: var(--night-light);
  border-color: rgba(120, 70, 200, 0.3);
}

.rp-btn:hover { letter-spacing: 0.45em; }
.rp-btn::after { content: '→'; font-size: 0.9rem; }

/* ── STORY PAGE ────────────────────────────────────────────── */
body.page-story {
  background: var(--black);
  color: var(--white);
}

.story-intro {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
  position: relative;
  background: linear-gradient(160deg, #080508 0%, #100320 50%, #0C0118 100%);
  overflow: hidden;
}

.story-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3,1,12,0.18), rgba(3,1,12,0.5)),
    radial-gradient(ellipse 45% 70% at 50% 50%, rgba(12, 6, 28, 0.04) 0%, rgba(8, 4, 18, 0.55) 78%),
    url('../assets/PIC%2022.png') center / cover no-repeat;
  opacity: 0.95;
}

.story-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 60% at 50% 50%, rgba(80, 30, 160, 0.15) 0%, transparent 80%),
    radial-gradient(ellipse 30% 30% at 20% 80%, rgba(150, 100, 20, 0.1) 0%, transparent 60%);
}

.story-tagline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1.15;
  max-width: 750px;
  margin-bottom: var(--space-lg);
  position: relative;
  z-index: 1;
}

.story-tagline em {
  font-style: italic;
  opacity: 0.94;
}

.story-opener {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.75;
  max-width: 560px;
  opacity: 0.96;
  position: relative;
  z-index: 1;
}

.story-body {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

.story-chapter {
  margin-bottom: var(--space-xl);
}

.story-chapter-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 0.65rem;
  letter-spacing: 0.5em;
  opacity: 0.88;
  display: block;
  margin-bottom: 2rem;
}

.story-chapter-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 2rem;
}

.story-chapter-text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.9;
  opacity: 0.98;
}

.story-chapter-text + .story-chapter-text {
  margin-top: 1.5rem;
}

/* Brand phrases grid */
.brand-phrases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid rgba(255,255,255,0.06);
  margin: var(--space-xl) 0;
}

.brand-phrase {
  padding: 2.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5;
  background: rgba(255,255,255,0.02);
  opacity: 0.96;
}

.brand-phrase:nth-child(1) { background: rgba(180, 130, 30, 0.04); opacity: 1; }

/* ── ACCOUNT PAGE ──────────────────────────────────────────── */
body.page-account {
  background: var(--black);
  color: var(--white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.account-container {
  max-width: 480px;
  width: 100%;
  padding: var(--space-md);
  text-align: center;
}

.account-eyebrow {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 0.58rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.91;
  margin-bottom: 2rem;
}

.account-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.8rem;
  margin-bottom: 1rem;
}

.account-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  opacity: 0.92;
  margin-bottom: var(--space-lg);
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.account-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}

.account-field label {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 0.58rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.91;
}

.account-field input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 0.75rem 0;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s var(--ease-luxury);
}

.account-field input:focus {
  border-bottom-color: rgba(255,255,255,0.35);
}

.btn-account {
  display: block;
  width: 100%;
  padding: 1.3rem;
  border: 1px solid rgba(255,255,255,0.15);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--white);
  transition: all 0.5s var(--ease-luxury);
  background: transparent;
  cursor: pointer;
}

.btn-account:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.3);
}

.account-divider {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.87;
  margin: 1.5rem 0;
}

/* ── FOOTER ────────────────────────────────────────────────── */
.footer {
  padding: var(--space-lg) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid;
}

body.page-day .footer { border-color: rgba(180, 130, 40, 0.15); }
body.page-night .footer,
body.page-release .footer,
body.page-story .footer,
body.page-account .footer {
  border-color: rgba(255, 255, 255, 0.06);
}

.footer-logo {
  display: block;
  width: 8.5rem;
  height: 3.4rem;
  background: url('../assets/logo.png') center / contain no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
  opacity: 0.94;
  filter: invert(1);
}

body.page-day .footer-logo {
  filter: none;
}

.footer-copy {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  opacity: 0.88;
}

.footer-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.footer-links a {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.88;
  transition: opacity 0.3s;
}

.footer-links a:hover { opacity: 0.98; }

/* ── ANIMATIONS ────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shimmer {
  0% { opacity: 0.3; }
  50% { opacity: 0.8; }
  100% { opacity: 0.3; }
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease-reveal), transform 0.9s var(--ease-reveal);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.35s; }
.reveal-delay-4 { transition-delay: 0.5s; }

/* ── STAR PARTICLES (background) ───────────────────────────── */
.stars-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.star-particle {
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
  border-radius: 50%;
  animation: shimmer var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* ── HORIZONTAL RULE ───────────────────────────────────────── */
.divider {
  width: 40px;
  height: 1px;
  margin: var(--space-lg) auto;
  opacity: 0.2;
}

body.page-day .divider { background: var(--day-gold); }
body.page-night .divider,
body.page-release .divider,
body.page-story .divider { background: var(--night-light); }

/* ── MOBILE HAMBURGER ──────────────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  z-index: 110;
}

.nav-hamburger span {
  display: block;
  height: 1px;
  background: rgba(255,255,255,0.7);
  transition: transform 0.4s ease, opacity 0.3s ease, width 0.3s ease;
  transform-origin: center;
}

.nav-hamburger span:nth-child(1) { width: 22px; }
.nav-hamburger span:nth-child(2) { width: 16px; }
.nav-hamburger span:nth-child(3) { width: 22px; }

.nav-hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); width: 22px; }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 22px; }

/* Mobile nav overlay */
.nav-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 105;
  background: rgba(3,1,12,0.97);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.nav-mobile-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.nav-mobile-overlay a {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 6vw, 2rem);
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.99);
  text-decoration: none;
  transition: color 0.3s;
}

.nav-mobile-overlay a:hover { color: rgba(255,255,255,1); }

/* ── RESPONSIVE (updated) ──────────────────────────────────── */
@media (max-width: 900px) {
  .nav { padding: 1.5rem 1.5rem; }

  .nav-links { gap: 1.5rem; }

  .panel-content { bottom: var(--space-lg); }
  .panel-day .panel-content { right: var(--space-md); text-align: right; }
  .panel-night .panel-content { left: var(--space-md); text-align: left; }

  .galaxy-strip { width: 180px; }

  .release-products { grid-template-columns: 1fr; }

  .brand-phrases { grid-template-columns: 1fr; }

  .countdown { gap: 1.5rem; }

  .release-hero { padding-top: 11rem; }
}

@media (max-width: 600px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile-overlay { display: flex; }

  .panel-name { font-size: 1.6rem; }

  .galaxy-strip { width: 120px; }

  .product-header { padding: 6rem var(--space-sm) var(--space-sm); }

  .product-body { padding: var(--space-lg) var(--space-sm); }

  .texture-block, .ritual-block { padding: 2rem; }

  .release-hero { padding-top: 9.5rem; }
}

/* ── PRICING ─────────────────────────────────────────────────
   Added for $375 per unit / $700 for both. */
.product-price {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 1.7rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.97);
  text-align: center;
  margin: 0 0 1.4rem;
}
.product-price .price-note {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 0.55rem;
}
body.page-day .product-price { color: var(--day-deep); }
body.page-day .product-price .price-note { color: var(--day-gold); }
.rp-price {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.97);
  margin-top: 1.1rem;
}
.rp-price .rp-price-sub {
  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  font-size: 0.55rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 0.55rem;
}
.order-bundle-price {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.84);
  text-align: center;
  margin: var(--space-lg) auto 0;
}