/* ═══════════════════════════════════════════════════════════════
   ALPHA SURFACES — Shared Animation Styles v5
   Adds: Lenis smooth scroll base, enhanced reveal timings
   ═══════════════════════════════════════════════════════════════ */

/* --- 0. LENIS SMOOTH SCROLL --- */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* --- 1. SCROLL REVEAL --- */
.anim-reveal {
  opacity: 0;
  transform: translateY(60px);
  filter: blur(6px);
}
.anim-ready .anim-reveal {
  transition: opacity 1s ease-out, transform 1s ease-out, filter 1s ease-out;
}
.anim-reveal.anim-visible {
  opacity: 1;
  transform: translateY(0) translateX(0);
  filter: blur(0);
}

/* Headings reveal with X offset */
.anim-reveal-heading {
  opacity: 0;
  transform: translateX(-20px) translateY(30px);
  filter: blur(6px);
}
.anim-ready .anim-reveal-heading {
  transition: opacity 1s ease-out, transform 1s ease-out, filter 1s ease-out;
}
.anim-reveal-heading.anim-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
  filter: blur(0);
}

/* Section labels slide from left */
.anim-reveal-label {
  opacity: 0;
  transform: translateX(-30px);
  filter: blur(4px);
}
.anim-ready .anim-reveal-label {
  transition: opacity 0.8s ease-out, transform 0.8s ease-out, filter 0.8s ease-out;
}
.anim-reveal-label.anim-visible {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

/* Above-fold stagger — set by JS */
.anim-above-fold.anim-visible {
  transition-delay: var(--above-fold-delay, 0s);
}

/* Staggered children — delay set via JS with --anim-delay */
.anim-stagger > .anim-reveal.anim-visible {
  transition-delay: var(--anim-delay, 0s);
}

/* --- 2. PARALLAX HERO --- */
.anim-parallax-hero {
  will-change: transform;
}

/* --- 3. STONE CARD HOVER --- */
.anim-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: pointer;
  position: relative;
}
.anim-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.15);
}
.anim-card .stone-card-image,
.anim-card .showcase-card-image {
  position: relative;
  overflow: hidden;
}
.anim-card .stone-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(86, 77, 34, 0);
  transition: background 0.35s ease;
  pointer-events: none;
  z-index: 1;
}
.anim-card:hover .stone-card-image::after {
  background: rgba(86, 77, 34, 0.08);
}
.anim-card .stone-card-image img,
.anim-card .showcase-card img,
.anim-card .col-card img {
  transition: transform 0.35s ease;
}
.anim-card:hover .stone-card-image img,
.anim-card:hover .showcase-card img,
.anim-card:hover .col-card img {
  transform: scale(1.12);
}
.anim-card .stone-card-name,
.anim-card .sc-title {
  transition: transform 0.35s ease, color 0.35s ease;
  display: inline-block;
}
.anim-card:hover .stone-card-name,
.anim-card:hover .sc-title {
  transform: translateY(-3px);
  color: #564d22;
}
.collection-section .anim-card:hover .stone-card-name {
  color: #ffffff;
}

/* --- 4. SECTION TRANSITIONS --- */
.anim-section {
  transform: scale(0.98);
  transition: none;
}
.anim-section.anim-visible {
  transform: scale(1);
  transition: transform 0.9s ease-out;
}

/* --- 5. IMAGE REVEAL (clip-path wipe) --- */
.anim-img-reveal {
  clip-path: inset(0 100% 0 0);
  transition: none;
}
.anim-img-reveal.anim-visible {
  clip-path: inset(0 0% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}

/* --- 6. NAV SCROLL BEHAVIOUR --- */
.nav {
  transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 1px solid transparent;
}
.nav.nav-scrolled {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background-color: rgba(86, 77, 34, 0.95);
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom-color: rgba(86, 77, 34, 0.3);
}
.nav .nav-logo img,
.nav .nav-alpha-logo,
.nav .nav-left img {
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav.nav-scrolled .nav-logo img,
.nav.nav-scrolled .nav-alpha-logo,
.nav.nav-scrolled .nav-left img,
.nav.nav-scrolled .nav-logos img.nav-alpha-logo {
  height: 56px;
}

/* --- 7. IMAGE PARALLAX (stone detail swatch) --- */
.anim-parallax-swatch {
  will-change: transform;
  overflow: hidden;
}
.anim-parallax-swatch img {
  will-change: transform;
}

/* --- 8. HORIZONTAL COLLECTION SCROLL (mobile) --- */
@media (max-width: 768px) {
  .anim-hscroll {
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px !important;
    padding-bottom: 8px;
    grid-template-columns: none !important;
  }
  .anim-hscroll > * {
    flex: 0 0 70%;
    scroll-snap-align: start;
    min-width: 200px;
  }
  .anim-hscroll-wrap {
    position: relative;
  }
  .anim-hscroll-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 8px;
    width: 40px;
    background: linear-gradient(to right, transparent, rgba(42,36,6,0.3));
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .anim-hscroll-wrap.scrolled-end::after {
    opacity: 0;
  }
}

/* --- DISABLE FLY-IN ON COLLECTION STONE IMAGES --- */
.collection-group .anim-reveal,
.collection-group .anim-reveal-heading,
.collection-group .anim-img-reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  transition: none !important;
}

/* --- NO-JS FALLBACK --- */
@media (scripting: none) {
  .anim-reveal,
  .anim-reveal-heading,
  .anim-reveal-label,
  .anim-section,
  .anim-img-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

/* --- REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
  .anim-reveal,
  .anim-reveal-heading,
  .anim-reveal-label,
  .anim-section,
  .anim-img-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .anim-parallax-hero,
  .anim-parallax-swatch img {
    transform: none !important;
  }
  .nav {
    transition: none !important;
  }
  .anim-card {
    transition: none !important;
  }
  .anim-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .anim-card .stone-card-image::after {
    display: none !important;
  }
}