/**
 * Way2Better - Smooth Scroll Reveal Utility Styles
 * Corporate-grade, high-performance scroll-down section reveal animations.
 */

/* Hardware accelerated transition base */
.scroll-reveal,
.scroll-reveal-fade,
.scroll-reveal-scale,
.scroll-reveal-left,
.scroll-reveal-right,
.animate-fade-in-scroll,
.animate-slide-up-scroll,
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-fade,
[data-reveal="fade"] {
  transform: translateY(0);
}

.scroll-reveal-scale,
[data-reveal="scale"] {
  transform: scale(0.96) translateY(12px);
}

.scroll-reveal-left,
[data-reveal="left"] {
  transform: translateX(-28px) translateY(0);
}

.scroll-reveal-right,
[data-reveal="right"] {
  transform: translateX(28px) translateY(0);
}

/* Revealed state triggered by JS IntersectionObserver */
.scroll-reveal.is-revealed,
.scroll-reveal-fade.is-revealed,
.scroll-reveal-scale.is-revealed,
.scroll-reveal-left.is-revealed,
.scroll-reveal-right.is-revealed,
.animate-fade-in-scroll.is-revealed,
.animate-slide-up-scroll.is-revealed,
.reveal-on-scroll.revealed,
.reveal-on-scroll.is-revealed,
[data-reveal].is-revealed,
[data-reveal].revealed {
  opacity: 1 !important;
  transform: translateY(0) translateX(0) scale(1) !important;
  will-change: auto;
}

/* Staggered Children */
.scroll-reveal-stagger > *,
.stagger-children > *,
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--stagger-index, 0) * 80ms);
}

.scroll-reveal-stagger.is-revealed > *,
.stagger-children.is-revealed > *,
[data-reveal-stagger].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* Image reveal polish */
.reveal-image,
[data-reveal-image] {
  opacity: 0;
  transform: scale(0.97) translateY(16px);
  will-change: opacity, transform;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-image.is-revealed,
[data-reveal-image].is-revealed {
  opacity: 1;
  transform: scale(1) translateY(0);
  will-change: auto;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal-fade,
  .scroll-reveal-scale,
  .scroll-reveal-left,
  .scroll-reveal-right,
  .animate-fade-in-scroll,
  .animate-slide-up-scroll,
  .scroll-reveal-stagger > *,
  .stagger-children > *,
  .reveal-image,
  [data-reveal],
  [data-reveal-stagger] > *,
  [data-reveal-image] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* ─── Universal Mobile Layout & Text Overflow Safeguards ─── */
@media (max-width: 639px) {
  /* Prevent horizontal scrolling & clipping */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Wrap long text and headlines gracefully */
  h1, h2, h3, h4, h5, h6, p, span, a, button, li {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* Ensure containers and cards adapt fluidly without clipping height */
  .glass-card,
  [class*="rounded-3xl"],
  [class*="rounded-2xl"],
  [class*="rounded-xl"] {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Keep flex containers from overflowing */
  .flex {
    min-width: 0;
  }
}

/* ─── Universal Interactive Card Animations & Micro-Interactions ─── */
.glass-card,
[class*="rounded-3xl"],
[class*="rounded-2xl"] {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Smooth Lift on Hover */
.group:hover,
.glass-card:hover,
[class*="rounded-3xl"].border:hover,
[class*="rounded-2xl"].border:hover {
  transform: translateY(-5px);
}

/* Glowing card shadow depth on hover */
.dark .glass-card:hover,
.bg-slate-900:hover,
.bg-\[\#050805\]:hover,
.bg-white\/5:hover {
  box-shadow: 0 20px 45px -10px rgba(190, 242, 100, 0.12), 0 0 25px rgba(190, 242, 100, 0.06);
}

.bg-white:hover {
  box-shadow: 0 22px 50px -12px rgba(22, 56, 45, 0.12), 0 4px 16px rgba(0, 0, 0, 0.03);
}

/* Icon Micro-Zoom on Hover */
.group:hover .w-10,
.group:hover .w-12,
.group:hover .w-14,
.group:hover .w-16,
.group:hover .lucide,
.group:hover i.fas,
.group:hover i.fa-solid {
  transform: scale(1.08);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}