/* ═══════════════════════════════════════════════════════════════
   smooth-enhancements.css  |  DS16 — Scroll & Loading Polish
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1. PAGE TRANSITION FADE ─────────────────────────────────────
   Uses CSS animation (guaranteed to run even if JS fails).
   JS adds .page-exiting to fade OUT before navigation.
────────────────────────────────────────────────────────────────── */

@keyframes ds16-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  /* Always fades in — no JS class required */
  animation: ds16-page-in 0.4s ease 0.05s both;
  transition: opacity 0.3s ease;
}

/* JS sets this class before navigating away */
body.page-exiting {
  opacity: 0 !important;
  animation: none !important;
  transition: opacity 0.28s ease !important;
}


/* ─── 2. SCROLL REVEAL BASE ───────────────────────────────────────
   Only applied to elements BELOW the fold (checked in JS).
   Elements already in view are given .is-visible immediately.
────────────────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* Stagger delay helpers (applied by JS) */
.reveal-delay-1 { transition-delay: 0.07s; }
.reveal-delay-2 { transition-delay: 0.14s; }
.reveal-delay-3 { transition-delay: 0.21s; }
.reveal-delay-4 { transition-delay: 0.28s; }
.reveal-delay-5 { transition-delay: 0.35s; }


/* ─── 3. MASONRY ITEM REVEAL ──────────────────────────────────────
   Overrides masonry hover-transform only during the reveal phase.
────────────────────────────────────────────────────────────────── */

.masonry-item.reveal {
  transition:
    opacity   0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.masonry-item.reveal.is-visible {
  will-change: auto;
}

.category-pair.reveal {
  transition:
    opacity   0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ─── 4. IMAGE SHIMMER SKELETON ────────────────────────────────── */

.img-loading {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e4e4e4 50%,
    #f0f0f0 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: ds16-shimmer 1.4s ease-in-out infinite !important;
  color: transparent !important;
}

@keyframes ds16-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}


/* ─── 5. HERO SLIDE CROSSFADE ─────────────────────────────────── */

.hero-slide {
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
}


/* ─── BONUS: Anchor Scroll Offset (fixed header) ─────────────── */

html {
  scroll-padding-top: 80px;
}


/* ─── ACCESSIBILITY: Reduced Motion ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .reveal,
  .masonry-item.reveal,
  .category-pair.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .img-loading {
    animation: none !important;
  }
  .hero-slide {
    transition: none !important;
  }
}


/* ─── FOOTER: CRM CLIENT PORTAL BUTTON ────────────────────────── */

.footer-crm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    color          0.25s ease,
    border-color   0.25s ease,
    background     0.25s ease,
    box-shadow     0.25s ease;
}

.footer-crm-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
  text-decoration: none;
}

.footer-crm-btn svg {
  flex-shrink: 0;
  opacity: 0.8;
  transition: opacity 0.25s ease;
}

.footer-crm-btn:hover svg {
  opacity: 1;
}