/* ============================================
   🎄 Mrs. Claus's Christmas Cottage
   A warm refuge for weary hearts
   ============================================ */

/* CSS Variables - Christmas Red, Green & White Palette */
:root {
  --color-cream: #FFFFFF;
  --color-warm-white: #FFFFFF;
  --color-light-sage: #F0F5F0;
  --color-deep-red: #9B2335;
  --color-bright-red: #B83A4B;
  --color-cranberry: #9B2335;
  --color-forest-green: #1A3C34;
  --color-hunter-green: #152E28;
  --color-pine: #264A40;
  --color-sage: #8BA888;
  --color-gold: #C9A227;
  --color-antique-gold: #B8960C;
  --color-warm-gold: #D4AF37;
  --color-amber: #FFBF00;
  --color-chocolate: #2C1810;
  --color-espresso: #1A0F0A;
  --color-soft-shadow: rgba(0, 0, 0, 0.15);
  --color-glow: rgba(155, 35, 53, 0.3);
  
  --font-heading: 'Crimson Text', Georgia, serif;
  --font-body: 'Quicksand', 'Segoe UI', sans-serif;
  
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 5rem;
  
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-round: 50%;
  
  --transition-smooth: all 0.3s ease;
  --transition-slow: all 0.6s ease;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background: var(--color-cranberry);
  color: #F7F4EE;
  line-height: 1.7;
  min-height: 100vh;
}

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: #F7F4EE;
  line-height: 1.3;
}

h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: var(--spacing-md); }
h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); }

p {
  margin-bottom: var(--spacing-sm);
}

a {
  color: var(--color-gold);
  text-decoration: none;
  transition: var(--transition-smooth);
}

a:hover {
  color: #F7F4EE;
}

.signature {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-gold);
  font-size: 1.1rem;
  margin-top: var(--spacing-md);
}

/* ============================================
   ARRIVAL SCREEN
   ============================================ */

.cottage-wrapper {
  min-height: 100vh;
}

.arrival-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #1a2a3a 0%, #2d3a4a 50%, #3d4a5a 100%);
  position: relative;
  overflow: hidden;
  padding: var(--spacing-lg);
}

.snowfall {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, white, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, white, transparent),
    radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 160px 120px, white, transparent);
  background-size: 200px 200px;
  animation: snowfall 10s linear infinite;
  opacity: 0.6;
}

@keyframes snowfall {
  0% { background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px; }
  100% { background-position: 200px 400px, 100px 300px, 150px 350px, 50px 250px, 180px 320px; }
}

.cottage-exterior {
  text-align: center;
  z-index: 1;
}

.cottage-image {
  position: relative;
  display: inline-block;
  margin-bottom: var(--spacing-lg);
}

.cottage-photo {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 
    0 20px 60px rgba(0,0,0,0.5),
    0 0 100px var(--color-glow);
}

.cottage-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(ellipse, var(--color-glow) 0%, transparent 70%);
  pointer-events: none;
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

.arrival-text {
  color: var(--color-warm-white);
}

.cottage-title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  color: var(--color-warm-white);
  text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
  margin-bottom: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.title-subtitle {
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: var(--color-gold);
  font-weight: 400;
  display: block;
}

.cottage-tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: var(--color-gold);
  text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
}

.cottage-tagline-interior {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: var(--color-gold);
  margin-bottom: var(--spacing-lg);
  text-align: center;
  width: 100%;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid rgba(201, 162, 39, 0.3);
}

.arrival-invitation {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--spacing-lg);
  line-height: 1.8;
}

.enter-button {
  background: linear-gradient(135deg, var(--color-deep-red), var(--color-bright-red));
  color: #F7F4EE;
  border: none;
  padding: var(--spacing-md) var(--spacing-xl);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-smooth);
  box-shadow: 0 8px 30px rgba(139, 38, 53, 0.4);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.enter-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(139, 38, 53, 0.6);
}

.door-icon {
  font-size: 1.5rem;
}

/* ============================================
   COTTAGE INTERIOR
   ============================================ */

.cottage-interior,
.cottage-interior-page {
  min-height: 100vh;
  background: var(--color-cranberry);
  padding-bottom: var(--spacing-xxl);
}

.cottage-interior.hidden,
.hidden {
  display: none !important;
}

/* Sound Toggle */
.sound-toggle {
  position: fixed;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background: var(--color-deep-red);
  border: 2px solid #FFFFFF;
  border-radius: var(--radius-round);
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 100;
  font-size: 1.3rem;
  transition: var(--transition-smooth);
  box-shadow: 0 4px 15px var(--color-soft-shadow);
}

.sound-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px var(--color-soft-shadow);
}

/* Navigation */
.cottage-nav {
  background: var(--color-forest-green);
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm);
  border-bottom: 3px solid var(--color-deep-red);
  position: sticky;
  top: 0;
  z-index: 500;
  box-shadow: 0 4px 20px var(--color-soft-shadow);
}

.cottage-nav a {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-weight: 500;
  color: #F7F4EE;
  font-size: 0.95rem;
}

.cottage-nav a:hover {
  background: var(--color-deep-red);
  color: #F7F4EE;
}

.nav-home {
  font-size: 1.2rem;
}

.minimal-nav {
  background: transparent;
  border: none;
  position: fixed;
  box-shadow: none;
}

.minimal-nav a {
  background: rgba(255,255,255,0.9);
  border-radius: var(--radius-round);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Welcome Section */
.welcome-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  max-width: 100%;
}

.mrs-claus-welcome {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  align-items: center;
  text-align: center;
  max-width: 1200px;
  width: 100%;
}

.fireplace-img {
  width: 100%;
  max-width: 900px;
  height: auto;
  max-height: 60vh;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 15px 50px rgba(0,0,0,0.4);
}

.welcome-text {
  max-width: 800px;
}

.home-site-title {
  font-family: var(--font-heading);
  color: #E6B65A;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: var(--spacing-xs);
  text-shadow: 1px 1px 8px rgba(0,0,0,0.35);
}

.welcome-greeting {
  font-family: var(--font-heading);
  /* Softer than pure white for a warmer, gentler feel */
  color: #F7F4EE;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  line-height: 1.3;
  margin-bottom: var(--spacing-md);
}

.welcome-text h1 {
  margin-bottom: var(--spacing-md);
}

/* Gentle Question Section */
.gentle-question {
  background: var(--color-forest-green);
  padding: var(--spacing-xl) var(--spacing-lg);
  text-align: center;
  border-top: 3px solid var(--color-gold);
  border-bottom: 3px solid var(--color-gold);
}

.gentle-question h2 {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: #F7F4EE;
}

.gentle-subtext {
  color: #F7F4EE;
  opacity: 0.9;
  margin-bottom: var(--spacing-lg);
}

.feeling-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
  max-width: 1000px;
  margin: 0 auto;
}

.feeling-card {
  background: #FFFFFF;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: var(--transition-smooth);
  border: 3px solid var(--color-gold);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.feeling-card:hover {
  transform: translateY(-5px);
  background: var(--color-cranberry);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
  border-color: #FFFFFF;
}

.feeling-card:hover .feeling-title,
.feeling-card:hover .feeling-desc {
  color: #F7F4EE;
}

.feeling-icon {
  font-size: 2.5rem;
}

.feeling-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--color-cranberry);
}

.feeling-desc {
  font-size: 0.9rem;
  color: var(--color-chocolate);
}

/* Cottage Rooms Grid */
.cottage-rooms {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-lg);
  text-align: center;
  position: relative;
  z-index: 5;
}

.rooms-intro {
  margin-bottom: var(--spacing-lg);
  font-size: 1.1rem;
}

.rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.room-card {
  background: #FFFFFF;
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  transition: var(--transition-smooth);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  display: block;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 10;
  border: 3px solid var(--color-forest-green);
}

.room-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  background: var(--color-forest-green);
  border-color: var(--color-gold);
}

.room-card:hover h3,
.room-card:hover p {
  color: #F7F4EE;
}

.room-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: var(--spacing-sm);
}

.room-card h3 {
  margin-bottom: var(--spacing-xs);
  color: var(--color-forest-green);
}

.room-card p {
  font-size: 0.9rem;
  color: var(--color-chocolate);
  margin: 0;
}

/* Characters Section */
.characters-section {
  background: var(--color-forest-green);
  padding: var(--spacing-xl) var(--spacing-lg);
  text-align: center;
  border-top: 3px solid var(--color-gold);
  border-bottom: 3px solid var(--color-gold);
}

.characters-section h2 {
  color: #F7F4EE;
  margin-bottom: var(--spacing-lg);
}

.characters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-md);
  max-width: 1000px;
  margin: 0 auto;
}

.character-card {
  background: #FFFFFF;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  text-align: center;
  border: 2px solid var(--color-gold);
  transition: var(--transition-smooth);
}

.character-card:hover {
  background: var(--color-cranberry);
  border-color: #FFFFFF;
}

.character-card:hover h3,
.character-card:hover p {
  color: #F7F4EE;
}

.character-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: var(--spacing-xs);
}

.character-card h3 {
  margin-bottom: var(--spacing-xs);
  font-size: 1.1rem;
  color: var(--color-forest-green);
}

.character-card p {
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.5;
  color: var(--color-chocolate);
}

/* Footer */
.cottage-footer {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  background: var(--color-forest-green);
  color: #F7F4EE;
  border-top: 3px solid var(--color-gold);
}

.cottage-footer p {
  margin-bottom: var(--spacing-xs);
}

.footer-note {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* ============================================
   PAGE WRAPPER - Generic page styling
   ============================================ */

.page-wrapper {
  min-height: 100vh;
  background: var(--color-cranberry);
  position: relative;
}

/* Ensure ambient effects don't affect layout */
.page-wrapper > div[class*="ambient"],
.page-wrapper > div[class*="glow"],
.page-wrapper > div[class*="particles"],
.page-wrapper > div[class*="whisper"],
.page-wrapper > div[class*="snowball"],
.page-wrapper > div[class*="pepper"],
.page-wrapper > div[class*="clock"],
.page-wrapper > div[class*="blanket"],
.page-wrapper > div[class*="cookie"],
.page-wrapper > div[class*="cocoa"],
.page-wrapper > div[class*="celebration"] {
  position: fixed;
  pointer-events: none;
}

.page-wrapper main {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

.page-icon {
  font-size: 3rem;
  display: block;
  text-align: center;
  margin-bottom: var(--spacing-sm);
}

.back-link {
  display: inline-block;
  margin-top: var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-forest-green);
  color: #F7F4EE;
  border-radius: var(--radius-sm);
}

.back-link:hover {
  background: var(--color-pine);
  color: #F7F4EE;
}

/* ============================================
   COMFORT PAGE
   ============================================ */

.comfort-page {
  background: var(--color-cranberry);
}

.comfort-header {
  text-align: center;
  padding: var(--spacing-lg) 0;
}

.comfort-intro {
  background: white;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xl);
  border-left: 4px solid var(--color-deep-red);
  box-shadow: 0 5px 20px var(--color-soft-shadow);
  /* Default site text is warm-white; this section sits on white */
  color: var(--color-chocolate);
}

.comfort-intro p {
  font-size: 1.1rem;
}

.comfort-section h2 {
  text-align: center;
  color: var(--color-deep-red);
}

.comfort-cards {
  display: grid;
  gap: var(--spacing-lg);
}

.comfort-card {
  background: white;
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  box-shadow: 0 5px 20px var(--color-soft-shadow);
  /* Default site text is warm-white; cards sit on white */
  color: var(--color-chocolate);
}

.comfort-card h3 {
  color: var(--color-deep-red);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-forest-green);
}

.comfort-cta {
  text-align: center;
  margin-top: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: #F8F8F8;
  border-radius: var(--radius-lg);
}

.comfort-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
  margin-top: var(--spacing-md);
}

.comfort-link {
  padding: var(--spacing-sm) var(--spacing-md);
  background: white;
  border-radius: var(--radius-sm);
  box-shadow: 0 3px 10px var(--color-soft-shadow);
  transition: var(--transition-smooth);
  /* Default site text is warm-white; these chips sit on white */
  color: var(--color-chocolate);
}

.comfort-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px var(--color-soft-shadow);
}

/* ============================================
   JOY PAGE
   ============================================ */

.joy-page {
  background: var(--color-cranberry);
}

.joy-header {
  text-align: center;
  padding: var(--spacing-lg) 0;
}

.joy-intro {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-xl);
}

.joy-section h2 {
  text-align: center;
  color: var(--color-deep-red);
}

.joy-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-md);
}

.joy-card {
  background: white;
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  box-shadow: 0 5px 20px var(--color-soft-shadow);
  text-align: center;
  /* Default site text is warm-white; cards need a readable base color */
  color: var(--color-chocolate);
}

.joy-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: var(--spacing-sm);
}

.joy-card h3 {
  color: var(--color-forest-green);
  margin-bottom: var(--spacing-sm);
}

.joy-card a {
  color: var(--color-deep-red);
  text-decoration: underline;
}

.joy-activity {
  margin-top: var(--spacing-xl);
}

.joy-activity h2 {
  text-align: center;
}

.pepper-challenge {
  background: linear-gradient(135deg, var(--color-forest-green), var(--color-pine));
  color: #F7F4EE;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.pepper-icon {
  font-size: 3rem;
  flex-shrink: 0;
}

.challenge-text p {
  margin-bottom: var(--spacing-sm);
}

.pepper-note {
  font-style: italic;
  opacity: 0.9;
}

.joy-cta {
  text-align: center;
  margin-top: var(--spacing-xl);
}

.joy-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
  margin-top: var(--spacing-md);
}

.joy-link {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-deep-red);
  color: #F7F4EE;
  border-radius: var(--radius-sm);
  transition: var(--transition-smooth);
}

.joy-link:hover {
  background: var(--color-bright-red);
  color: #F7F4EE;
  transform: translateY(-2px);
}

/* ============================================
   KITCHEN PAGE
   ============================================ */

.kitchen-page {
  background: var(--color-cranberry);
}

.kitchen-header {
  text-align: center;
  padding: var(--spacing-lg) 0;
}

.kitchen-subtitle {
  font-size: 1.2rem;
  color: #F7F4EE;
  opacity: 0.9;
}

.kitchen-intro {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-xl);
}

.recipes-grid {
  display: grid;
  gap: var(--spacing-xl);
}

.recipe-card {
  background: white;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px var(--color-soft-shadow);
  /* Body text defaults to white globally; cards need a readable base color */
  color: var(--color-chocolate);
}

.recipe-card a {
  color: var(--color-deep-red);
  text-decoration: underline;
}

.recipe-card a:hover {
  color: var(--color-bright-red);
}

.recipe-card h2 {
  color: var(--color-deep-red);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-forest-green);
  margin-bottom: var(--spacing-md);
}

.recipe-note {
  font-style: italic;
  color: var(--color-chocolate);
  margin-bottom: var(--spacing-md);
}

.recipe-section {
  margin-bottom: var(--spacing-md);
}

.recipe-section h3 {
  color: var(--color-forest-green);
  margin-bottom: var(--spacing-sm);
}

.recipe-section ul,
.recipe-section ol {
  padding-left: var(--spacing-lg);
}

.recipe-section li {
  margin-bottom: var(--spacing-xs);
}

.recipe-tip {
  background: #F8F8F8;
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-forest-green);
  margin-top: var(--spacing-md);
}

.recipe-tip p {
  margin: 0;
  font-size: 0.95rem;
}

.kitchen-footer {
  text-align: center;
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 2px solid var(--color-forest-green);
}

/* ============================================
   SITTING ROOM PAGE
   ============================================ */

.sitting-room-page {
  background: var(--color-cranberry);
}

.sitting-room-header {
  text-align: center;
  padding: var(--spacing-lg) 0;
}

.sitting-room-subtitle {
  font-size: 1.2rem;
  color: #F7F4EE;
  opacity: 0.9;
}

.sitting-room-intro {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-xl);
}

/* Permission Slips */
.permission-section h2,
.candle-section h2,
.traditions-section h2 {
  text-align: center;
  color: var(--color-deep-red);
  margin-bottom: var(--spacing-sm);
}

.section-intro {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-md);
}

.permission-slip {
  background: white;
  border: 2px dashed var(--color-forest-green);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Ensure card body text is readable on white */
  color: var(--color-chocolate);
}

.permission-header {
  background: var(--color-deep-red);
  color: #F7F4EE;
  padding: var(--spacing-sm);
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.1rem;
}

.permission-body {
  padding: var(--spacing-md);
}

.permission-body h3 {
  color: var(--color-forest-green);
  font-size: 1.3rem;
  margin: var(--spacing-sm) 0;
}

.permission-footer {
  padding: var(--spacing-sm) var(--spacing-md);
  background: #F8F8F8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.signature-line {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-deep-red);
}

.print-btn {
  background: var(--color-forest-green);
  color: #F7F4EE;
  border: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  transition: var(--transition-smooth);
}

.print-btn:hover {
  background: var(--color-pine);
}

/* Candle Section */
.candle-section {
  margin-top: var(--spacing-xxl);
  padding: var(--spacing-xl);
  background: linear-gradient(135deg, var(--color-espresso), #3D2A1D);
  border-radius: var(--radius-lg);
  color: var(--color-cream);
}

.candle-section h2 {
  color: #F7F4EE;
}

.candle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}

.candle-wrapper {
  text-align: center;
}

.candle {
  width: 60px;
  height: 150px;
  position: relative;
  margin: 0 auto var(--spacing-md);
}

.wax {
  width: 60px;
  height: 120px;
  background: linear-gradient(to right, #F5F5DC, #FFFAF0, #F5F5DC);
  border-radius: 5px 5px 30px 30px;
  position: absolute;
  bottom: 0;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.wick {
  width: 3px;
  height: 15px;
  background: #333;
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
}

.flame {
  width: 20px;
  height: 40px;
  background: linear-gradient(to top, #FF6B35, #FFD93D, #FFF);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  animation: flicker 0.5s ease-in-out infinite alternate;
  box-shadow: 
    0 0 30px #FF6B35,
    0 0 60px #FFD93D,
    0 0 100px rgba(255,200,50,0.3);
}

@keyframes flicker {
  0% { 
    transform: translateX(-50%) scale(1) rotate(-2deg);
    opacity: 1;
  }
  100% { 
    transform: translateX(-50%) scale(1.05) rotate(2deg);
    opacity: 0.9;
  }
}

.candle.unlit .flame {
  display: none;
}

.candle-btn {
  background: var(--color-deep-red);
  color: #F7F4EE;
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.candle-btn:hover {
  background: var(--color-bright-red);
}

.candle-btn.hidden {
  display: none;
}

.candle-message {
  max-width: 500px;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.8;
}

/* Traditions Section */
.traditions-section {
  margin-top: var(--spacing-xxl);
}

.traditions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
}

.tradition-card {
  background: white;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: 0 5px 20px var(--color-soft-shadow);
  /* Ensure card body text is readable on white */
  color: var(--color-chocolate);
}

.tradition-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--spacing-sm);
}

.tradition-card h3 {
  color: var(--color-forest-green);
  margin-bottom: var(--spacing-sm);
  font-size: 1.1rem;
}

.tradition-card p {
  font-size: 0.9rem;
  margin: 0;
}

.sitting-room-footer {
  text-align: center;
  margin-top: var(--spacing-xxl);
  padding-top: var(--spacing-lg);
  border-top: 2px solid var(--color-forest-green);
}

/* ============================================
   TREE PAGE
   ============================================ */

.tree-page {
  background: var(--color-cranberry);
}

.tree-header {
  text-align: center;
  padding: var(--spacing-lg) 0;
}

.tree-subtitle {
  font-size: 1.2rem;
  color: #F7F4EE;
  opacity: 0.9;
}

.tree-intro {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-lg);
}

.tree-section {
  background: linear-gradient(135deg, var(--color-forest-green), var(--color-pine));
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  text-align: center;
}

.tree-instruction {
  color: #F7F4EE;
  margin-bottom: var(--spacing-lg);
  font-size: 1.1rem;
}

.ornaments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--spacing-md);
  max-width: 600px;
  margin: 0 auto;
}

.ornament {
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-round);
  width: 80px;
  height: 80px;
  margin: 0 auto;
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.ornament:hover {
  transform: scale(1.15);
  background: rgba(255,255,255,0.25);
  box-shadow: 0 0 30px rgba(255,255,255,0.3);
}

.ornament-emoji {
  font-size: 2rem;
}

.ornament-label {
  font-size: 0.65rem;
  color: #F7F4EE;
  opacity: 0.8;
}

.ornament-message {
  background: white;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-lg);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  /* Ensure any non-targeted text in the message card remains readable */
  color: var(--color-chocolate);
}

.message-content {
  margin-bottom: var(--spacing-md);
}

#message-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-chocolate);
}

.message-from {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-deep-red);
}

.close-message-btn {
  background: var(--color-forest-green);
  color: #F7F4EE;
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.close-message-btn:hover {
  background: var(--color-pine);
}

.snowball-corner {
  margin-top: var(--spacing-xl);
}

.snowball-note {
  background: #F8F8F8;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  /* Ensure body text is readable on light card background */
  color: var(--color-chocolate);
}

.snowball-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.snowball-note p {
  margin: 0;
}

.tree-footer {
  text-align: center;
  margin-top: var(--spacing-xl);
}

/* ============================================
   STORIES PAGE
   ============================================ */

.stories-page {
  background: var(--color-cranberry);
}

.stories-header {
  text-align: center;
  padding: var(--spacing-lg) 0;
}

.stories-subtitle {
  font-size: 1.2rem;
  color: #F7F4EE;
  opacity: 0.9;
}

.stories-intro {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-xl);
}

.letters-section,
.tales-section {
  margin-bottom: var(--spacing-xxl);
}

.letters-section h2,
.tales-section h2 {
  text-align: center;
  color: #F7F4EE;
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-forest-green);
  max-width: 400px;
  margin: 0 auto var(--spacing-lg);
}

.letters-grid,
.tales-grid {
  display: grid;
  gap: var(--spacing-lg);
}

.letter-card,
.tale-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 30px var(--color-soft-shadow);
}

.letter-card h3,
.tale-card h3 {
  background: var(--color-deep-red);
  color: #F7F4EE;
  padding: var(--spacing-md);
  margin: 0;
}

.letter-content,
.tale-content {
  padding: var(--spacing-lg);
  color: var(--color-chocolate);
  background: white;
}

.letter-content p,
.tale-content p {
  margin-bottom: var(--spacing-md);
}

.letter-signature {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-deep-red);
  font-size: 1.1rem;
  margin-top: var(--spacing-lg);
  display: block;
}

.tale-note {
  background: #F8F8F8;
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  margin-top: var(--spacing-md);
  font-size: 0.95rem;
}

.stories-footer {
  text-align: center;
  padding-top: var(--spacing-lg);
  border-top: 2px solid var(--color-forest-green);
}

/* Story Navigation Section */
.story-nav-section {
  margin-bottom: var(--spacing-xxl);
}

.story-nav-section h2 {
  text-align: center;
  color: #F7F4EE;
  margin-bottom: var(--spacing-lg);
}

.story-nav-category {
  margin-bottom: var(--spacing-xl);
}

.story-nav-category h3 {
  color: #F7F4EE;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-forest-green);
}

.story-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-md);
}

/* Story Navigation Cards */
.story-nav-card {
  background: var(--color-deep-red);
  padding: 0.85rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition-smooth);
  border: 2px solid var(--color-forest-green);
  box-shadow: 0 2px 8px var(--color-soft-shadow);
  text-decoration: none;
  display: block;
}

.story-nav-card:hover {
  transform: translateY(-3px);
  background: var(--color-bright-red);
  box-shadow: 0 8px 25px rgba(155, 35, 53, 0.4);
  border-color: #FFFFFF;
}

.story-nav-card .card-title {
  color: #F7F4EE;
}

.story-nav-card .card-preview {
  color: #F7F4EE;
  opacity: 0.9;
}

/* ============================================
   WINDOW SEAT PAGE - Ambient Peace
   ============================================ */

.window-seat-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #1a1a2e 0%, #2d2d44 100%);
  overflow: hidden;
}

.window-seat-content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--spacing-lg);
}

.window-seat-scene {
  position: relative;
  width: 100%;
  max-width: 90vw;
}

.window-frame {
  background: #4A3728;
  padding: 25px;
  border-radius: var(--radius-lg);
  box-shadow: 
    inset 0 0 30px rgba(0,0,0,0.5),
    0 20px 60px rgba(0,0,0,0.5);
  max-width: 900px;
  margin: 0 auto;
}

.window-view {
  background: linear-gradient(180deg, #1a2a3a 0%, #2d3a4a 60%, #FFFAFA 95%, #FFF 100%);
  height: 60vh;
  min-height: 400px;
  max-height: 700px;
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.snow-falling {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.snow-falling::before,
.snow-falling::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 200%;
  background-image: 
    radial-gradient(2px 2px at 47px 53px, white, transparent),
    radial-gradient(1px 1px at 113px 89px, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 241px 37px, white, transparent),
    radial-gradient(1px 1px at 179px 121px, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 67px 179px, white, transparent),
    radial-gradient(1px 1px at 293px 67px, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 157px 203px, white, transparent),
    radial-gradient(1px 1px at 89px 97px, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 331px 151px, white, transparent),
    radial-gradient(1px 1px at 211px 73px, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 127px 257px, white, transparent),
    radial-gradient(1px 1px at 359px 199px, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 53px 311px, white, transparent),
    radial-gradient(1px 1px at 277px 283px, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 197px 347px, white, transparent);
  background-size: 400px 400px;
  animation: snowfall-layer1 12s linear infinite;
}

.snow-falling::after {
  background-image: 
    radial-gradient(3px 3px at 71px 41px, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 163px 127px, white, transparent),
    radial-gradient(3px 3px at 307px 83px, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 97px 211px, white, transparent),
    radial-gradient(3px 3px at 251px 167px, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 139px 293px, white, transparent),
    radial-gradient(3px 3px at 349px 239px, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 83px 359px, white, transparent),
    radial-gradient(3px 3px at 227px 317px, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 181px 401px, white, transparent),
    radial-gradient(3px 3px at 43px 157px, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 319px 373px, white, transparent);
  background-size: 450px 450px;
  animation: snowfall-layer2 18s linear infinite;
  opacity: 0.8;
}

@keyframes snowfall-layer1 {
  0% { transform: translateY(0); }
  100% { transform: translateY(50%); }
}

@keyframes snowfall-layer2 {
  0% { transform: translateY(0) translateX(0); }
  100% { transform: translateY(50%) translateX(-30px); }
}

.moon {
  position: absolute;
  top: 40px;
  right: 60px;
  width: 70px;
  height: 70px;
  background: radial-gradient(circle, #FFFACD, #F0E68C);
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(255,250,205,0.6);
}

.distant-trees {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  height: 80px;
  background: 
    linear-gradient(135deg, transparent 40%, #1a2a1a 40%, #1a2a1a 43%, transparent 43%),
    linear-gradient(225deg, transparent 40%, #1a2a1a 40%, #1a2a1a 43%, transparent 43%),
    linear-gradient(135deg, transparent 42%, #2d3a2d 42%, #2d3a2d 45%, transparent 45%),
    linear-gradient(225deg, transparent 42%, #2d3a2d 42%, #2d3a2d 45%, transparent 45%);
  background-size: 40px 60px;
  background-position: 0 0, 20px 0, 10px 0, 30px 0;
}

.fireplace-glow {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 100px;
  background: radial-gradient(ellipse at bottom, rgba(232,165,75,0.4) 0%, transparent 70%);
  pointer-events: none;
}

.window-seat-text {
  text-align: center;
  margin-top: var(--spacing-xl);
  color: var(--color-cream);
}

.whisper {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-style: italic;
  opacity: 0.9;
  margin-bottom: var(--spacing-sm);
  animation: fade-in 2s ease-out;
}

.whisper:nth-child(2) {
  animation-delay: 1s;
  opacity: 0.7;
}

.whisper:nth-child(3) {
  animation-delay: 2s;
  opacity: 0.6;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.sound-toggle-window {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-round);
  width: 50px;
  height: 50px;
  cursor: pointer;
  font-size: 1.3rem;
  transition: var(--transition-smooth);
}

.sound-toggle-window:hover {
  background: rgba(255,255,255,0.3);
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .cottage-nav,
  .sound-toggle,
  .print-btn,
  .back-link,
  .cottage-footer {
    display: none !important;
  }
  
  .permission-slip {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 2px solid #333;
  }
  
  body {
    background: white;
    color: black;
  }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  .cottage-nav {
    padding: var(--spacing-xs);
    gap: var(--spacing-xs);
  }
  
  .cottage-nav a {
    font-size: 0.85rem;
    padding: var(--spacing-xs);
  }
  
  .feeling-paths {
    grid-template-columns: 1fr;
  }
  
  .rooms-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .characters-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .permission-grid {
    grid-template-columns: 1fr;
  }
  
  .pepper-challenge {
    flex-direction: column;
    text-align: center;
  }
  
  .ornaments-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .ornament {
    width: 70px;
    height: 70px;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
  
  .rooms-grid {
    grid-template-columns: 1fr;
  }
  
  .characters-grid {
    grid-template-columns: 1fr;
  }
  
  .cottage-photo {
    max-width: 280px;
  }
  
  .ornaments-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
  }
  
  .ornament {
    width: 60px;
    height: 60px;
  }
  
  .ornament-emoji {
    font-size: 1.5rem;
  }
}

/* ============================================
   HOMEPAGE ANIMATIONS & INTERACTIVE ELEMENTS
   ============================================ */

/* Floating particles (dust motes in firelight) */
.floating-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.7), transparent);
  border-radius: 50%;
  animation: float-particle 15s infinite ease-in-out;
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 18s; }
.particle:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 15s; }
.particle:nth-child(3) { left: 30%; animation-delay: 4s; animation-duration: 20s; }
.particle:nth-child(4) { left: 40%; animation-delay: 1s; animation-duration: 17s; }
.particle:nth-child(5) { left: 50%; animation-delay: 3s; animation-duration: 19s; }
.particle:nth-child(6) { left: 60%; animation-delay: 5s; animation-duration: 16s; }
.particle:nth-child(7) { left: 70%; animation-delay: 2s; animation-duration: 21s; }
.particle:nth-child(8) { left: 80%; animation-delay: 4s; animation-duration: 14s; }
.particle:nth-child(9) { left: 90%; animation-delay: 1s; animation-duration: 18s; }
.particle:nth-child(10) { left: 15%; animation-delay: 3s; animation-duration: 20s; }
.particle:nth-child(11) { left: 45%; animation-delay: 0s; animation-duration: 16s; }
.particle:nth-child(12) { left: 75%; animation-delay: 2s; animation-duration: 22s; }
.particle:nth-child(13) { left: 25%; animation-delay: 1.5s; animation-duration: 19s; }
.particle:nth-child(14) { left: 55%; animation-delay: 3.5s; animation-duration: 17s; }
.particle:nth-child(15) { left: 85%; animation-delay: 0.5s; animation-duration: 21s; }

@keyframes float-particle {
  0%, 100% { 
    transform: translateY(100vh) rotate(0deg); 
    opacity: 0;
  }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { 
    transform: translateY(-20vh) rotate(360deg); 
    opacity: 0;
  }
}

/* Animated fireplace glow effect */
.fireplace-glow-ambient {
  position: fixed;
  bottom: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 60%;
  background: radial-gradient(ellipse at bottom, rgba(232, 165, 75, 0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: fire-glow 3s ease-in-out infinite alternate;
}

@keyframes fire-glow {
  0% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  100% { opacity: 0.8; transform: translateX(-50%) scale(1.05); }
}

/* Twinkling stars/lights */
.twinkle-lights {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.twinkle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--color-gold);
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(201, 162, 39, 0.5);
  animation: twinkle 2s ease-in-out infinite;
}

.twinkle:nth-child(1) { top: 5%; left: 15%; animation-delay: 0s; }
.twinkle:nth-child(2) { top: 12%; left: 85%; animation-delay: 0.5s; }
.twinkle:nth-child(3) { top: 8%; left: 45%; animation-delay: 1s; }
.twinkle:nth-child(4) { top: 15%; left: 70%; animation-delay: 1.5s; }
.twinkle:nth-child(5) { top: 3%; left: 30%; animation-delay: 0.3s; }
.twinkle:nth-child(6) { top: 10%; left: 60%; animation-delay: 0.8s; }
.twinkle:nth-child(7) { top: 18%; left: 20%; animation-delay: 1.2s; }
.twinkle:nth-child(8) { top: 6%; left: 90%; animation-delay: 0.6s; }
.twinkle:nth-child(9) { top: 22%; left: 40%; animation-delay: 1.8s; }
.twinkle:nth-child(10) { top: 25%; left: 75%; animation-delay: 0.2s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* Corner Candle Animation */
.corner-candle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 30px;
  height: 80px;
  z-index: 100;
  cursor: pointer;
}

.corner-candle .candle-body {
  width: 30px;
  height: 60px;
  background: linear-gradient(to right, #F5F5DC, #FFFAF0, #F5F5DC);
  border-radius: 3px 3px 15px 15px;
  position: absolute;
  bottom: 0;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.corner-candle .candle-wick {
  width: 2px;
  height: 8px;
  background: #333;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px;
}

.corner-candle .candle-flame {
  width: 12px;
  height: 25px;
  background: linear-gradient(to top, #FF6B35, #FFD93D, rgba(255,255,255,0.9));
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  animation: candle-flicker 0.4s ease-in-out infinite alternate;
  box-shadow: 
    0 0 15px #FF6B35,
    0 0 30px rgba(255,200,50,0.5),
    0 0 50px rgba(255,150,50,0.3);
}

.corner-candle .candle-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255, 180, 80, 0.3) 0%, transparent 70%);
  pointer-events: none;
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes candle-flicker {
  0% { transform: translateX(-50%) scale(1) rotate(-2deg); }
  100% { transform: translateX(-50%) scale(1.05) rotate(2deg); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

/* Snowball the cat - animated */
.snowball-animation {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 2.5rem;
  z-index: 100;
  cursor: pointer;
  animation: cat-idle 3s ease-in-out infinite;
  transition: transform 0.3s ease;
}

.snowball-animation:hover {
  animation: cat-attention 0.5s ease-in-out;
}

.snowball-speech {
  position: absolute;
  bottom: 100%;
  right: 0;
  background: white;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.85rem;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
  font-family: var(--font-body);
  color: var(--color-chocolate);
}

.snowball-speech::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 20px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid white;
}

.snowball-animation:hover .snowball-speech,
.snowball-animation.speaking .snowball-speech {
  opacity: 1;
  transform: translateY(-5px);
}

@keyframes cat-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes cat-attention {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-10deg) scale(1.1); }
  75% { transform: rotate(10deg) scale(1.1); }
  100% { transform: rotate(0deg) scale(1); }
}

/* Hot cocoa cup with steam */
.cocoa-cup {
  position: fixed;
  bottom: 90px;
  right: 25px;
  font-size: 1.8rem;
  z-index: 99;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.cocoa-cup:hover {
  transform: scale(1.1) rotate(-5deg);
}

.cocoa-cup .steam-container {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
}

.cocoa-cup .steam-wave {
  width: 4px;
  height: 15px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  animation: steam-float 2s ease-in-out infinite;
}

.cocoa-cup .steam-wave:nth-child(1) { animation-delay: 0s; height: 12px; }
.cocoa-cup .steam-wave:nth-child(2) { animation-delay: 0.3s; height: 18px; }
.cocoa-cup .steam-wave:nth-child(3) { animation-delay: 0.6s; height: 14px; }

@keyframes steam-float {
  0%, 100% { 
    opacity: 0;
    transform: translateY(0) scaleX(1);
  }
  50% { 
    opacity: 0.8;
    transform: translateY(-20px) scaleX(1.5);
  }
}

/* Cursor sparkle trail */
.cursor-sparkle {
  position: fixed;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.9), transparent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  animation: sparkle-fade 1s ease-out forwards;
}

@keyframes sparkle-fade {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0) translateY(-20px); }
}

/* Animated welcome text */
.welcome-text h1 {
  overflow: hidden;
  animation: gentle-appear 1.5s ease-out;
}

.welcome-text p {
  animation: gentle-appear 1.5s ease-out;
  animation-delay: 0.3s;
  animation-fill-mode: both;
}

.welcome-typing {
  border-right: 2px solid var(--color-deep-red);
  animation: typing-cursor 0.8s step-end infinite;
}

@keyframes typing-cursor {
  0%, 50% { border-color: var(--color-deep-red); }
  51%, 100% { border-color: transparent; }
}

@keyframes gentle-appear {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Breathing glow on fireplace image */
.fireplace-img {
  position: relative;
  animation: fireplace-breathe 4s ease-in-out infinite;
}

@keyframes fireplace-breathe {
  0%, 100% { 
    box-shadow: 0 10px 40px var(--color-soft-shadow), 0 0 30px rgba(232, 165, 75, 0.2);
  }
  50% { 
    box-shadow: 0 10px 40px var(--color-soft-shadow), 0 0 60px rgba(232, 165, 75, 0.4);
  }
}

/* Breathing glow on feeling cards */
.feeling-card {
  position: relative;
  overflow: hidden;
}

.feeling-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease;
  pointer-events: none;
}

.feeling-card:hover::before {
  transform: translate(-50%, -50%) scale(2);
}

/* Floating hearts on feeling cards hover */
.floating-heart {
  position: absolute;
  font-size: 1rem;
  pointer-events: none;
  animation: float-up 1.5s ease-out forwards;
  opacity: 0;
}

@keyframes float-up {
  0% { 
    opacity: 1; 
    transform: translateY(0) scale(1);
  }
  100% { 
    opacity: 0; 
    transform: translateY(-80px) scale(0.5);
  }
}

/* Gentle pulse on room icons */
.room-icon {
  display: inline-block;
  animation: gentle-pulse 4s ease-in-out infinite;
}

.room-card:nth-child(1) .room-icon { animation-delay: 0s; }
.room-card:nth-child(2) .room-icon { animation-delay: 0.5s; }
.room-card:nth-child(3) .room-icon { animation-delay: 1s; }
.room-card:nth-child(4) .room-icon { animation-delay: 1.5s; }
.room-card:nth-child(5) .room-icon { animation-delay: 2s; }

@keyframes gentle-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Character cards wiggle on hover */
.character-card {
  transition: transform 0.3s ease;
}

.character-card:hover {
  animation: wiggle 0.5s ease-in-out;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

/* Scroll reveal animations - DISABLED to prevent flash */
.reveal-on-scroll,
.reveal-kitchen,
.reveal-sitting,
.reveal-tree,
.reveal-stories,
.reveal-comfort,
.reveal-joy,
.reveal-window,
.reveal-story {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.reveal-on-scroll.revealed,
.reveal-kitchen.revealed,
.reveal-sitting.revealed,
.reveal-tree.revealed,
.reveal-stories.revealed,
.reveal-comfort.revealed,
.reveal-joy.revealed,
.reveal-window.revealed,
.reveal-story.revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* Cozy whisper message */
.cozy-whisper {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.98);
  padding: 14px 28px;
  border-radius: 25px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-chocolate);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 200;
  text-align: center;
  max-width: 90%;
  border: 1px solid rgba(201, 162, 39, 0.3);
}

.cozy-whisper::before {
  content: '✨';
  margin-right: 8px;
}

.cozy-whisper::after {
  content: '✨';
  margin-left: 8px;
}

.cozy-whisper.visible {
  opacity: 1;
}

/* Falling snowflake animation for arrival */
.snowflake {
  position: absolute;
  color: #F7F4EE;
  font-size: 1rem;
  opacity: 0.8;
  animation: snowflake-fall linear infinite;
  pointer-events: none;
}

@keyframes snowflake-fall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0.3; }
}

/* Enhanced enter button */
.enter-button {
  position: relative;
  overflow: hidden;
}

.enter-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 50%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s ease;
}

.enter-button:hover::after {
  transform: translate(-50%, -50%) scale(1);
}

/* Door opening animation */
.door-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

.enter-button:hover .door-icon {
  animation: door-creak 0.5s ease-in-out;
}

@keyframes door-creak {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(-20deg); }
  100% { transform: rotateY(0deg); }
}

/* Window frost effect on arrival */
.frost-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 20px solid transparent;
  border-image: radial-gradient(ellipse at center, transparent 60%, rgba(255,255,255,0.1) 100%) 1;
  pointer-events: none;
}

/* Gentle room card entrance */
.room-card {
  opacity: 0;
  transform: translateY(20px);
  animation: card-entrance 0.6s ease-out forwards;
}

/* Ensure cottage-rooms section is above ambient elements */
.cottage-rooms {
  position: relative;
  z-index: 5;
}

.rooms-grid .room-card:nth-child(1) { animation-delay: 0.1s; }
.rooms-grid .room-card:nth-child(2) { animation-delay: 0.2s; }
.rooms-grid .room-card:nth-child(3) { animation-delay: 0.3s; }
.rooms-grid .room-card:nth-child(4) { animation-delay: 0.4s; }
.rooms-grid .room-card:nth-child(5) { animation-delay: 0.5s; }

@keyframes card-entrance {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Character icon bounce on hover */
.character-icon {
  transition: transform 0.3s ease;
}

.character-card:hover .character-icon {
  animation: character-bounce 0.6s ease;
}

@keyframes character-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-10px); }
  50% { transform: translateY(-5px); }
  70% { transform: translateY(-8px); }
}

/* Warm glow behind welcome section */
.welcome-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(232, 165, 75, 0.1) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Pepper elf in corner */
.pepper-elf {
  position: fixed;
  top: 80px;
  left: 20px;
  font-size: 2rem;
  z-index: 100;
  cursor: pointer;
  animation: pepper-peek 4s ease-in-out infinite;
  opacity: 0.9;
}

.pepper-elf:hover {
  animation: pepper-wave 0.8s ease-in-out;
}

@keyframes pepper-peek {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(5px) rotate(5deg); }
  75% { transform: translateX(-5px) rotate(-5deg); }
}

@keyframes pepper-wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  50% { transform: rotate(-10deg); }
  75% { transform: rotate(15deg); }
}

.pepper-speech {
  position: absolute;
  top: -10px;
  left: 100%;
  margin-left: 10px;
  background: white;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  pointer-events: none;
  font-family: var(--font-body);
  color: var(--color-hunter-green);
}

.pepper-speech::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid white;
}

.pepper-elf:hover .pepper-speech,
.pepper-elf.speaking .pepper-speech {
  opacity: 1;
  transform: translateX(0);
}

/* Jingle elf (occasionally pops up) */
.jingle-popup {
  position: fixed;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.5rem;
  z-index: 150;
  transition: bottom 0.5s ease;
  pointer-events: none;
}

.jingle-popup.peeking {
  bottom: 0;
}

.jingle-message {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 10px 16px;
  border-radius: 15px;
  font-size: 0.9rem;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  font-family: var(--font-body);
  color: var(--color-chocolate);
  margin-bottom: 10px;
}

/* Santa occasional visit indicator */
.santa-visit {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--color-cranberry), var(--color-bright-red));
  color: #F7F4EE;
  padding: 10px 20px;
  border-radius: 20px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  box-shadow: 0 4px 20px rgba(155, 35, 53, 0.3);
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 300;
}

.santa-visit.visible {
  opacity: 1;
}

/* Soft vignette effect */
.vignette {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(44, 24, 16, 0.1) 100%);
  z-index: 2;
}

/* ============================================
   STORY CORNER PAGE STYLES & ANIMATIONS
   ============================================ */

/* Warm reading light glow */
.reading-glow {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 80%;
  background: radial-gradient(ellipse at top, rgba(201, 162, 39, 0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: reading-light 4s ease-in-out infinite alternate;
}

@keyframes reading-light {
  0% { opacity: 0.5; }
  100% { opacity: 0.8; }
}

/* Floating book pages/dust */
.page-dust {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.dust-mote {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(200, 180, 150, 0.5);
  border-radius: 50%;
  animation: dust-drift 15s infinite ease-in-out;
}

.dust-mote:nth-child(1) { left: 15%; animation-delay: 0s; animation-duration: 18s; }
.dust-mote:nth-child(2) { left: 30%; animation-delay: 3s; animation-duration: 14s; }
.dust-mote:nth-child(3) { left: 45%; animation-delay: 6s; animation-duration: 20s; }
.dust-mote:nth-child(4) { left: 60%; animation-delay: 2s; animation-duration: 16s; }
.dust-mote:nth-child(5) { left: 75%; animation-delay: 5s; animation-duration: 17s; }
.dust-mote:nth-child(6) { left: 85%; animation-delay: 1s; animation-duration: 19s; }

@keyframes dust-drift {
  0%, 100% { 
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }
  20% { opacity: 0.4; }
  80% { opacity: 0.4; }
  100% { 
    transform: translateY(-20vh) translateX(30px);
    opacity: 0;
  }
}

/* Story Navigation Section */
.story-nav-section {
  background: var(--color-cream);
  padding: 1.5rem;
  border-radius: 16px;
  margin-bottom: 2.5rem;
  box-shadow: 0 8px 30px var(--color-soft-shadow);
  border: 2px solid var(--color-forest-green);
}

.story-nav-section h2 {
  text-align: center;
  color: var(--color-deep-red);
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.story-nav-category {
  margin-bottom: 1.5rem;
}

.story-nav-category:last-child {
  margin-bottom: 0;
}

.story-nav-category h3 {
  font-size: 1rem;
  color: var(--color-forest-green);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(53, 94, 59, 0.3);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.story-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

/* Article Sections */
.article-section {
  margin-bottom: 3rem;
  scroll-margin-top: 80px;
}

.article-section h2 {
  text-align: center;
  color: #F7F4EE;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-forest-green);
  max-width: 400px;
  margin: 0 auto 1.5rem;
}

.article-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 30px var(--color-soft-shadow);
  overflow: hidden;
  margin-bottom: 1.5rem;
  transition: var(--transition-smooth);
  scroll-margin-top: 80px;
}

.article-card:hover {
  box-shadow: 0 12px 40px rgba(44, 24, 16, 0.15);
}

.article-card:last-child {
  margin-bottom: 0;
}

.article-header {
  background: linear-gradient(135deg, var(--color-deep-red), #a33344);
  color: #F7F4EE;
  padding: 1.25rem 1.5rem;
}

.article-header.santa-header {
  background: linear-gradient(135deg, var(--color-bright-red), var(--color-cranberry));
}

.article-header.mrs-claus-header {
  background: linear-gradient(135deg, var(--color-cranberry), #6B1825);
}

.article-header.tales-header {
  background: linear-gradient(135deg, var(--color-hunter-green), #1D3A30);
}

.article-header h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.article-content {
  padding: 1.5rem;
  line-height: 1.8;
  color: var(--color-chocolate);
  background: white;
}

.article-content p {
  margin-bottom: 1rem;
}

.article-content p:last-of-type {
  margin-bottom: 0;
}

/* Back to navigation button */
.back-to-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--color-light-sage);
  color: var(--color-chocolate);
  border-radius: 20px;
  font-size: 0.85rem;
  margin: 1rem 1.5rem 1.5rem;
  transition: var(--transition-smooth);
  text-decoration: none;
}

.back-to-nav:hover {
  background: var(--color-deep-red);
  color: #F7F4EE;
  transform: translateY(-2px);
}

/* Book stack in corner */
.book-stack {
  position: fixed;
  bottom: 20px;
  left: 20px;
  font-size: 2rem;
  z-index: 100;
  cursor: pointer;
  animation: books-settle 3s ease-in-out infinite;
}

@keyframes books-settle {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

/* Reading glasses */
.reading-glasses {
  position: fixed;
  top: 100px;
  right: 20px;
  font-size: 1.8rem;
  z-index: 100;
  cursor: pointer;
  animation: glasses-glint 4s ease-in-out infinite;
}

@keyframes glasses-glint {
  0%, 100% { 
    filter: brightness(1);
    transform: rotate(0deg);
  }
  50% { 
    filter: brightness(1.3);
    transform: rotate(5deg);
  }
}

/* Mrs. Claus reading */
.mrs-claus-reading {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 2.5rem;
  z-index: 100;
  cursor: pointer;
  animation: gentle-rock 4s ease-in-out infinite;
}

@keyframes gentle-rock {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

.mrs-claus-bubble {
  position: absolute;
  bottom: 100%;
  right: 0;
  background: white;
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 0.85rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
  font-family: var(--font-body);
  white-space: nowrap;
  margin-bottom: 10px;
  color: var(--color-chocolate);
}

.mrs-claus-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 20px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid white;
}

.mrs-claus-reading:hover .mrs-claus-bubble,
.mrs-claus-reading.speaking .mrs-claus-bubble {
  opacity: 1;
  transform: translateY(0);
}

/* Story whisper */
.story-whisper {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.98);
  padding: 12px 24px;
  border-radius: 20px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-chocolate);
  box-shadow: 0 6px 25px rgba(0,0,0,0.1);
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 200;
  text-align: center;
  max-width: 90%;
}

.story-whisper.visible {
  opacity: 1;
}

/* Animated page icon */
.stories-page .page-icon {
  animation: book-float 3s ease-in-out infinite;
}

@keyframes book-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(5deg); }
}

/* Quill pen decoration */
.quill-pen {
  position: fixed;
  top: 100px;
  left: 20px;
  font-size: 1.8rem;
  z-index: 100;
  cursor: pointer;
  animation: quill-write 2s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes quill-write {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}

/* Smooth scroll highlight */
.article-card.highlighted {
  animation: highlight-pulse 1s ease;
}

@keyframes highlight-pulse {
  0%, 100% { box-shadow: 0 8px 30px var(--color-soft-shadow); }
  50% { box-shadow: 0 8px 50px rgba(201, 162, 39, 0.4); }
}

/* Floating indicator */
.scroll-indicator {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-deep-red);
  color: #F7F4EE;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 150;
  pointer-events: none;
}

.scroll-indicator.visible {
  opacity: 1;
}

/* ============================================
   TREE PAGE ANIMATIONS
   ============================================ */

/* Tree ambient glow */
.tree-ambient-glow {
  position: fixed;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 80%;
  background: radial-gradient(ellipse at bottom, rgba(53, 94, 59, 0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: tree-glow-pulse 5s ease-in-out infinite alternate;
}

@keyframes tree-glow-pulse {
  0% { opacity: 0.5; }
  100% { opacity: 0.9; }
}

/* Twinkling Christmas lights */
.christmas-lights {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.light {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: light-twinkle 2s ease-in-out infinite;
}

.light.red { background: #ff4444; box-shadow: 0 0 10px #ff4444, 0 0 20px rgba(255, 68, 68, 0.5); }
.light.gold { background: #ffd700; box-shadow: 0 0 10px #ffd700, 0 0 20px rgba(255, 215, 0, 0.5); }
.light.green { background: #44ff44; box-shadow: 0 0 10px #44ff44, 0 0 20px rgba(68, 255, 68, 0.5); }
.light.blue { background: #4488ff; box-shadow: 0 0 10px #4488ff, 0 0 20px rgba(68, 136, 255, 0.5); }
.light.white { background: #ffffff; box-shadow: 0 0 10px #ffffff, 0 0 20px rgba(255, 255, 255, 0.5); }

.light:nth-child(1) { top: 3%; left: 10%; animation-delay: 0s; }
.light:nth-child(2) { top: 8%; left: 25%; animation-delay: 0.3s; }
.light:nth-child(3) { top: 5%; left: 40%; animation-delay: 0.6s; }
.light:nth-child(4) { top: 10%; left: 55%; animation-delay: 0.2s; }
.light:nth-child(5) { top: 4%; left: 70%; animation-delay: 0.8s; }
.light:nth-child(6) { top: 7%; left: 85%; animation-delay: 0.4s; }
.light:nth-child(7) { top: 12%; left: 15%; animation-delay: 1s; }
.light:nth-child(8) { top: 15%; left: 30%; animation-delay: 0.5s; }
.light:nth-child(9) { top: 11%; left: 45%; animation-delay: 0.7s; }
.light:nth-child(10) { top: 14%; left: 60%; animation-delay: 0.1s; }
.light:nth-child(11) { top: 9%; left: 75%; animation-delay: 0.9s; }
.light:nth-child(12) { top: 13%; left: 90%; animation-delay: 0.35s; }
.light:nth-child(13) { top: 18%; left: 20%; animation-delay: 0.65s; }
.light:nth-child(14) { top: 20%; left: 50%; animation-delay: 0.15s; }
.light:nth-child(15) { top: 16%; left: 80%; animation-delay: 0.85s; }

@keyframes light-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Tree sparkles */
.tree-sparkles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.tree-sparkles .sparkle {
  position: absolute;
  font-size: 1rem;
  animation: sparkle-fall linear infinite;
  opacity: 0.8;
}

@keyframes sparkle-fall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0.3; }
}

/* Pine particles */
.pine-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.pine {
  position: absolute;
  width: 3px;
  height: 12px;
  background: linear-gradient(to bottom, #2D5A45, #3A6B4F);
  border-radius: 50%;
  animation: pine-drift 18s linear infinite;
  opacity: 0;
}

.pine:nth-child(1) { left: 15%; animation-delay: 0s; }
.pine:nth-child(2) { left: 30%; animation-delay: 3s; }
.pine:nth-child(3) { left: 45%; animation-delay: 6s; }
.pine:nth-child(4) { left: 60%; animation-delay: 2s; }
.pine:nth-child(5) { left: 75%; animation-delay: 5s; }
.pine:nth-child(6) { left: 85%; animation-delay: 1s; }
.pine:nth-child(7) { left: 25%; animation-delay: 4s; }
.pine:nth-child(8) { left: 55%; animation-delay: 7s; }

@keyframes pine-drift {
  0%, 100% { transform: translateY(-5vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.4; }
  100% { transform: translateY(105vh) rotate(180deg); opacity: 0; }
}

/* Tree vignette */
.tree-vignette {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(45, 90, 69, 0.08) 100%);
  z-index: 2;
}

/* Ornament emoji animations */
.ornament-emoji {
  display: inline-block;
  animation: ornament-sway 4s ease-in-out infinite;
}

@keyframes ornament-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

/* Tree star */
.tree-star {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.5rem;
  z-index: 100;
  cursor: pointer;
  animation: star-glow 2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

@keyframes star-glow {
  0%, 100% { 
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
    transform: translateX(-50%) scale(1);
  }
  50% { 
    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.8));
    transform: translateX(-50%) scale(1.1);
  }
}

/* Mini tree */
.mini-tree {
  position: fixed;
  bottom: 20px;
  left: 20px;
  font-size: 3rem;
  z-index: 100;
  cursor: pointer;
  animation: tree-sway 6s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(45, 90, 69, 0.4));
}

@keyframes tree-sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

.mini-tree-message {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 10px;
  background: white;
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 0.9rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
  font-family: var(--font-body);
  color: var(--color-forest-green);
  white-space: nowrap;
}

.mini-tree:hover .mini-tree-message {
  opacity: 1;
  transform: translateY(0);
}

/* Tree whisper */
.tree-whisper {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.98);
  padding: 14px 28px;
  border-radius: 25px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-forest-green);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 200;
  text-align: center;
  max-width: 90%;
  border: 1px solid rgba(45, 90, 69, 0.3);
}

.tree-whisper.visible {
  opacity: 1;
}

/* Tree Snowball cat */
.tree-snowball {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 2.5rem;
  z-index: 100;
  cursor: pointer;
  animation: cat-watch 4s ease-in-out infinite;
}

@keyframes cat-watch {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-5px); }
  70% { transform: translateX(5px); }
}

.snowball-bubble {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 10px;
  background: white;
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 0.85rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
  font-family: var(--font-body);
  color: var(--color-chocolate);
  max-width: 180px;
}

.tree-snowball:hover .snowball-bubble {
  opacity: 1;
  transform: translateY(0);
}

/* Present box */
.present-box {
  position: fixed;
  bottom: 90px;
  right: 25px;
  font-size: 2rem;
  z-index: 99;
  cursor: pointer;
  transition: transform 0.3s ease;
  animation: present-bounce 3s ease-in-out infinite;
}

.present-box:hover {
  transform: scale(1.2) rotate(-10deg);
}

@keyframes present-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ============================================
   KITCHEN PAGE ANIMATIONS
   ============================================ */

/* Kitchen warm glow */
.kitchen-glow {
  position: fixed;
  bottom: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  height: 50%;
  background: radial-gradient(ellipse at bottom, rgba(201, 162, 39, 0.1) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: oven-warmth 4s ease-in-out infinite alternate;
}

@keyframes oven-warmth {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* Flour particles */
.flour-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.flour {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: flour-float 12s infinite ease-in-out;
}

.flour:nth-child(1) { left: 15%; animation-delay: 0s; animation-duration: 14s; }
.flour:nth-child(2) { left: 25%; animation-delay: 2s; animation-duration: 12s; }
.flour:nth-child(3) { left: 35%; animation-delay: 4s; animation-duration: 16s; }
.flour:nth-child(4) { left: 45%; animation-delay: 1s; animation-duration: 13s; }
.flour:nth-child(5) { left: 55%; animation-delay: 3s; animation-duration: 15s; }
.flour:nth-child(6) { left: 65%; animation-delay: 5s; animation-duration: 11s; }
.flour:nth-child(7) { left: 75%; animation-delay: 2s; animation-duration: 14s; }
.flour:nth-child(8) { left: 85%; animation-delay: 4s; animation-duration: 12s; }

@keyframes flour-float {
  0%, 100% { 
    transform: translateY(100vh) rotate(0deg); 
    opacity: 0;
  }
  20% { opacity: 0.5; }
  80% { opacity: 0.5; }
  100% { 
    transform: translateY(-20vh) rotate(360deg); 
    opacity: 0;
  }
}

/* Kitchen steam */
.recipe-steam {
  position: absolute;
  width: 100%;
  height: 60px;
  top: -30px;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

.steam {
  position: absolute;
  width: 12px;
  height: 40px;
  background: linear-gradient(to top, rgba(255,255,255,0.1), rgba(255,255,255,0.4));
  border-radius: 50%;
  animation: steam-rise 3s ease-in-out infinite;
  opacity: 0;
}

.steam:nth-child(1) { left: 30%; animation-delay: 0s; }
.steam:nth-child(2) { left: 50%; animation-delay: 1s; }
.steam:nth-child(3) { left: 70%; animation-delay: 2s; }

@keyframes steam-rise {
  0% { transform: translateY(40px) scaleX(1); opacity: 0; }
  30% { opacity: 0.8; }
  100% { transform: translateY(-40px) scaleX(1.5); opacity: 0; }
}

/* Mrs Claus kitchen character */
.mrs-claus-kitchen {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 2.5rem;
  z-index: 100;
  cursor: pointer;
  animation: cooking-sway 4s ease-in-out infinite;
}

@keyframes cooking-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

.mrs-claus-kitchen-bubble {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 10px;
  background: white;
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 0.85rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
  font-family: var(--font-body);
  color: var(--color-chocolate);
  max-width: 200px;
}

.mrs-claus-kitchen:hover .mrs-claus-kitchen-bubble {
  opacity: 1;
  transform: translateY(0);
}

/* Kitchen whisper */
.kitchen-whisper {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.98);
  padding: 12px 24px;
  border-radius: 25px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-chocolate);
  box-shadow: 0 6px 25px rgba(0,0,0,0.12);
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 200;
  text-align: center;
  max-width: 90%;
}

.kitchen-whisper.visible {
  opacity: 1;
}

/* ============================================
   COMFORT PAGE ANIMATIONS
   ============================================ */

/* Comfort page interactive corner items (keep nav at very top) */
.comfort-candle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 200;
  cursor: pointer;
  user-select: none;
}

.tea-cup {
  position: fixed;
  bottom: 20px;
  left: 92px;
  z-index: 200;
  cursor: pointer;
  font-size: 1.9rem;
  user-select: none;
}

.cozy-blanket {
  position: fixed;
  bottom: 20px;
  left: 148px;
  z-index: 200;
  cursor: pointer;
  font-size: 1.9rem;
  user-select: none;
}

.mrs-claus-corner {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  cursor: pointer;
  font-size: 2.5rem;
  user-select: none;
}

.mrs-claus-speech {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.98);
  color: var(--color-chocolate);
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.9rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  max-width: 220px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.25s ease;
  pointer-events: none;
}

.mrs-claus-corner.speaking .mrs-claus-speech {
  opacity: 1;
  transform: translateY(0);
}

.hug-notification {
  position: fixed;
  top: 74px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-chocolate);
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.hug-notification.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Comfort ambient glow */
.comfort-ambient-glow {
  position: fixed;
  bottom: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 70%;
  background: radial-gradient(ellipse at bottom, rgba(155, 35, 53, 0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: comfort-glow-pulse 4s ease-in-out infinite alternate;
}

@keyframes comfort-glow-pulse {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* Candle sparks */
.candle-sparks {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.candle-sparks .spark {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.9), transparent);
  border-radius: 50%;
  animation: spark-float 12s infinite ease-in-out;
}

.candle-sparks .spark:nth-child(1) { left: 8%; animation-delay: 0s; }
.candle-sparks .spark:nth-child(2) { left: 18%; animation-delay: 2s; }
.candle-sparks .spark:nth-child(3) { left: 28%; animation-delay: 1s; }
.candle-sparks .spark:nth-child(4) { left: 42%; animation-delay: 3s; }
.candle-sparks .spark:nth-child(5) { left: 55%; animation-delay: 1.5s; }
.candle-sparks .spark:nth-child(6) { left: 68%; animation-delay: 2.5s; }
.candle-sparks .spark:nth-child(7) { left: 78%; animation-delay: 0.5s; }
.candle-sparks .spark:nth-child(8) { left: 88%; animation-delay: 3.5s; }
.candle-sparks .spark:nth-child(9) { left: 35%; animation-delay: 4s; }
.candle-sparks .spark:nth-child(10) { left: 65%; animation-delay: 1.8s; }

@keyframes spark-float {
  0%, 100% { 
    transform: translateY(100vh) scale(0); 
    opacity: 0;
  }
  10% {
    transform: translateY(90vh) scale(1);
    opacity: 0.8;
  }
  90% {
    opacity: 0.5;
  }
  100% { 
    transform: translateY(-10vh) scale(0.5);
    opacity: 0;
  }
}

/* Floating hearts */
.floating-hearts {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.floating-hearts .heart {
  position: absolute;
  font-size: 1.2rem;
  animation: heart-float 15s infinite ease-in-out;
  opacity: 0;
}

.floating-hearts .heart:nth-child(1) { left: 10%; animation-delay: 0s; }
.floating-hearts .heart:nth-child(2) { left: 25%; animation-delay: 3s; }
.floating-hearts .heart:nth-child(3) { left: 40%; animation-delay: 1s; }
.floating-hearts .heart:nth-child(4) { left: 55%; animation-delay: 4s; }
.floating-hearts .heart:nth-child(5) { left: 70%; animation-delay: 2s; }
.floating-hearts .heart:nth-child(6) { left: 85%; animation-delay: 5s; }

@keyframes heart-float {
  0%, 100% { transform: translateY(100vh); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.3; }
  100% { transform: translateY(-10vh); opacity: 0; }
}

/* Comfort whisper */
.comfort-whisper {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.98);
  padding: 12px 24px;
  border-radius: 25px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-chocolate);
  box-shadow: 0 6px 25px rgba(0,0,0,0.12);
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 200;
  text-align: center;
  max-width: 90%;
}

.comfort-whisper.visible {
  opacity: 1;
}

/* Mrs Claus comfort character */
.mrs-claus-comfort {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 2.5rem;
  z-index: 100;
  cursor: pointer;
  animation: gentle-comfort-sway 4s ease-in-out infinite;
}

@keyframes gentle-comfort-sway {
  0%, 100% { transform: rotate(-2deg) scale(1); }
  50% { transform: rotate(2deg) scale(1.02); }
}

.mrs-claus-comfort-bubble {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 10px;
  background: white;
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 0.85rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
  font-family: var(--font-body);
  color: var(--color-chocolate);
  max-width: 200px;
}

.mrs-claus-comfort:hover .mrs-claus-comfort-bubble {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   JOY PAGE ANIMATIONS
   ============================================ */

/* Joy page interactive items (keep nav at very top) */
.jingle-joy,
.music-note,
.star-wand {
  position: fixed;
  z-index: 200;
  cursor: pointer;
  user-select: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25));
}

.jingle-joy {
  bottom: 20px;
  left: 20px;
  font-size: 2.6rem;
  animation: elf-bounce 2s ease-in-out infinite;
}

.jingle-bubble {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.98);
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.9rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.25s ease;
  pointer-events: none;
  font-family: var(--font-body);
  color: var(--color-forest-green);
  max-width: 220px;
}

.jingle-joy.speaking .jingle-bubble {
  opacity: 1;
  transform: translateY(0);
}

.music-note {
  bottom: 20px;
  left: 92px;
  font-size: 2.1rem;
  animation: sparkle-twinkle 2s ease-in-out infinite;
}

.star-wand {
  bottom: 20px;
  left: 148px;
  font-size: 2.1rem;
  animation: star-glow 2s ease-in-out infinite;
}

.confetti-hint {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  pointer-events: none;
  font-family: var(--font-heading);
  font-style: italic;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
}

/* Joy sparkle background */
.sparkle-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.sparkle-bg .sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--color-gold);
  border-radius: 50%;
  box-shadow: 0 0 8px 2px rgba(201, 162, 39, 0.6);
  animation: sparkle-twinkle 2s ease-in-out infinite;
}

.sparkle-bg .sparkle:nth-child(1) { top: 10%; left: 15%; animation-delay: 0s; }
.sparkle-bg .sparkle:nth-child(2) { top: 20%; left: 80%; animation-delay: 0.3s; }
.sparkle-bg .sparkle:nth-child(3) { top: 30%; left: 40%; animation-delay: 0.6s; }
.sparkle-bg .sparkle:nth-child(4) { top: 40%; left: 70%; animation-delay: 0.9s; }
.sparkle-bg .sparkle:nth-child(5) { top: 50%; left: 25%; animation-delay: 0.2s; }
.sparkle-bg .sparkle:nth-child(6) { top: 60%; left: 85%; animation-delay: 0.5s; }
.sparkle-bg .sparkle:nth-child(7) { top: 70%; left: 55%; animation-delay: 0.8s; }
.sparkle-bg .sparkle:nth-child(8) { top: 80%; left: 10%; animation-delay: 0.1s; }
.sparkle-bg .sparkle:nth-child(9) { top: 15%; left: 50%; animation-delay: 0.4s; }
.sparkle-bg .sparkle:nth-child(10) { top: 85%; left: 65%; animation-delay: 0.7s; }
.sparkle-bg .sparkle:nth-child(11) { top: 25%; left: 90%; animation-delay: 1.0s; }
.sparkle-bg .sparkle:nth-child(12) { top: 45%; left: 5%; animation-delay: 1.3s; }

@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

/* Rainbow glow */
.rainbow-glow {
  position: fixed;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  height: 60%;
  background: radial-gradient(ellipse at top, 
    rgba(255, 200, 100, 0.1) 0%, 
    rgba(255, 150, 150, 0.05) 30%,
    transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: rainbow-pulse 5s ease-in-out infinite alternate;
}

@keyframes rainbow-pulse {
  0% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  100% { opacity: 0.8; transform: translateX(-50%) scale(1.05); }
}

/* Pepper elf character */
.pepper-elf {
  position: fixed;
  bottom: 20px;
  left: 20px;
  font-size: 2.5rem;
  z-index: 100;
  cursor: pointer;
  animation: elf-bounce 2s ease-in-out infinite;
}

@keyframes elf-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.pepper-elf-bubble {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 10px;
  background: white;
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 0.85rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
  font-family: var(--font-body);
  color: var(--color-forest-green);
  max-width: 180px;
}

.pepper-elf:hover .pepper-elf-bubble {
  opacity: 1;
  transform: translateY(0);
}

/* Confetti */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  animation: confetti-fall 6s infinite ease-in-out;
  opacity: 0;
}

.confetti.red { background: var(--color-deep-red); }
.confetti.green { background: var(--color-forest-green); }
.confetti.gold { background: var(--color-gold); }
.confetti.white { background: white; }

.confetti:nth-child(1) { left: 10%; animation-delay: 0s; }
.confetti:nth-child(2) { left: 20%; animation-delay: 0.5s; }
.confetti:nth-child(3) { left: 30%; animation-delay: 1s; }
.confetti:nth-child(4) { left: 40%; animation-delay: 0.3s; }
.confetti:nth-child(5) { left: 50%; animation-delay: 0.8s; }
.confetti:nth-child(6) { left: 60%; animation-delay: 1.2s; }
.confetti:nth-child(7) { left: 70%; animation-delay: 0.2s; }
.confetti:nth-child(8) { left: 80%; animation-delay: 0.7s; }
.confetti:nth-child(9) { left: 90%; animation-delay: 1.1s; }

@keyframes confetti-fall {
  0%, 100% { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.3; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* Joy whisper */
.joy-whisper {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.98);
  padding: 12px 24px;
  border-radius: 25px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-forest-green);
  box-shadow: 0 6px 25px rgba(0,0,0,0.12);
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 200;
  text-align: center;
  max-width: 90%;
}

.joy-whisper.visible {
  opacity: 1;
}

/* ============================================
   SITTING ROOM PAGE ANIMATIONS
   ============================================ */

/* Fireplace glow */
.fireplace-ambient,
.fireplace-glow {
  position: fixed;
  bottom: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 60%;
  background: radial-gradient(ellipse at bottom, rgba(201, 162, 39, 0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: fire-flicker 3s ease-in-out infinite alternate;
}

@keyframes fire-flicker {
  0% { opacity: 0.6; }
  50% { opacity: 0.9; }
  100% { opacity: 0.7; }
}

/* Ember particles */
.ember-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.ember {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(255, 140, 50, 0.9), transparent);
  border-radius: 50%;
  animation: ember-rise 10s infinite ease-out;
  opacity: 0;
}

.ember:nth-child(1) { left: 45%; animation-delay: 0s; }
.ember:nth-child(2) { left: 48%; animation-delay: 1.5s; }
.ember:nth-child(3) { left: 51%; animation-delay: 3s; }
.ember:nth-child(4) { left: 54%; animation-delay: 0.8s; }
.ember:nth-child(5) { left: 47%; animation-delay: 2.2s; }
.ember:nth-child(6) { left: 52%; animation-delay: 4s; }

@keyframes ember-rise {
  0%, 100% { transform: translateY(100vh) scale(1); opacity: 0; }
  10% { opacity: 0.8; }
  50% { transform: translateY(50vh) translateX(10px) scale(0.7); opacity: 0.5; }
  90% { opacity: 0.2; }
  100% { transform: translateY(-10vh) translateX(-10px) scale(0.3); opacity: 0; }
}

/* Sitting room whisper */
.sitting-room-whisper {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.98);
  padding: 12px 24px;
  border-radius: 25px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-chocolate);
  box-shadow: 0 6px 25px rgba(0,0,0,0.12);
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 200;
  text-align: center;
  max-width: 90%;
}

.sitting-room-whisper.visible {
  opacity: 1;
}

/* Snowball cat sitting room */
.sitting-snowball {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 2.5rem;
  z-index: 100;
  cursor: pointer;
  animation: cat-purr 3s ease-in-out infinite;
}

@keyframes cat-purr {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.sitting-snowball-bubble {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 10px;
  background: white;
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 0.85rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
  font-family: var(--font-body);
  color: var(--color-chocolate);
  max-width: 180px;
}

.sitting-snowball:hover .sitting-snowball-bubble {
  opacity: 1;
  transform: translateY(0);
}