/* ==============================================
   KANAR ART PLATFORM - EMOTIONAL COLOR SYSTEM
   ============================================== */

:root {
  /* Primary Palette */
  --baby-pink: #f5e6e8;
  --baby-pink-soft: #faf3f4;
  --baby-pink-medium: #f0d5d9;
  --baby-pink-deep: #e8c5cb;
  
  --lavender: #e6d5f0;
  --lavender-soft: #f2ebf7;
  --lavender-medium: #d9c3e8;
  --lavender-accent: #c9adde;
  
  --strong-purple: #9b7ab8;
  --strong-purple-deep: #7d5a9a;
  --strong-purple-accent: #b595d1;
  
  --off-white: #fdfcfc;
  --soft-white: #f9f8f8;
  --warm-white: #faf9f7;
  
  /* Neutral Tones */
  --stone-gray: #e8e6e5;
  --warm-gray: #d9d7d6;
  --text-primary: #4a4745;
  --text-secondary: #6f6d6b;
  --text-muted: #a39f9d;
  
  /* Semantic Colors */
  --error: #d97b88;
  --success: #9bb89d;
  --warning: #e8c9a5;
  
  /* Shadows & Depth */
  --shadow-soft: 0 4px 16px rgba(155, 122, 184, 0.08);
  --shadow-medium: 0 8px 24px rgba(155, 122, 184, 0.12);
  --shadow-strong: 0 12px 32px rgba(155, 122, 184, 0.16);
  
  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Spectral', Georgia, serif;
  
  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  
  /* Borders */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 200ms ease-out;
  --transition-base: 350ms ease-out;
  --transition-slow: 600ms ease-out;
  --transition-breath: 4s ease-in-out;
  
  /* Atmospheric Motion */
  --breath-scale: 1.02;
  --float-distance: 12px;
}

/* ==============================================
   GLOBAL RESET & BASE STYLES
   ============================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  color: var(--text-primary);
  background-color: var(--off-white);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: hidden;
}

/* Global animated background - present on all pages */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(230, 213, 240, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(245, 230, 232, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(201, 173, 222, 0.08) 0%, transparent 60%);
  animation: ambientDrift 40s ease-in-out infinite;
  pointer-events: none;
}

/* Subtle grain texture overlay */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
}

@keyframes ambientDrift {
  0%, 100% { 
    transform: translate(0, 0) scale(1);
  }
  25% { 
    transform: translate(3%, -2%) scale(1.05);
  }
  50% { 
    transform: translate(-2%, 3%) scale(1.02);
  }
  75% { 
    transform: translate(2%, 1%) scale(1.03);
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-primary);
}

/* Fluid typography using clamp for responsive scaling */
h1 { 
  font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); 
  letter-spacing: -0.02em; 
}
h2 { 
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem); 
  letter-spacing: -0.01em; 
}
h3 { 
  font-size: clamp(1.25rem, 2vw + 0.5rem, 1.5rem); 
}
h4 { 
  font-size: clamp(1.1rem, 1.5vw + 0.5rem, 1.25rem); 
}

p {
  font-size: clamp(0.95rem, 1vw + 0.5rem, 1.05rem);
}



a {
  color: var(--strong-purple);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--strong-purple-deep);
}

/* ==============================================
   LAYOUT COMPONENTS
   ============================================== */

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container-narrow {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section {
  padding: var(--space-xl) 0;
}

/* ==============================================
   HEADER & NAVIGATION
   ============================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(253, 252, 252, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stone-gray);
  padding: var(--space-md) 0;
  height: 80px; /* Fixed height for consistent spacing */
}

/* Add top margin to main content to prevent header overlap */
main {
  margin-top: 80px;
}

.nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.header .nav-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--strong-purple);
  font-weight: 400;
  letter-spacing: 0.02em;
  position: absolute;
  left: var(--space-md);
  transform: none;
  z-index: 10;
}

.nav-links {
  display: flex;
  gap: var(--space-lg);
  list-style: none;
  margin-left: auto;
}

.nav-links a {
  color: var(--text-secondary);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: color var(--transition-fast);
}

.nav-links a:hover {
  color: var(--strong-purple);
}

.nav-links a.active {
  color: var(--strong-purple);
  font-weight: 500;
}

/* ==============================================
   BUTTONS - ENHANCED MICRO-INTERACTIONS
   ============================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

/* Ripple effect on click */
.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease-out, height 0.6s ease-out;
}

.btn:active::after {
  width: 300px;
  height: 300px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--strong-purple), var(--strong-purple-deep));
  color: white;
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--strong-purple-deep), var(--strong-purple-accent));
  box-shadow: 0 8px 32px rgba(155, 122, 184, 0.3), var(--shadow-medium);
  transform: translateY(-4px) scale(1.05);
}

.btn-secondary {
  background: linear-gradient(135deg, var(--baby-pink), var(--baby-pink-medium));
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: linear-gradient(135deg, var(--baby-pink-medium), var(--baby-pink-deep));
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--stone-gray);
  transition: all 0.5s ease-out;
}

.btn-ghost:hover {
  background: linear-gradient(135deg, rgba(230, 213, 240, 0.1), rgba(245, 230, 232, 0.1));
  border-color: var(--lavender);
  color: var(--strong-purple);
  box-shadow: 0 0 20px rgba(230, 213, 240, 0.2);
}

/* ==============================================
   CARDS
   ============================================== */

.card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

/* Subtle shine effect on hover */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(230, 213, 240, 0.1) 50%,
    transparent 100%
  );
  transition: left 1.5s ease-out;
}

.card:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-8px) scale(1.02);
}

.card:hover::before {
  left: 100%;
}

.card-minimal {
  background: var(--soft-white);
  border: 1px solid var(--stone-gray);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: all 0.6s ease-out;
}

.card-minimal:hover {
  border-color: var(--lavender);
  background: white;
  box-shadow: var(--shadow-soft);
}

/* ==============================================
   GALLERY GRID - ENHANCED VISUAL DEPTH
   ============================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  position: relative;
}

.gallery-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4/5;
  background: var(--soft-white);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--shadow-soft);
}

.gallery-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(230, 213, 240, 0.1) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.6s ease-out;
  z-index: 1;
}

.gallery-item:hover::before {
  opacity: 1;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gallery-item:hover {
  box-shadow: 0 12px 40px rgba(155, 122, 184, 0.2);
  transform: translateY(-12px) scale(1.02);
}

.gallery-item:hover img {
  transform: scale(1.08) rotate(1deg);
}

.gallery-item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  background: linear-gradient(
    to top, 
    rgba(155, 122, 184, 0.9) 0%, 
    rgba(74, 71, 69, 0.6) 60%,
    transparent 100%
  );
  color: white;
  opacity: 0;
  transition: opacity 0.8s ease-out;
  z-index: 2;
  backdrop-filter: blur(8px);
}

.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}

.gallery-item-overlay h4 {
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ==============================================
   PRIVATE HOME - IMMUTABLE MESSAGE
   ============================================== */

.immutable-message {
  max-width: 800px;
  margin: var(--space-2xl) auto;
  padding: var(--space-xl);
  text-align: center;
  background: linear-gradient(135deg, var(--lavender-soft), var(--baby-pink-soft));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-medium);
  position: relative;
  overflow: hidden;
  animation: fadeIn 1.5s ease-out, glowPulse 8s ease-in-out 2s infinite;
}

.immutable-message::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(230, 213, 240, 0.4) 0%, transparent 70%);
  animation: pulse 12s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.6; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 0.3; }
}

.immutable-message-content {
  position: relative;
  z-index: 1;
}

.immutable-message p {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--strong-purple-deep);
  margin: 0;
  font-style: italic;
  text-shadow: 0 2px 12px rgba(255, 255, 255, 0.8);
}

/* ==============================================
   TEXT SLIDER - ENHANCED ATMOSPHERE
   ============================================== */

.text-slider {
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    to bottom, 
    var(--off-white) 0%, 
    var(--lavender-soft) 50%,
    var(--baby-pink-soft) 100%
  );
  background-size: 100% 300%;
  animation: lavenderDrift 25s ease-in-out infinite;
  padding: var(--space-2xl) var(--space-md);
}

.text-slider::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lavender) 0%, transparent 70%);
  opacity: 0.15;
  animation: particleDrift 30s ease-in-out infinite;
  top: 20%;
  left: 10%;
}

.text-slider::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--baby-pink) 0%, transparent 70%);
  opacity: 0.12;
  animation: particleDrift 35s ease-in-out infinite reverse;
  bottom: 20%;
  right: 10%;
}

.slider-text {
  position: absolute;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  text-align: center;
  padding: 0 var(--space-lg);
  max-width: 800px;
  z-index: 1;
}

.slider-text.active {
  opacity: 1;
  animation: float 8s ease-in-out infinite;
}

.slider-text p {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.9;
  color: var(--text-primary);
  font-style: italic;
  text-shadow: 0 2px 16px rgba(255, 255, 255, 0.9);
  font-weight: 300;
}

/* Slider signature under each quote */
.slider-signature {
  text-align: center;
  font-size: 0.75rem;
  color: var(--lavender-accent);
  opacity: 0.5;
  font-style: italic;
  margin-top: var(--space-sm);
  letter-spacing: 0.05em;
}

.slider-credit {
  text-align: center;
  margin-top: var(--space-lg);
  padding: var(--space-md);
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
  animation: breathe 6s ease-in-out infinite;
}

/* ==============================================
   PRESENCE SLIDER (Secondary Light Slider)
   ============================================== */

.presence-slider-section {
  background: linear-gradient(135deg, 
    rgba(230, 213, 240, 0.06), 
    rgba(242, 235, 247, 0.06)
  );
  border-radius: var(--radius-lg);
  margin: var(--space-xl) 0;
}

.presence-slider {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: var(--space-xl) var(--space-md);
}

.presence-text {
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  text-align: center;
  padding: 0 var(--space-lg);
  max-width: 700px;
  z-index: 1;
}

.presence-text.active {
  opacity: 1;
}

.presence-text p {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.8;
  color: var(--text-secondary);
  font-style: italic;
  font-weight: 300;
  margin-bottom: var(--space-sm);
}

/* Signature under each presence quote */
.presence-signature {
  text-align: center;
  font-size: 0.7rem;
  color: var(--lavender-accent);
  opacity: 0.45;
  font-style: italic;
  margin-top: var(--space-xs);
  letter-spacing: 0.05em;
}

/* ==============================================
   WARMTH BUTTON & MODAL - ENHANCED
   ============================================== */

/* Inline warmth button (in flow, not fixed) */
.warmth-button-inline {
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--lavender), var(--lavender-medium));
  color: var(--text-primary);
  border: none;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-medium);
  transition: all var(--transition-base);
  animation: gentleGlow 4s ease-in-out infinite;
}

.warmth-button-inline:hover {
  background: linear-gradient(135deg, var(--lavender-medium), var(--strong-purple));
  box-shadow: 0 8px 24px rgba(155, 122, 184, 0.35);
  transform: translateY(-2px);
}

/* Keep original fixed button for backward compatibility */
.warmth-button {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  padding: 1rem 1.75rem;
  background: linear-gradient(135deg, var(--lavender), var(--lavender-medium));
  color: var(--text-primary);
  border: none;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-medium);
  transition: all var(--transition-base);
  z-index: 100;
  animation: breathe 8s ease-in-out infinite, glowPulse 6s ease-in-out infinite 2s;
}

.warmth-button::before {
  content: '✨';
  margin-right: 0.5rem;
  font-size: 1.1rem;
  animation: float 4s ease-in-out infinite;
  display: inline-block;
}

.warmth-button:hover {
  background: linear-gradient(135deg, var(--lavender-medium), var(--lavender-accent));
  box-shadow: 0 0 40px rgba(230, 213, 240, 0.8), var(--shadow-strong);
  transform: translateY(-6px) scale(1.05);
}

.warmth-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(230, 213, 240, 0.3);
  backdrop-filter: blur(12px);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.6s ease-out;
}

.warmth-modal.active {
  display: flex;
}

.warmth-modal-content {
  max-width: 650px;
  padding: var(--space-2xl);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(250, 243, 244, 0.95));
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(230, 213, 240, 0.4), var(--shadow-strong);
  text-align: center;
  animation: slideUp 0.8s ease-out, glowPulse 4s ease-in-out 1s infinite;
  backdrop-filter: blur(20px);
}

.warmth-modal-content::before {
  content: '🌸';
  display: block;
  font-size: 3rem;
  margin-bottom: var(--space-md);
  animation: float 5s ease-in-out infinite;
}

.warmth-modal-content p {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 2;
  color: var(--text-primary);
  margin-bottom: var(--space-xl);
  font-weight: 300;
}

.warmth-modal-close {
  padding: 0.85rem 2.5rem;
  background: linear-gradient(135deg, var(--baby-pink), var(--baby-pink-medium));
  border: none;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-soft);
}

.warmth-modal-close:hover {
  background: linear-gradient(135deg, var(--baby-pink-medium), var(--baby-pink-deep));
  box-shadow: var(--shadow-medium);
  transform: translateY(-2px);
}

/* ==============================================
   FOOTER
   ============================================== */

.footer {
  background: var(--soft-white);
  border-top: 1px solid var(--stone-gray);
  padding: var(--space-xl) 0;
  margin-top: var(--space-2xl);
  text-align: center;
}

.footer p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.footer a {
  color: var(--strong-purple);
  font-weight: 500;
}

.footer a:hover {
  color: var(--strong-purple-deep);
}

/* ==============================================
   MOBILE MENU SYSTEM - CLEAN BREAKPOINT LOGIC
   <= 900px: Mobile menu with toggle
   > 900px: Desktop navigation
   ============================================== */

/* Hide mobile toggle by default (desktop) */
.mobile-menu-toggle {
  display: none;
}

/* Desktop navigation - ensure links are visible */
@media (min-width: 901px) {
  .nav-links {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    padding: 0 !important;
  }
  
  .mobile-menu-close {
    display: none !important;
  }
}

/* Close button inside mobile menu panel */
.mobile-menu-close {
  display: none; /* Only shown when menu is active */
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--strong-purple);
  cursor: pointer;
  padding: 0.5rem;
  z-index: 10;
}

/* Mobile Menu Overlay */
@media (max-width: 900px) {
  /* Show mobile toggle on mobile/tablet */
  .mobile-menu-toggle {
    display: block;
    position: absolute;
    top: 50%;
    right: var(--space-md);
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--strong-purple);
    cursor: pointer;
    z-index: 1001;
    padding: 0.5rem;
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Hide desktop nav links by default */
  .nav-links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(253, 252, 252, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-2xl);
    z-index: 999;
  }
  
  /* Show menu when active */
  .nav-links.mobile-active {
    display: flex;
    animation: fadeIn 0.3s ease-out;
  }
  
  /* Show close button when menu is active */
  .nav-links.mobile-active .mobile-menu-close {
    display: block;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  .nav-links a {
    font-size: 1.3rem;
    padding: var(--space-sm) 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  .nav {
    position: relative;
  }
}

/* ==============================================
   COMPREHENSIVE RESPONSIVE DESIGN
   Mobile-First | Tablet-Specific | Touch-Optimized
   ============================================== */

/* ==============================================
   MOBILE (320px - 900px) - PRIMARY FOCUS
   ============================================== */

@media (max-width: 900px) {
  /* Reduced padding on mobile */
  .section {
    padding: var(--space-lg) 0;
  }
  
  .container,
  .container-narrow {
    padding: 0 var(--space-md);
  }
  
  /* Gallery - Responsive columns */
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  /* Immutable message - Fluid sizing */
  .immutable-message {
    padding: var(--space-md);
  }
  
  .immutable-message p {
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    line-height: 1.7;
  }
  
  /* Text slider - Fluid sizing */
  .slider-text p {
    font-size: clamp(1.2rem, 3.5vw, 1.4rem);
    line-height: 1.8;
    padding: 0 var(--space-sm);
  }
  
  /* Daily Whisper - Reduced size */
  .daily-whisper {
    padding: var(--space-md);
  }
  
  .daily-whisper-text {
    font-size: clamp(1rem, 2.5vw, 1.2rem) !important;
    line-height: 1.8;
  }
  
  /* Buttons - Touch-friendly */
  .btn {
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
    min-height: 44px;
  }
  
  /* Warmth button - Full width on mobile */
  .warmth-button {
    bottom: var(--space-md);
    right: var(--space-md);
    left: var(--space-md);
    width: calc(100% - var(--space-lg));
    text-align: center;
    font-size: 0.95rem;
    padding: 0.9rem;
  }
  
  /* Mood switch - Positioned above warmth button */
  .mood-switch {
    bottom: calc(var(--space-md) + 60px);
    right: var(--space-md);
    font-size: 0.85rem;
  }
  
  /* Cards - Full width with breathing room */
  .card,
  .dashboard-card-soft,
  .becoming-card {
    margin-bottom: var(--space-lg);
  }
  
  /* Forms - Touch optimized */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: 1rem;
    min-height: 48px;
  }
  
  /* Hide floating light blobs on mobile for performance */
  .light-blob {
    display: none;
  }
  
  /* Reduce cursor trail on mobile */
  .cursor-particle {
    display: none;
  }
  
  /* Mood previews - Stack vertically */
  .mood-preview {
    margin-bottom: var(--space-md);
  }
  
  /* Lightbox - Full screen */
  .warmth-modal-content {
    width: 95%;
    max-width: none;
    margin: var(--space-md);
  }
  
  /* Daily whisper - More prominent */
  .daily-whisper {
    padding: var(--space-lg);
  }
  
  .daily-whisper-text {
    font-size: 1.3rem;
    line-height: 2.2;
  }
  
  /* Scroll poetry - Larger */
  .poetry-line {
    font-size: 1.6rem;
    line-height: 2.2;
    padding: 0 var(--space-md);
  }
  
  /* Footer - Simplified */
  .footer {
    padding: var(--space-xl) 0;
    text-align: center;
  }
  
  .footer-signature {
    margin-top: var(--space-md);
  }
}

/* ==============================================
   TABLET (768px - 1024px) - DEDICATED LAYOUT
   ============================================== */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Typography - Balanced for tablet */
  html {
    font-size: 16px;
  }
  
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.6rem; }
  
  /* Layout - Optimized for tablet width */
  .container {
    max-width: 900px;
    padding: 0 var(--space-lg);
  }
  
  .container-narrow {
    max-width: 700px;
  }
  
  /* Gallery - 2 columns */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
  
  /* Navigation - Horizontal but compact */
  .nav-links {
    gap: var(--space-lg);
  }
  
  .nav-links a {
    font-size: 1rem;
  }
  
  /* Buttons - Medium size */
  .btn {
    padding: 0.85rem 1.75rem;
    font-size: 1rem;
  }
  
  /* Immutable message - Tablet optimized */
  .immutable-message p {
    font-size: 1.6rem;
    line-height: 2;
  }
  
  /* Text slider */
  .slider-text p {
    font-size: 1.8rem;
  }
  
  /* Becoming space - 2 columns */
  .becoming-space {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Modal - Centered, medium width */
  .warmth-modal-content {
    max-width: 600px;
  }
  
  /* Keep light blobs but reduce count */
  .light-blob-3,
  .light-blob-4 {
    display: none;
  }
}

/* ==============================================
   LARGE TABLET / SMALL DESKTOP (1025px - 1280px)
   ============================================== */

@media (min-width: 1025px) and (max-width: 1280px) {
  .container {
    max-width: 1100px;
  }
  
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .becoming-space {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================== */

@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch devices */
  .btn:hover,
  .card:hover,
  .gallery-item:hover {
    transform: none;
  }
  
  /* Add touch feedback instead */
  .btn:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }
  
  .card:active {
    transform: translateY(2px);
  }
  
  /* Increase tap targets */
  a, button, input, select, textarea {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Disable cursor trail */
  .cursor-particle {
    display: none !important;
  }
}

/* ==============================================
   LANDSCAPE MOBILE (COMMON FOR VIEWING)
   ============================================== */

@media (max-width: 896px) and (orientation: landscape) {
  /* Reduce vertical spacing */
  .section {
    padding: var(--space-lg) 0;
  }
  
  /* Header more compact */
  .header {
    padding: var(--space-xs) 0;
  }
  
  /* Immutable message smaller */
  .immutable-message p {
    font-size: 1.2rem;
  }
  
  /* Gallery - 2 columns even on small */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

/* ==============================================
   HIGH DENSITY DISPLAYS (RETINA)
   ============================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Slightly thinner fonts for crisp rendering */
  body {
    -webkit-font-smoothing: subpixel-antialiased;
  }
  
  /* Crisper borders */
  .card,
  .btn,
  input,
  textarea {
    border-width: 0.5px;
  }
}

/* ==============================================
   REDUCED MOTION (ACCESSIBILITY)
   ============================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .light-blob,
  .cursor-particle,
  .atmosphere-particle {
    display: none;
  }
}

/* ==============================================
   FLOATING LIGHT BLOBS - CONTINUOUS AMBIENT MOTION
   ============================================== */

/* Container for light blobs - add to body */
.light-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.15;
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}

.light-blob-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--lavender) 0%, transparent 70%);
  top: 10%;
  left: 5%;
  animation: blobDrift1 45s ease-in-out infinite;
}

.light-blob-2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, var(--baby-pink) 0%, transparent 70%);
  top: 60%;
  right: 8%;
  animation: blobDrift2 50s ease-in-out infinite;
}

.light-blob-3 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, var(--lavender-accent) 0%, transparent 70%);
  bottom: 15%;
  left: 40%;
  animation: blobDrift3 55s ease-in-out infinite;
}

.light-blob-4 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--strong-purple-accent) 0%, transparent 70%);
  top: 40%;
  left: 60%;
  animation: blobDrift4 48s ease-in-out infinite;
}

/* Unique drift paths for each blob - slow, organic, never repeating feel */
@keyframes blobDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(50px, -30px) scale(1.1); }
  50% { transform: translate(-40px, 60px) scale(0.95); }
  75% { transform: translate(30px, -50px) scale(1.05); }
}

@keyframes blobDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  20% { transform: translate(-60px, 40px) scale(1.08); }
  45% { transform: translate(70px, -20px) scale(0.92); }
  70% { transform: translate(-50px, -60px) scale(1.03); }
}

@keyframes blobDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  30% { transform: translate(40px, 50px) scale(1.12) rotate(5deg); }
  60% { transform: translate(-70px, -30px) scale(0.98) rotate(-5deg); }
  85% { transform: translate(60px, -40px) scale(1.05) rotate(3deg); }
}

@keyframes blobDrift4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(-50px, -40px) scale(0.9); }
  55% { transform: translate(60px, 70px) scale(1.15); }
  80% { transform: translate(-30px, 50px) scale(0.97); }
}

/* ==============================================
   SCROLL-TRIGGERED SECTION REVEALS
   ============================================== */

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-on-scroll-delay-1 {
  transition-delay: 0.2s;
}

.reveal-on-scroll-delay-2 {
  transition-delay: 0.4s;
}

.reveal-on-scroll-delay-3 {
  transition-delay: 0.6s;
}

/* ==============================================
   ENHANCED FOOTER WITH QUIET SIGNATURE
   ============================================== */

.footer-signature {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(230, 213, 240, 0.3);
}

.footer-signature p {
  font-size: 0.8rem;
  color: var(--text-muted);
  opacity: 0.6;
  letter-spacing: 0.02em;
  margin: 0;
  font-weight: 300;
}

/* ==============================================
   UTILITY CLASSES
   ============================================== */

.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.hidden { display: none; }
.fade-in {
  animation: fadeIn var(--transition-base);
}

/* ==============================================
   ATMOSPHERIC ANIMATIONS - BREATHING LIFE
   ============================================== */

/* Gentle breathing effect for cards and sections */
@keyframes breathe {
  0%, 100% { 
    transform: scale(1); 
    opacity: 1;
  }
  50% { 
    transform: scale(var(--breath-scale)); 
    opacity: 0.95;
  }
}

/* Soft floating motion */
@keyframes float {
  0%, 100% { 
    transform: translateY(0px); 
  }
  50% { 
    transform: translateY(calc(-1 * var(--float-distance))); 
  }
}

/* Lavender gradient drift */
@keyframes lavenderDrift {
  0% { 
    background-position: 0% 50%; 
  }
  50% { 
    background-position: 100% 50%; 
  }
  100% { 
    background-position: 0% 50%; 
  }
}

/* Gentle glow pulse */
@keyframes glowPulse {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(230, 213, 240, 0.3), var(--shadow-soft); 
  }
  50% { 
    box-shadow: 0 0 40px rgba(230, 213, 240, 0.6), var(--shadow-medium); 
  }
}

/* Atmospheric particle drift */
@keyframes particleDrift {
  0% { 
    transform: translate(0, 0) scale(1); 
    opacity: 0.4;
  }
  33% { 
    transform: translate(30px, -20px) scale(1.1); 
    opacity: 0.6;
  }
  66% { 
    transform: translate(-20px, -40px) scale(0.9); 
    opacity: 0.5;
  }
  100% { 
    transform: translate(0, 0) scale(1); 
    opacity: 0.4;
  }
}

/* Soft shimmer for hover states */
@keyframes shimmer {
  0% { 
    background-position: -200% center; 
  }
  100% { 
    background-position: 200% center; 
  }
}

/* ==============================================
   LAVENDER ATMOSPHERE COMPONENTS
   ============================================== */

/* Atmospheric background for private pages */
.lavender-atmosphere {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: linear-gradient(
    135deg, 
    var(--off-white) 0%, 
    var(--lavender-soft) 50%, 
    var(--baby-pink-soft) 100%
  );
  background-size: 400% 400%;
  animation: lavenderDrift 20s ease-in-out infinite;
  opacity: 0.6;
  pointer-events: none;
}

/* Floating lavender particles */
.atmosphere-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lavender) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0.3;
}

.atmosphere-particle-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  left: 5%;
  animation: particleDrift 25s ease-in-out infinite;
}

.atmosphere-particle-2 {
  width: 200px;
  height: 200px;
  top: 60%;
  right: 10%;
  animation: particleDrift 30s ease-in-out infinite 5s;
}

.atmosphere-particle-3 {
  width: 250px;
  height: 250px;
  bottom: 15%;
  left: 40%;
  animation: particleDrift 35s ease-in-out infinite 10s;
}

/* ==============================================
   ENHANCED COMPONENTS WITH BREATHING
   ============================================== */

/* Cards breathe subtly on idle */
.card-breathe {
  animation: breathe 8s ease-in-out infinite;
}

/* Floating elements */
.float-element {
  animation: float 6s ease-in-out infinite;
}

/* Lavender glow for special elements */
.lavender-glow {
  animation: glowPulse 4s ease-in-out infinite;
}

/* ==============================================
   POETIC TEXT STYLES
   ============================================== */

.poetic-line {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 2;
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
  margin: var(--space-lg) 0;
  opacity: 0.9;
}

.section-divider {
  height: 1px;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    var(--lavender) 50%, 
    transparent 100%
  );
  margin: var(--space-lg) auto;
  max-width: 300px;
}

/* ==============================================
   MOOD PREVIEW CARDS
   ============================================== */

.mood-preview {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.mood-preview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 100%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.mood-preview:hover::before {
  opacity: 1;
}

.mood-preview:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-strong);
}

.mood-preview-lavender {
  background: linear-gradient(135deg, var(--lavender-soft), var(--lavender-medium));
}

.mood-preview-pink {
  background: linear-gradient(135deg, var(--baby-pink-soft), var(--baby-pink-medium));
}

.mood-preview-purple {
  background: linear-gradient(135deg, var(--strong-purple-accent), var(--lavender-accent));
}

.mood-preview h3 {
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
  color: var(--strong-purple-deep);
}

.mood-preview p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
}

/* ==============================================
   EMPTY STATE ELEGANCE
   ============================================== */

.empty-state {
  text-align: center;
  padding: var(--space-2xl);
  opacity: 0.7;
}

.empty-state-icon {
  font-size: 4rem;
  color: var(--lavender);
  margin-bottom: var(--space-md);
  animation: breathe 6s ease-in-out infinite;
}

.empty-state h3 {
  font-size: 1.5rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  font-style: italic;
}

.empty-state p {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ==============================================
   PAPER-LIKE WRITING SPACE
   ============================================== */

.writing-space {
  background: linear-gradient(to bottom, #fdfcfc 0%, #faf9f7 100%);
  border: 1px solid var(--stone-gray);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02);
}

.writing-space textarea {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 2;
  color: var(--text-primary);
  border: none;
  background: transparent;
  resize: vertical;
  width: 100%;
  min-height: 200px;
  outline: none;
}

.writing-space textarea::placeholder {
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.6;
}

/* ==============================================
   ENHANCED PRIVATE NAVIGATION
   ============================================== */

.private-nav .nav-logo {
  color: var(--lavender-accent);
  text-shadow: 0 2px 8px rgba(230, 213, 240, 0.3);
}

.private-nav .nav-links a:hover {
  color: var(--lavender-accent);
}

.private-nav .nav-links a.active {
  color: var(--lavender-accent);
  border-bottom: 2px solid var(--lavender);
}

/* ==============================================
   CURSOR SOFT TRAIL (OPTIONAL)
   ============================================== */

.cursor-particle {
  position: fixed;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, var(--lavender-accent) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  animation: cursorFade 1.5s ease-out forwards;
}

@keyframes cursorFade {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

/* ==============================================
   SCROLL POETRY SYSTEM
   ============================================== */

.scroll-poetry {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) 0;
}

/* ==============================================
   SCROLL POETRY REMOVED PER REQUIREMENTS
   ============================================== */

/* ==============================================
   TIME-BASED ATMOSPHERE VARIATIONS
   ============================================== */

/* Morning (6am - 11am): Soft pink and warm whites */
body[data-time="morning"]::before {
  background: 
    radial-gradient(ellipse at 30% 20%, rgba(250, 243, 244, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(245, 230, 232, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(230, 213, 240, 0.1) 0%, transparent 60%);
}

/* Day (11am - 5pm): Balanced lavender */
body[data-time="day"]::before {
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(230, 213, 240, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(245, 230, 232, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(201, 173, 222, 0.08) 0%, transparent 60%);
}

/* Evening (5pm - 9pm): Deeper purples */
body[data-time="evening"]::before {
  background: 
    radial-gradient(ellipse at 25% 30%, rgba(201, 173, 222, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 70%, rgba(155, 122, 184, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(230, 213, 240, 0.1) 0%, transparent 60%);
}

/* Night (9pm - 6am): Subtle, calm, muted */
body[data-time="night"]::before {
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(201, 173, 222, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(155, 122, 184, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(230, 213, 240, 0.06) 0%, transparent 60%);
}

/* ==============================================
   MOOD SWITCH (LIGHT / CALM MODES)
   ============================================== */

body[data-mood="calm"] {
  --baby-pink: #f5e6e8;
  --lavender: #e6d5f0;
  --strong-purple: #9b7ab8;
  --off-white: #fdfcfc;
}

body[data-mood="warm"] {
  --baby-pink: #f9e8ea;
  --lavender: #f0e3f5;
  --strong-purple: #a988c0;
  --off-white: #fffefe;
}

/* Mood Switch Button (Private Only) */
.mood-switch {
  position: fixed;
  bottom: calc(var(--space-md) + 60px);
  right: var(--space-md);
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--stone-gray);
  border-radius: var(--radius-full);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
  backdrop-filter: blur(10px);
}

.mood-switch:hover {
  background: var(--lavender-soft);
  color: var(--strong-purple);
  box-shadow: var(--shadow-soft);
  transform: scale(1.05);
}

/* ==============================================
   DAILY WHISPER (PRIVATE ONLY)
   ============================================== */

.daily-whisper {
  background: linear-gradient(135deg, rgba(250, 243, 244, 0.4), rgba(242, 235, 247, 0.4));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(230, 213, 240, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  animation: fadeIn 1.5s ease-out, breathe 8s ease-in-out infinite;
}

.daily-whisper-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lavender-accent);
  margin-bottom: var(--space-sm);
  font-weight: 500;
}

.daily-whisper-text {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 2;
  color: var(--text-secondary);
  font-style: italic;
  margin: 0;
}

/* ==============================================
   JOURNAL-LIKE TYPOGRAPHY (ART LAB & NOTES)
   ============================================== */

.journal-header {
  font-family: var(--font-display);
  font-size: 2rem;
  font-style: italic;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: var(--space-lg);
  position: relative;
}

.journal-header::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--lavender) 50%, transparent 100%);
}

.journal-entry {
  background: linear-gradient(to bottom, #fdfcfc 0%, #faf9f7 100%);
  border: 1px solid var(--stone-gray);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: all var(--transition-base);
}

.journal-entry:hover {
  box-shadow: 0 4px 16px rgba(155, 122, 184, 0.1);
  transform: translateY(-2px);
}

.journal-date {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
  font-style: italic;
}

.journal-content {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-secondary);
}

/* ==============================================
   ENHANCED GALLERY EMPTY STATES
   ============================================== */

.gallery-empty-elegant {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  text-align: center;
  animation: fadeIn 1s ease-out;
}

.gallery-empty-elegant .empty-icon {
  font-size: 3rem;
  color: var(--lavender);
  margin-bottom: var(--space-md);
  animation: breathe 6s ease-in-out infinite;
}

.gallery-empty-elegant h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.gallery-empty-elegant .empty-poetry {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 2;
  color: var(--text-muted);
  max-width: 500px;
  margin-top: var(--space-md);
  font-style: italic;
}

/* ==============================================
   DASHBOARD ENHANCEMENTS
   ============================================== */

.dashboard-card-soft {
  background: linear-gradient(135deg, rgba(253, 252, 252, 0.95), rgba(250, 249, 247, 0.95));
  backdrop-filter: blur(10px);
  border: 1px solid var(--stone-gray);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dashboard-card-soft:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-4px);
}

.drag-drop-hint {
  border: 2px dashed var(--lavender);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  text-align: center;
  background: linear-gradient(135deg, rgba(250, 243, 244, 0.3), rgba(242, 235, 247, 0.3));
  transition: all var(--transition-base);
  cursor: pointer;
}

.drag-drop-hint:hover {
  background: linear-gradient(135deg, rgba(250, 243, 244, 0.5), rgba(242, 235, 247, 0.5));
  border-color: var(--lavender-accent);
  transform: scale(1.02);
}

.drag-drop-hint .upload-icon {
  font-size: 3rem;
  color: var(--lavender-accent);
  margin-bottom: var(--space-md);
  animation: float 4s ease-in-out infinite;
}

.drag-drop-hint p {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-secondary);
  margin: 0;
}

/* ==============================================
   LOGO & BRAND IDENTITY - "ART BY KANAR"
   ============================================== */

.nav-logo {
  /* position: relative; - REMOVED: conflicts with logo left positioning */
  font-size: 1.3rem !important;
  letter-spacing: 0.05em;
  font-weight: 400;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-logo::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--lavender-accent) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.nav-logo:hover::after {
  opacity: 1;
}

.nav-logo:hover {
  color: var(--lavender-accent);
  text-shadow: 0 0 20px rgba(201, 173, 222, 0.4);
  transform: translateY(-2px);
}

/* ==============================================
   ENHANCED HEADER - FLOATING FEEL
   ============================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(253, 252, 252, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(230, 213, 240, 0.2);
  padding: var(--space-md) 0;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 24px rgba(155, 122, 184, 0.05);
}

.header:hover {
  background: rgba(253, 252, 252, 0.95);
  box-shadow: 0 8px 32px rgba(155, 122, 184, 0.1);
}

/* Enhanced Navigation Links */
.nav-links a {
  position: relative;
  padding-bottom: 4px;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--lavender), var(--lavender-accent));
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(201, 173, 222, 0.4);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-links a:hover {
  text-shadow: 0 2px 8px rgba(201, 173, 222, 0.3);
}

/* ==============================================
   SWAN-INSPIRED SUBTLE ELEMENTS
   ============================================== */

/* Swan silhouette as decorative background */
.swan-element {
  position: absolute;
  opacity: 0.03;
  pointer-events: none;
  z-index: -1;
}

/* Feather-like separator */
.feather-separator {
  width: 100%;
  height: 60px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(230, 213, 240, 0.1) 30%,
    rgba(230, 213, 240, 0.15) 50%,
    rgba(230, 213, 240, 0.1) 70%,
    transparent 100%
  );
  position: relative;
  overflow: hidden;
}

.feather-separator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  width: 200px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--lavender-accent) 50%,
    transparent 100%
  );
}

/* Curved swan-inspired lines */
.swan-curve {
  position: absolute;
  width: 300px;
  height: 300px;
  border: 1px solid var(--lavender);
  opacity: 0.05;
  border-radius: 50% 50% 0 50%;
  pointer-events: none;
  animation: swanFloat 40s ease-in-out infinite;
}

@keyframes swanFloat {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(20px, -15px) rotate(5deg);
  }
  50% {
    transform: translate(-15px, 20px) rotate(-3deg);
  }
  75% {
    transform: translate(10px, -10px) rotate(2deg);
  }
}

/* ==============================================
   COLOR BREATHING MODE (PRIVATE ONLY)
   ============================================== */

body[data-breathing="active"] {
  animation: colorBreathe 60s ease-in-out infinite;
}

@keyframes colorBreathe {
  0%, 100% {
    --baby-pink: #f5e6e8;
    --lavender: #e6d5f0;
    --strong-purple: #9b7ab8;
  }
  33% {
    --baby-pink: #f9e8ea;
    --lavender: #ead8f2;
    --strong-purple: #a888c0;
  }
  66% {
    --baby-pink: #f7e4e6;
    --lavender: #e4d0ee;
    --strong-purple: #9e7dbc;
  }
}

/* ==============================================
   EXHIBITION MODE (PRIVATE ONLY)
   ============================================== */

body[data-exhibition="true"] .header,
body[data-exhibition="true"] .footer,
body[data-exhibition="true"] .warmth-button,
body[data-exhibition="true"] .mood-switch {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease-out;
}

body[data-exhibition="true"] main {
  margin-top: 0;
  padding-top: var(--space-2xl);
}

/* Exhibition Mode Toggle - Desktop only, hide on mobile */
.exhibition-toggle {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 1001;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--stone-gray);
  border-radius: var(--radius-full);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
  backdrop-filter: blur(10px);
  opacity: 0.3;
}

.exhibition-toggle:hover {
  opacity: 1;
  background: var(--lavender-soft);
  color: var(--strong-purple);
  box-shadow: var(--shadow-soft);
}

/* Hide Exhibition button on mobile/tablet */
@media (max-width: 900px) {
  .exhibition-toggle {
    display: none !important;
  }
}

/* ==============================================
   MEMORY CONSTELLATION (PRIVATE)
   ============================================== */

.memory-constellation {
  position: relative;
  min-height: 400px;
  padding: var(--space-2xl) 0;
  overflow: hidden;
}

.constellation-point {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, var(--lavender-accent) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  animation: constellationPulse 4s ease-in-out infinite;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.constellation-point:hover {
  transform: scale(2);
  opacity: 1;
  box-shadow: 0 0 20px var(--lavender-accent);
}

@keyframes constellationPulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.5);
  }
}

.constellation-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lavender-accent), transparent);
  opacity: 0.1;
  transform-origin: left center;
}

/* ==============================================
   BECOMING SPACE (PRIVATE)
   ============================================== */

.becoming-space {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  padding: var(--space-2xl) 0;
}

.becoming-card {
  background: linear-gradient(135deg, rgba(253, 252, 252, 0.9), rgba(250, 249, 247, 0.9));
  backdrop-filter: blur(15px);
  border: 1px solid var(--stone-gray);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.becoming-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(230, 213, 240, 0.2), transparent);
  transition: left 1s ease;
}

.becoming-card:hover::before {
  left: 100%;
}

.becoming-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(155, 122, 184, 0.15);
  border-color: var(--lavender-accent);
}

.becoming-card h3 {
  font-size: 1.5rem;
  color: var(--strong-purple);
  margin-bottom: var(--space-sm);
  font-style: italic;
}

.becoming-card .subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}

/* ==============================================
   DREAM NOTES (PRIVATE)
   ============================================== */

.dream-note-entry {
  background: linear-gradient(to bottom, #fdfcfc 0%, #faf9f7 100%);
  border-left: 3px solid var(--lavender);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: all var(--transition-base);
  position: relative;
}

.dream-note-entry::before {
  content: '🌙';
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  font-size: 1.5rem;
  opacity: 0.1;
}

.dream-note-entry:hover {
  box-shadow: 0 4px 20px rgba(155, 122, 184, 0.12);
  transform: translateX(4px);
  border-left-color: var(--lavender-accent);
}

.dream-note-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: var(--space-xs);
}

.dream-note-content {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-secondary);
}

/* ==============================================
   COLLAPSIBLE SECTIONS (PRIVATE)
   ============================================== */

.collapsible-section {
  margin: var(--space-lg) 0;
  border: 1px solid var(--stone-gray);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--off-white);
  transition: all var(--transition-base);
}

.collapsible-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  background: linear-gradient(135deg, rgba(253, 252, 252, 0.8), rgba(250, 249, 247, 0.8));
  transition: all var(--transition-base);
  user-select: none;
}

.collapsible-header:hover {
  background: linear-gradient(135deg, rgba(250, 243, 244, 0.6), rgba(242, 235, 247, 0.6));
}

.collapsible-header h3 {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--text-secondary);
  font-style: italic;
}

.collapsible-toggle {
  font-size: 1.5rem;
  color: var(--lavender-accent);
  transition: transform var(--transition-base);
  line-height: 1;
}

.collapsible-section.expanded .collapsible-toggle {
  transform: rotate(180deg);
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.collapsible-section.expanded .collapsible-content {
  max-height: 2000px; /* Large enough for content */
}

.collapsible-inner {
  padding: var(--space-lg);
}

/* ==============================================
   ABOUT PAGE OPTIMIZATIONS
   ============================================== */

/* Reduce vertical spacing on About page */
.about-content {
  max-width: 700px;
  margin: 0 auto;
}

.about-card {
  background: linear-gradient(135deg, rgba(253, 252, 252, 0.95), rgba(250, 249, 247, 0.9));
  border: 1px solid rgba(230, 213, 240, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-soft);
}

/* In Her Work - Always visible with simple fade-in on load */
.her-work-section {
  opacity: 1;
  animation: simpleFadeIn 0.8s ease-out;
}

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

.her-work {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: linear-gradient(135deg, rgba(230, 213, 240, 0.08), rgba(242, 235, 247, 0.08));
  border-radius: var(--radius-md);
  border: 1px solid rgba(230, 213, 240, 0.2);
}

.her-work h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  color: var(--lavender-accent);
  margin-bottom: var(--space-md);
  text-align: center;
  font-weight: 500;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.info-category h4 {
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  font-weight: 600;
  opacity: 0.8;
}

.info-category ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-category li {
  font-size: clamp(0.9rem, 2vw, 1rem);
  color: var(--text-secondary);
  line-height: 1.8;
  padding-left: var(--space-sm);
  position: relative;
  opacity: 0.85;
}

.info-category li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--lavender-accent);
  font-size: 1.2rem;
  line-height: 1.8;
}

/* Mobile About page optimizations */
@media (max-width: 900px) {
  .about-card {
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
  }

  .her-work {
    margin-top: var(--space-lg);
    padding: var(--space-md);
  }

  .info-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .section-divider {
    margin: var(--space-md) auto;
  }

  .mb-xl {
    margin-bottom: var(--space-lg) !important;
  }
  
  /* Presence slider mobile */
  .presence-slider {
    min-height: 250px;
    padding: var(--space-lg) var(--space-sm);
  }
  
  .presence-text p {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
  }
  
  /* Warmth button mobile */
  .warmth-button-inline {
    padding: 0.85rem 1.5rem;
    font-size: 0.9rem;
  }
}

/* ==============================================
   RTL (RIGHT-TO-LEFT) SUPPORT - DISABLED
   Layout stays SAME for all languages (English/Hebrew/Arabic)
   Only text content translates, NOT layout!
   ============================================== */

/* ALL RTL CSS DISABLED - Keep English LTR layout for all languages */

/*
html[dir="rtl"] {
  direction: rtl;
}

html[dir="rtl"] body {
  text-align: right;
}

html[dir="rtl"] .nav {
  flex-direction: row-reverse;
}

html[dir="rtl"] .nav-links {
  flex-direction: row-reverse;
}

html[dir="rtl"] .nav-logo {
  margin-right: 0;
  margin-left: auto;
}

html[dir="rtl"] .header {
  text-align: right;
}

html[dir="rtl"] .btn {
  text-align: center;
}

html[dir="rtl"] .card,
html[dir="rtl"] .about-card,
html[dir="rtl"] .dashboard-card-soft {
  text-align: right;
}

html[dir="rtl"] .gallery-grid {
  direction: rtl;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
}

html[dir="rtl"] .mood-preview {
  text-align: right;
}

html[dir="rtl"] .slider-text,
html[dir="rtl"] .presence-text {
  text-align: right;
}

html[dir="rtl"] .collapsible-header {
  flex-direction: row-reverse;
}

html[dir="rtl"] .info-category li {
  padding-left: 0;
  padding-right: var(--space-sm);
}

html[dir="rtl"] .info-category li::before {
  left: auto;
  right: 0;
}

html[dir="rtl"] .mobile-menu-toggle {
  right: auto;
  left: var(--space-md);
}

html[dir="rtl"] .mobile-menu-close {
  right: auto;
  left: var(--space-sm);
}

html[dir="rtl"] .warmth-button {
  right: auto;
  left: var(--space-lg);
}

html[dir="rtl"] .warmth-button-inline {
  text-align: center;
}

html[dir="rtl"] .footer {
  text-align: right;
}
*/

/* Language Switcher */
.language-switcher {
  position: relative;
  display: inline-block;
}

.language-btn {
  background: none;
  border: none;
  font-size: 0.9rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.language-btn:hover {
  background: var(--lavender-soft);
  color: var(--strong-purple);
}

.language-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--off-white);
  border: 1px solid var(--stone-gray);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
  min-width: 150px;
  z-index: 1000;
  margin-top: 0.5rem;
}

/* Language Dropdown - Keep on right for all languages */
/*
html[dir="rtl"] .language-dropdown {
  right: auto;
  left: 0;
}
*/

.language-dropdown.active {
  display: block;
  animation: fadeIn 0.2s ease-out;
}

.language-option {
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.language-option:hover {
  background: var(--lavender-soft);
  color: var(--strong-purple);
}

.language-option.active {
  background: var(--lavender);
  color: var(--text-primary);
  font-weight: 500;
}

.language-option:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.language-option:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

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