/* ============================================================
   PROPHACITE — SHARED ANIMATIONS
   Scroll-reveal system, keyframes, transition utilities.
   Note: .animate-on-scroll, .visible, and .delay-* are also
   defined in base.css as the canonical source. The rules here
   are duplicated so pages that do not load base.css remain
   functional. When base.css is present, these are inert.
   ============================================================ */


/* ============================================================
   1. SCROLL-REVEAL SYSTEM
   JS adds .visible when element enters viewport.
   Initial hidden state is set via JS to avoid no-JS flash.
   ============================================================ */

.animate-on-scroll {
  opacity: 1;
  transform: none;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: none;
}


/* ── Stagger delay utilities ── */

.delay-1 {
  transition-delay: 0.1s;
}

.delay-2 {
  transition-delay: 0.2s;
}

.delay-3 {
  transition-delay: 0.3s;
}

.delay-4 {
  transition-delay: 0.4s;
}


/* ============================================================
   2. REVEAL SYSTEM (das-methodology.html)
   JS adds .active when element enters viewport.
   ============================================================ */

.reveal {
  opacity: 1;
  transform: none;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   3. KEYFRAMES
   ============================================================ */

/* Pulse: slow opacity breathe. Used on .das-pulse in das-system.html */
@keyframes pulse {
  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}


/* D.A.S. card pop-up on scroll arrival (desktop).
   Used by .product-showcase .brief-wrapper:nth-child(1) .brief.card-visible */
@keyframes dasPopUp {
  0% {
    transform: scale(0.90) translateY(30px);
    opacity: 0;
  }

  50% {
    transform: scale(1.05) translateY(-12px);
    opacity: 1;
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}


/* Lightbox entrance. Used by .lightbox on open. */
@keyframes lightboxIn {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}


/* ============================================================
   4. PRODUCT SHOWCASE SCROLL-REVEAL (index.html)
   Cards start hidden; JS adds .card-visible when in viewport.
   ============================================================ */

.product-showcase .brief {
  opacity: 0;
  transform: scale(0.90) translateY(30px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
  transform-origin: center center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  isolation: isolate;
  contain: layout style;
}

/* Stagger by card position */
.product-showcase .brief-wrapper:nth-child(1) .brief {
  transition-delay: 0.05s;
}

.product-showcase .brief-wrapper:nth-child(2) .brief {
  transition-delay: 0.18s;
}

.product-showcase .brief-wrapper:nth-child(3) .brief {
  transition-delay: 0.32s;
}

/* First card uses dasPopUp keyframe instead of plain transition */


/* ── Mobile override: reduced motion for dasPopUp ── */
@media (max-width: 480px) {
  @keyframes dasPopUp {
    0% {
      transform: scale(0.90) translateY(30px);
      opacity: 0;
    }

    50% {
      transform: scale(1.02) translateY(-4px);
      opacity: 1;
    }

    100% {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }

  .product-showcase .brief:hover {
    transform: none !important;
  }
}


/* ── Reduced-motion: respect user preference ── */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .reveal,
  .product-showcase .brief {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}