/* ═══════════════════════════════════════════════════════════════
   SCROLL ANIMATIONS — Universal Fade-In/Out System
   The Enchant Aesthetics & Wellness
   ═══════════════════════════════════════════════════════════════ */

/* ── Respect reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
  .sa-fade, .sa-up, .sa-down, .sa-left, .sa-right,
  .sa-scale, .sa-blur, .sa-flip,
  .fu, .gallery-fade, .reveal-img,
  [data-sa] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════
   CORE — Base hidden state for all SA elements
   ══════════════════════════════════════════ */

/* Fade only */
.sa-fade {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fade + slide up (default, also enhances .fu) */
.sa-up,
.fu {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fade + slide down */
.sa-down {
  opacity: 0;
  transform: translateY(-28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fade + slide from left */
.sa-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fade + slide from right */
.sa-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fade + scale up (cards, images) */
.sa-scale,
.gallery-fade,
.reveal-img {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fade + soft blur (hero text, headings) */
.sa-blur {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(14px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fade + flip (decorative elements) */
.sa-flip {
  opacity: 0;
  transform: perspective(600px) rotateX(12deg) translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ══════════════════════════════════════════
   VISIBLE STATE — all animations land here
   ══════════════════════════════════════════ */

.sa-fade.sa-vis,
.sa-up.sa-vis,
.sa-down.sa-vis,
.sa-left.sa-vis,
.sa-right.sa-vis,
.sa-scale.sa-vis,
.sa-blur.sa-vis,
.sa-flip.sa-vis,
.gallery-fade.sa-vis,
.reveal-img.sa-vis,
.fu.vis,
.fu.sa-vis {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ══════════════════════════════════════════
   DELAY UTILITIES
   ══════════════════════════════════════════ */

.sa-d1, [data-delay="1"], [data-sa-delay="1"] { transition-delay: 0.08s !important; }
.sa-d2, [data-delay="2"], [data-sa-delay="2"] { transition-delay: 0.16s !important; }
.sa-d3, [data-delay="3"], [data-sa-delay="3"] { transition-delay: 0.24s !important; }
.sa-d4, [data-sa-delay="4"]                   { transition-delay: 0.32s !important; }
.sa-d5, [data-sa-delay="5"]                   { transition-delay: 0.40s !important; }
.sa-d6, [data-sa-delay="6"]                   { transition-delay: 0.50s !important; }

/* Legacy delay classes used by gallery */
.gd1 { transition-delay: 0.00s !important; }
.gd2 { transition-delay: 0.07s !important; }
.gd3 { transition-delay: 0.14s !important; }
.gd4 { transition-delay: 0.21s !important; }
.gd5 { transition-delay: 0.10s !important; }
.gd6 { transition-delay: 0.28s !important; }
.gd7 { transition-delay: 0.35s !important; }

/* ══════════════════════════════════════════
   SECTION-LEVEL FADE — whole sections fade between viewport entries
   ══════════════════════════════════════════ */

.sa-section {
  transition: opacity 0.5s ease;
}
.sa-section.sa-out {
  opacity: 0.92;
}

/* ══════════════════════════════════════════
   STAGGER GROUPS — children animate in sequence
   ══════════════════════════════════════════ */

.sa-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.sa-stagger.sa-vis > *:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0.00s; }
.sa-stagger.sa-vis > *:nth-child(2)  { opacity: 1; transform: none; transition-delay: 0.08s; }
.sa-stagger.sa-vis > *:nth-child(3)  { opacity: 1; transform: none; transition-delay: 0.16s; }
.sa-stagger.sa-vis > *:nth-child(4)  { opacity: 1; transform: none; transition-delay: 0.24s; }
.sa-stagger.sa-vis > *:nth-child(5)  { opacity: 1; transform: none; transition-delay: 0.32s; }
.sa-stagger.sa-vis > *:nth-child(6)  { opacity: 1; transform: none; transition-delay: 0.40s; }
.sa-stagger.sa-vis > *:nth-child(7)  { opacity: 1; transform: none; transition-delay: 0.48s; }
.sa-stagger.sa-vis > *:nth-child(8)  { opacity: 1; transform: none; transition-delay: 0.56s; }
.sa-stagger.sa-vis > *:nth-child(n+9){ opacity: 1; transform: none; transition-delay: 0.60s; }

/* ══════════════════════════════════════════
   PERI RULE LINE — width expand animation
   ══════════════════════════════════════════ */

.peri-rule {
  width: 0;
  transition: width 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.peri-rule.animated {
  width: 56px;
}

.peri-rule.c {
  margin-left: auto;
  margin-right: auto;
}

/* ══════════════════════════════════════════
   CARD HOVER LIFT (subtle, site-wide)
   ══════════════════════════════════════════ */

.why-card,
.fv-card,
.test-card,
.promo-card,
.blog-card,
.dr-card,
.service-item {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.why-card:hover,
.fv-card:hover,
.test-card:hover,
.promo-card:hover,
.blog-card:hover,
.dr-card:hover,
.service-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(155, 163, 196, 0.22);
}