/* ==========================================================================
   PALMO Premium 3D Scrollytelling - Custom Stylesheet
   Luxury hospitality aesthetic: Ivory, Deep Green, Warm Gold
   ========================================================================== */

/* 1. Base Document Settings */
html {
  scroll-behavior: auto; /* Required for exact scroll physics and animation synchronisation */
  background-color: #0A291F;
  color: #1C1C1C;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2. Text Selection */
::selection {
  background-color: #B8924A;
  color: #0A291F;
}

::-moz-selection {
  background-color: #B8924A;
  color: #0A291F;
}

/* 3. Refined Luxury Scrollbar */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #B8924A #0A291F;
}

/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #0A291F;
}

::-webkit-scrollbar-thumb {
  background: #B8924A;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #D4AF37;
}

/* 4. Hairline Divider Helper */
.hairline {
  border: none;
  height: 1px;
  background-color: rgba(184, 146, 74, 0.35);
  width: 100%;
  display: block;
}

.hairline-vertical {
  width: 1px;
  background-color: rgba(184, 146, 74, 0.35);
  display: inline-block;
}

/* 5. Scroll Reveals */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

/* Stagger delay helpers for card grids */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* 6. Typography Helpers */
.font-serif {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.font-sans {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 7. Canvas Vignette & Radial Glow */
.hero-vignette {
  background: radial-gradient(circle at 50% 50%, rgba(22, 78, 59, 0.6) 0%, rgba(10, 41, 31, 0.85) 65%, #061c15 100%);
}

/* 8. Liquid Level Transition for Consistency Chapter */
#milk-liquid {
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), y 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), fill-opacity 0.6s ease, fill 0.6s ease;
}

#milk-surface {
  transition: cy 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), fill-opacity 0.6s ease;
}

/* 8.5. Easy to Prep Micro-animations & Transitions */
#prep-svg-powder,
#prep-svg-spoon,
#prep-svg-water-stream,
#prep-svg-water-ripples,
#prep-svg-whisk,
#prep-svg-swirl,
#prep-svg-froth {
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center center;
}

#prep-svg-milk-liquid {
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), y 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
}

@keyframes whiskStir {
  0% {
    transform: rotate(-3deg) translate(-2px, 0);
  }
  50% {
    transform: rotate(4deg) translate(2px, -3px);
  }
  100% {
    transform: rotate(-3deg) translate(-2px, 0);
  }
}

.anim-whisk-stir {
  animation: whiskStir 2.2s ease-in-out infinite;
  transform-origin: 100px 30px;
}

@keyframes ripplePulse {
  0% {
    r: 6;
    opacity: 0.85;
  }
  100% {
    r: 34;
    opacity: 0;
  }
}

.anim-ripple {
  animation: ripplePulse 1.8s ease-out infinite;
}

@keyframes swirlRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.anim-swirl {
  animation: swirlRotate 9s linear infinite;
  transform-origin: 100px 145px;
}

/* 9. Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  #milk-liquid,
  #milk-surface,
  #loader,
  .transition-all,
  .transition-opacity,
  .transition-transform {
    transition: none !important;
    animation: none !important;
  }
}