/* ==========================================================================
   1. HERO EDITORIAL CINEMATIC MOTION (LAYOUT & BASE STYLING)
   ========================================================================== */

.hero-slider-section {
  background-color: #0c0907;
  position: relative;
  overflow: hidden;
}

.hero-slides-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #0c0907;
}

/* Individual Hero Slide */
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  will-change: opacity, visibility;
}

/* Active Slide */
.hero-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 3;
}

/* Slide Background */
.hero-slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.0);
  transform-origin: center center;
  will-change: transform;
}

/* Hero Gradient Overlay for Crystal-Clear Typography Contrast */
.hero-slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(12, 9, 7, 0.40) 0%, rgba(12, 9, 7, 0.82) 100%),
    linear-gradient(180deg, rgba(12, 9, 7, 0.70) 0%, rgba(12, 9, 7, 0.20) 35%, rgba(12, 9, 7, 0.45) 65%, rgba(12, 9, 7, 0.98) 100%),
    linear-gradient(90deg, rgba(12, 9, 7, 0.5) 0%, transparent 25%, transparent 75%, rgba(12, 9, 7, 0.5) 100%);
}

/* Counter Fade */
.counter-current {
  transition: opacity 0.25s ease;
  display: inline-block;
}

/* ==========================================================================
   2. GSAP SCROLL REVEAL ARCHITECTURE (PHASE 2 MASTER MOTION)
   ========================================================================== */

/* Progressive Enhancement: 100% visible if JS is inactive or fails */
html:not(.js-ready) .reveal,
html:not(.js-ready) .reveal-heading,
html:not(.js-ready) .reveal-text,
html:not(.js-ready) .reveal-card,
html:not(.js-ready) .reveal-editorial-img,
html:not(.js-ready) .reveal-spotlight,
html:not(.js-ready) .section-header-center,
html:not(.js-ready) .story-grid,
html:not(.js-ready) .product-showcase-wrapper,
html:not(.js-ready) .distinction-grid,
html:not(.js-ready) .journey-timeline,
html:not(.js-ready) .quality-grid,
html:not(.js-ready) .export-card-container,
html:not(.js-ready) .social-cards-grid,
html:not(.js-ready) .final-moment-inner,
html:not(.js-ready) .recipe-card {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Base Editorial Image Frame Clipping */
.story-visual-column,
.story-image-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg, 16px);
}

.story-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  will-change: transform;
}

/* Decorative Eyebrow Gold Line */
.eyebrow::before,
.story-eyebrow::before {
  transform-origin: left center;
  will-change: transform;
}

/* ==========================================================================
   3. POLISHED LUXURY HOVER STATES & MICRO-INTERACTIONS
   ========================================================================== */

/* Primary Button: 1px Micro-Lift & Soft Glow */
.btn-primary,
.btn-story-primary {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.25s ease,
              border-color 0.25s ease;
}

.btn-primary:hover,
.btn-story-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.25);
}

.btn-primary:active,
.btn-story-primary:active {
  transform: translateY(0);
}

/* Outline Buttons */
.btn-outline,
.btn-story-outline {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s ease,
              box-shadow 0.25s ease,
              background-color 0.25s ease;
}

.btn-outline:hover,
.btn-story-outline:hover {
  transform: translateY(-1px);
  border-color: var(--color-gold-primary, #D4AF37);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.15);
  background: rgba(212, 175, 55, 0.05);
}

/* Product Showcase Main View */
.product-showcase-wrapper {
  position: relative;
  border-radius: var(--radius-lg, 16px);
  background: radial-gradient(
    circle at 50% 20%,
    rgba(212, 175, 55, 0.06) 0%,
    rgba(32, 25, 20, 0.45) 50%,
    rgba(18, 14, 11, 0.92) 100%
  );
  border: 1px solid var(--glass-border, rgba(212, 175, 55, 0.16));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 25px rgba(212, 175, 55, 0.04);
}

.product-main-view-frame {
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.product-main-view-frame:hover {
  border-color: var(--glass-border-hover, rgba(212, 175, 55, 0.45));
}

#product-main-image {
  transition: opacity 0.25s ease;
  will-change: opacity;
}

/* Product Thumbnails */
.thumb-btn {
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.thumb-btn:hover {
  border-color: var(--color-gold-soft, #E6C76A);
}

.thumb-btn.active {
  border-color: var(--color-gold-primary, #D4AF37);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}

/* Cards Hover (Stationary container with elegant border/shadow glow) */
.distinction-card,
.journey-step-card,
.quality-card,
.social-channel-card,
.future-product-card,
.story-attr-item,
.recipe-card,
.discovery-card {
  transition: border-color 0.4s ease,
              box-shadow 0.4s ease;
  transform: none;
}

.distinction-card:hover,
.journey-step-card:hover,
.quality-card:hover,
.social-channel-card:hover,
.future-product-card:hover,
.story-attr-item:hover,
.recipe-card:hover,
.discovery-card:hover {
  transform: none;
  border-color: var(--glass-border-hover, rgba(212, 175, 55, 0.45));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 16px rgba(212, 175, 55, 0.08);
}

/* ==========================================================================
   4. STANDARDIZED IMAGE-ONLY HOVER ZOOM SYSTEM (850ms, scale 1.06)
   ========================================================================== */

/* Image Containers - Securely Clip Zoomed Imagery */
.story-image-frame,
.story-visual-column,
.product-main-view-frame,
.discovery-visual-frame,
.social-card-media,
.recipe-card-media,
.recipe-modal-media-frame {
  overflow: hidden;
  position: relative;
}

/* Base Image State */
.story-main-img,
.product-display-img,
.product-main-img,
.discovery-thumb-img,
.social-card-img,
.recipe-card-img,
.recipe-modal-img,
.bridge-thumb {
  transform: scale(1);
  transform-origin: center center;
  transition: transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Image-Only Hover Zoom (scale 1.06) */
.story-image-frame:hover .story-main-img,
.story-visual-column:hover .story-main-img,
.story-main-img:hover,
.product-main-view-frame:hover .product-display-img,
.product-main-view-frame:hover .product-main-img,
.product-display-img:hover,
.product-main-img:hover,
.discovery-card:hover .discovery-thumb-img,
.discovery-visual-frame:hover .discovery-thumb-img,
.discovery-thumb-img:hover,
.social-channel-card:hover .social-card-img,
.social-card-media:hover .social-card-img,
.social-card-img:hover,
.recipe-card:hover .recipe-card-img,
.recipe-card-media:hover .recipe-card-img,
.recipe-card-img:hover,
.recipe-modal-media-frame:hover .recipe-modal-img,
.recipe-modal-img:hover,
.recipe-product-bridge:hover .bridge-thumb,
.bridge-thumb:hover {
  transform: scale(1.06);
}

.discovery-ai-badge-icon {
  transform: scale(1);
  transform-origin: center center;
  transition: transform 850ms cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}

.discovery-card:hover .discovery-ai-badge-icon {
  transform: scale(1.06);
  color: var(--color-gold-primary, #D4AF37);
}

/* ==========================================================================
   5. AMBIENT GOLD DUST CANVAS
   ========================================================================== */
#ambient-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
}

/* ==========================================================================
   6. MOBILE TOUCH OVERRIDES (Disable hover jumps on touch devices)
   ========================================================================== */
@media (hover: none) {
  .btn-primary:hover,
  .btn-story-primary:hover,
  .btn-outline:hover,
  .btn-story-outline:hover,
  .distinction-card:hover,
  .journey-step-card:hover,
  .quality-card:hover,
  .social-channel-card:hover,
  .future-product-card:hover,
  .story-attr-item:hover,
  .recipe-card:hover,
  .discovery-card:hover,
  .thumb-btn:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ==========================================================================
   7. ACCESSIBILITY OVERRIDES (prefers-reduced-motion)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Disable heavy looping motion */
  .hero-slide-img,
  .hero-slide.active .hero-slide-img {
    animation: none !important;
  }

  .eyebrow::before,
  .story-eyebrow::before {
    transform: scaleX(1) !important;
  }

  #ambient-canvas {
    display: none !important;
  }

  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
}