/* ==========================================================================
   MOBILE SCROLL & MOTION ENHANCEMENT SYSTEM
   Created for LYREX - Premium, Cinematic, Performance-First
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. OVERFLOW & RESPONSIVE SAFEGUARDS
   -------------------------------------------------------------------------- */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* Ensure text wrapping on long headings and paragraphs */
h1, h2, h3, h4, h5, h6, p, a, span, button {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Prevent image & dynamic media blowout */
img, video, picture, svg, canvas {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   2. GHOST / DARK BLUR TOP OVERLAY
   -------------------------------------------------------------------------- */
#scroll-ghost-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(70px, 12vh, 120px);
  pointer-events: none !index;
  pointer-events: none;
  z-index: 9999;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.88) 0%,
    rgba(10, 10, 10, 0.55) 45%,
    rgba(10, 10, 10, 0.15) 80%,
    transparent 100%
  );
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: opacity;
}

#scroll-ghost-top.is-scrolled {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   3. BOTTOM GLOW / REVELATION LIGHT OVERLAY
   -------------------------------------------------------------------------- */
#scroll-glow-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(60px, 10vh, 100px);
  pointer-events: none;
  z-index: 9998;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.012) 50%,
    transparent 100%
  );
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.85;
  transition: opacity 0.5s ease;
}

/* --------------------------------------------------------------------------
   4. SCROLL REVEAL ANIMATIONS (MOBILE & RESPONSIVE)
   -------------------------------------------------------------------------- */

/* Default Upward Fade Blur */
.scroll-reveal,
[data-motion="up"] {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(6px);
  transition: 
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}

/* Left Reveal */
.scroll-reveal-left,
[data-motion="left"] {
  opacity: 0;
  transform: translateX(-35px);
  filter: blur(6px);
  transition: 
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}

/* Right Reveal */
.scroll-reveal-right,
[data-motion="right"] {
  opacity: 0;
  transform: translateX(35px);
  filter: blur(6px);
  transition: 
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}

/* Image Reveal with Subtle Scale */
.scroll-reveal-img,
[data-motion="img"] {
  opacity: 0;
  transform: scale(1.04) translateY(18px);
  filter: blur(8px);
  transition: 
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}

/* Subtle Zoom Reveal for Cards/Badges */
.scroll-reveal-zoom,
[data-motion="zoom"] {
  opacity: 0;
  transform: scale(0.94);
  filter: blur(5px);
  transition: 
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}

/* ACTIVE VISIBLE STATE */
.scroll-reveal.scroll-active,
.scroll-reveal-left.scroll-active,
.scroll-reveal-right.scroll-active,
.scroll-reveal-img.scroll-active,
.scroll-reveal-zoom.scroll-active,
[data-motion].scroll-active {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
  filter: blur(0) !important;
}

/* EXIT TOP STATE (Smooth Darkening & Dimming when leaving top viewport) */
.scroll-reveal.scroll-exit-top,
.scroll-reveal-left.scroll-exit-top,
.scroll-reveal-right.scroll-exit-top,
.scroll-reveal-img.scroll-exit-top,
.scroll-reveal-zoom.scroll-exit-top,
[data-motion].scroll-exit-top {
  opacity: 0.35 !important;
  filter: blur(3px) !important;
  transform: translateY(-12px) scale(0.98) !important;
  transition: transform 0.6s ease, opacity 0.6s ease, filter 0.6s ease;
}

/* --------------------------------------------------------------------------
   5. STAGGER DELAYS FOR GRID ITEMS & LISTS
   -------------------------------------------------------------------------- */
.scroll-stagger-1 { transition-delay: 0.08s; }
.scroll-stagger-2 { transition-delay: 0.16s; }
.scroll-stagger-3 { transition-delay: 0.24s; }
.scroll-stagger-4 { transition-delay: 0.32s; }
.scroll-stagger-5 { transition-delay: 0.40s; }

/* --------------------------------------------------------------------------
   6. MOBILE RESPONSIVE OPTIMIZATIONS & OVERFLOW FIXES
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* Dynamic viewport height helper for iOS Safari */
  .full-vh-fix {
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Prevent container padding clipping */
  body {
    position: relative;
    width: 100%;
  }

  /* Smoother mobile reveal distances */
  .scroll-reveal-left,
  [data-motion="left"] {
    transform: translateX(-22px);
  }
  
  .scroll-reveal-right,
  [data-motion="right"] {
    transform: translateX(22px);
  }

  .scroll-reveal,
  [data-motion="up"] {
    transform: translateY(24px);
  }
}

/* --------------------------------------------------------------------------
   7. ACCESSIBILITY (PREFERS REDUCED MOTION)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #scroll-ghost-top,
  #scroll-glow-bottom {
    display: none !important;
  }

  .scroll-reveal,
  .scroll-reveal-left,
  .scroll-reveal-right,
  .scroll-reveal-img,
  .scroll-reveal-zoom,
  [data-motion] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   8. HERO SUBTITLE FINE-TUNING
   -------------------------------------------------------------------------- */
.framer-fjkh5c h2 {
  font-size: clamp(13px, 1.8vw, 16px) !important;
  --framer-font-size: 16px !important;
  letter-spacing: 0.06em !important;
  opacity: 0.9;
}

.stoneart-info-badge.mobile-badge-clone {
  margin-top: 32px !important;
}

/* Remove dark radial background blob in hero center */
.framer-ocbpjh,
.framer-pqcZx .framer-ocbpjh {
  background: transparent !important;
  background-image: none !important;
}