/* ── THEME VARIABLES ── */
:root {
  --rose:     #e8547a;
  --rose-lt:  #f9b8cb;
  --blush:    #fde8ef;
  --blush2:   #fcd5e0;
  --petal:    #fff0f5;
  --gold:     #d4956a;
  --gold-lt:  #f5c9a0;
  --mauve:    #c2607a;
  --cream:    #fff8fb;
  --ink:      #3a1828;
  --ink-soft: #6b3050;
  --bg:       #fff0f4;

  --font-cormorant: 'Cormorant Garamond', serif;
  --font-greatvibes: 'Great Vibes', cursive;
  --font-montserrat: 'Montserrat', sans-serif;
  --font-playfair: 'Playfair Display', serif;
  --font-dancing: 'Dancing Script', cursive;
  --font-outfit: 'Outfit', sans-serif;
}

/* ── RESET & BASE ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-cormorant);
  scroll-behavior: smooth;
  cursor: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── STEP PANES SYSTEM ── */
.step-pane {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  scroll-behavior: smooth;
  z-index: 1;
}
.active-step {
  display: block;
  opacity: 1;
  z-index: 10;
}

/* Custom scrollbars inside step panes */
.step-pane::-webkit-scrollbar {
  width: 6px;
}
.step-pane::-webkit-scrollbar-track {
  background: transparent;
}
.step-pane::-webkit-scrollbar-thumb {
  background: rgba(232, 84, 122, 0.25);
  border-radius: 10px;
}
.step-pane::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 84, 122, 0.5);
}

/* ── CUSTOM CURSOR ── */
#cur {
  position: fixed;
  pointer-events: none;
  transition: width 0.25s, height 0.25s, background 0.3s;
}
#cur-ring {
  position: fixed;
  pointer-events: none;
}
body:has(button:hover) #cur, body:has(.c4-card:hover) #cur, body:has(.c5-thought:hover) #cur {
  width: 28px !important;
  height: 28px !important;
  background: var(--mauve) !important;
}

/* ── BACKGROUND UTILITIES ── */
.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(232, 84, 122, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 84, 122, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}

.grid-dot-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(232, 84, 122, 0.15) 1px, transparent 1px);
  background-size: 28px 28px;
}

.pre-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(232, 84, 122, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 84, 122, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── CHAPTER 4 CARDS STYLING (Light Pink Glass) ── */
.c4-card {
  padding: 1.5rem 1.25rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(232, 84, 122, 0.25);
  backdrop-filter: blur(16px);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 10px 30px rgba(232, 84, 122, 0.08);
}
.c4-card:hover {
  background: rgba(253, 232, 239, 0.95);
  border-color: rgba(232, 84, 122, 0.6);
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 15px 40px rgba(232, 84, 122, 0.2);
}
.c4-card.revealed {
  background: rgba(252, 213, 224, 0.95);
  border-color: var(--rose);
  box-shadow: 0 0 25px rgba(232, 84, 122, 0.35);
}

/* ── CHAPTER 5 THOUGHTS STYLING (Light Pink Glass) ── */
.c5-thought {
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(232, 84, 122, 0.2);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 8px 25px rgba(232, 84, 122, 0.06);
}
.c5-thought:hover {
  background: rgba(255, 240, 245, 0.95);
  border-color: rgba(212, 149, 106, 0.5);
  transform: translateX(6px);
}
.c5-thought.revealed {
  background: rgba(253, 232, 239, 0.95);
  border-color: var(--gold);
}

/* ── CHAPTER 8 ADMIRE ITEMS ── */
.c8-item {
  transition: all 0.35s ease;
}
.c8-item:hover {
  background: rgba(253, 232, 239, 0.95);
  border-color: rgba(232, 84, 122, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(232, 84, 122, 0.12);
}

/* ── KEYFRAMES & SPARKS ── */
@keyframes preLoad {
  from { width: 0; }
  to { width: 100%; }
}
.animate-preLoad { animation: preLoad 1.8s ease-out forwards; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn { animation: fadeIn 0.6s ease-out forwards; }

.spark {
  position: fixed;
  pointer-events: none;
  z-index: 250;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  animation: sparkPop 0.8s ease-out forwards;
}
@keyframes sparkPop {
  0% { opacity: 1; transform: scale(1) translate(0, 0); }
  100% { opacity: 0; transform: scale(0) translate(var(--dx), var(--dy)); }
}

.float-el {
  position: fixed;
  pointer-events: none;
  z-index: 200;
  font-size: 1.8rem;
  animation: floatRise 6s linear forwards;
  opacity: 0.85;
}
@keyframes floatRise {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.9; }
  100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; }
}