/* ==========================================================================
   Panova — Theme Motion & Transition System
   Adapted for: Espresso Ink (#200c04), Warm Cream (#FAF6EE / #e6d9c5),
   and Antique Gold (#b8935a / #785926)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Luxury Scroll Progress Bar (Sticky Top Hairline)
   -------------------------------------------------------------------------- */
#panova-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #785926 0%, #b8935a 50%, #e9c083 100%);
  z-index: 10000;
  pointer-events: none;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(184, 147, 90, 0.5);
}

/* --------------------------------------------------------------------------
   3. Scroll Animation Engine & Reveal Utilities
   -------------------------------------------------------------------------- */
[data-scroll-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition-property: opacity, transform, filter;
  transition-duration: 0.85s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fade Up (Default) */
[data-scroll-reveal],
[data-scroll-reveal="fade-up"] {
  transform: translateY(32px);
}

/* Fade Down */
[data-scroll-reveal="fade-down"] {
  transform: translateY(-32px);
}

/* Fade In Bloom */
[data-scroll-reveal="fade-in"] {
  transform: scale(0.96);
  filter: blur(4px);
}

/* Slide Left / Right */
[data-scroll-reveal="slide-left"] {
  transform: translateX(-40px);
}

[data-scroll-reveal="slide-right"] {
  transform: translateX(40px);
}

/* Revealed State */
[data-scroll-reveal].is-revealed {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
  filter: blur(0px) !important;
}

/* Stagger Children Support */
.stagger-group [data-scroll-reveal]:nth-child(1) { transition-delay: 0.04s; }
.stagger-group [data-scroll-reveal]:nth-child(2) { transition-delay: 0.12s; }
.stagger-group [data-scroll-reveal]:nth-child(3) { transition-delay: 0.20s; }
.stagger-group [data-scroll-reveal]:nth-child(4) { transition-delay: 0.28s; }
.stagger-group [data-scroll-reveal]:nth-child(5) { transition-delay: 0.36s; }
.stagger-group [data-scroll-reveal]:nth-child(6) { transition-delay: 0.44s; }
.stagger-group [data-scroll-reveal]:nth-child(7) { transition-delay: 0.52s; }
.stagger-group [data-scroll-reveal]:nth-child(8) { transition-delay: 0.60s; }

/* Explicit Stagger Delays */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }

/* --------------------------------------------------------------------------
   4. Tactile Card Hover & Luxury Elevation
   -------------------------------------------------------------------------- */
.luxury-lift {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.luxury-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(32, 12, 4, 0.08);
}

/* Subtle Gold Accent Expansion */
.accent-line-reveal {
  position: relative;
  display: inline-block;
}

.accent-line-reveal::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background: #b8935a;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

[data-scroll-reveal].is-revealed .accent-line-reveal::after,
.accent-line-reveal.is-active::after {
  width: 100%;
}

/* --------------------------------------------------------------------------
   5. Artisanal Brew Text Motion System
   Atmospheric steam dissolves, liquid espresso pour fills, and crema shimmers
   -------------------------------------------------------------------------- */

/* 5a. Aromatic Steam Dissolve (Character/Word Blur Float) */
.brew-steam-text {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.brew-steam-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  filter: blur(8px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}

.brew-steam-text.is-brewed .brew-steam-word,
.is-revealed .brew-steam-word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* 5b. Crema Golden Shimmer Sweep (Liquid Light Glint) */
.brew-crema-shimmer {
  background: linear-gradient(
    110deg,
    #200c04 15%,
    #785926 40%,
    #b8935a 50%,
    #785926 60%,
    #200c04 85%
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cremaShimmer 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  display: inline;
}

@keyframes cremaShimmer {
  0% {
    background-position: 240% 0;
  }
  100% {
    background-position: -240% 0;
  }
}

/* On dark backgrounds (like roastery inverse sections) */
.brew-crema-shimmer-light {
  background: linear-gradient(
    110deg,
    #decab3 15%,
    #b8935a 38%,
    #FFFFFF 50%,
    #e9c083 62%,
    #decab3 85%
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cremaShimmer 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  display: inline;
}

/* 5c. Liquid Pour Fill (Espresso Extraction Rise) */
.brew-liquid-fill {
  position: relative;
  display: inline-block;
  color: rgba(120, 89, 38, 0.22);
}

.brew-liquid-fill::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  color: #200c04;
  overflow: hidden;
  border-bottom: 2px solid #b8935a;
  transition: height 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.is-revealed .brew-liquid-fill::after,
.brew-liquid-fill.is-brewed::after {
  height: 100%;
}

/* 5d. Interactive Brew Word Hover (Aromatic Steam Float) */
.brew-word-interactive {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              text-shadow 0.3s ease,
              color 0.3s ease;
  cursor: default;
}

.brew-word-interactive:hover {
  transform: translateY(-3px) scale(1.02);
  text-shadow: 0 6px 18px rgba(184, 147, 90, 0.35);
  color: #785926;
}

/* 5e. Slow-Drip Golden Droplet Indicator */
.brew-drip-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b8935a;
  animation: brewDripPulse 2.8s ease-in-out infinite;
  vertical-align: middle;
  margin: 0 4px;
}

@keyframes brewDripPulse {
  0%, 100% {
    transform: scale(0.85);
    opacity: 0.5;
    box-shadow: 0 0 0 0 rgba(184, 147, 90, 0);
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
    box-shadow: 0 0 12px 3px rgba(184, 147, 90, 0.5);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  #panova-scroll-progress {
    display: none !important;
  }
  [data-scroll-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .brew-crema-shimmer,
  .brew-crema-shimmer-light {
    animation: none !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
  }
  .brew-steam-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Mobile Stability: Eliminate physical translation jumps during scroll */
@media (max-width: 768px) {
  [data-scroll-reveal],
  [data-scroll-reveal="fade-up"],
  [data-scroll-reveal="fade-down"],
  [data-scroll-reveal="slide-left"],
  [data-scroll-reveal="slide-right"] {
    transform: none !important;
  }
}