/* live-surface.css — LEE-1 Live Surface Layer: Motion & Animated UI.
   Owns: breathing card entrance, hover glow, parallax, ripple effect,
         background gradient motion, page transitions, staggered activation.
   Does NOT own: video autoplay (video-containers.css), layout grids, theme tokens. */

/* ══════════════════════════════════════════════════════════════
   1. CONTINUOUS BACKGROUND MOTION
   Subtle animated gradient on feed/explore pages via ::before.
   ══════════════════════════════════════════════════════════════ */
.ls-bg-motion::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    #000000 0%,
    #0A0A1A 25%,
    #000000 50%,
    #0A0A1A 75%,
    #000000 100%
  );
  background-size: 400% 400%;
  animation: ls-gradient-shift 20s ease infinite;
  opacity: 0.6;
}

@keyframes ls-gradient-shift {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 100% 50%; }
  50%  { background-position: 50% 100%; }
  75%  { background-position: 0% 50%; }
  100% { background-position: 0% 0%; }
}

/* ══════════════════════════════════════════════════════════════
   2. CARD BREATHING / ENTRANCE ANIMATION
   Cards start invisible+slightly-scaled-down, animate in when
   IntersectionObserver adds .ls-visible.
   ══════════════════════════════════════════════════════════════ */
.ls-card {
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  will-change: transform, opacity;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.ls-card.ls-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* First-load breathing pulse — fires once on first appearance */
.ls-card.ls-breathe {
  animation: ls-breathe 1.2s ease 1;
}

@keyframes ls-breathe {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════
   3. CARD HOVER GLOW + SCALE
   Coral glow at 15-20% opacity, 8px blur. Scale to 1.03.
   ══════════════════════════════════════════════════════════════ */
.ls-card {
  transition: opacity 0.35s ease,
              transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.3s ease;
}

.ls-card:hover {
  transform: scale(1.03);
  box-shadow: 0 0 8px rgba(255, 77, 109, 0.18),
              0 4px 16px rgba(255, 77, 109, 0.1);
}

/* ══════════════════════════════════════════════════════════════
   4. RIPPLE EFFECT ON ACTION BUTTONS
   Expanding circle overlay on click, 300ms.
   ══════════════════════════════════════════════════════════════ */
.ls-ripple {
  position: relative;
  overflow: hidden;
}

.ls-ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0);
  animation: ls-ripple-expand 0.3s ease-out forwards;
  pointer-events: none;
  z-index: 10;
}

@keyframes ls-ripple-expand {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════
   5. PARALLAX HERO SECTIONS
   Applied by JS — translateY shifts at 0.15× scroll rate.
   ══════════════════════════════════════════════════════════════ */
.ls-parallax {
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════════
   6. PAGE TRANSITIONS
   Fade-out → fade-in on route change (150ms each).
   ══════════════════════════════════════════════════════════════ */
.ls-page-wrap {
  opacity: 1;
  transition: opacity 0.15s ease;
}

.ls-page-wrap.ls-fade-out {
  opacity: 0;
}

/* ══════════════════════════════════════════════════════════════
   7. MODAL SLIDE-UP
   Modal open: slide from bottom, 300ms cubic-bezier.
   ══════════════════════════════════════════════════════════════ */
.ls-modal-enter {
  transform: translateY(100%);
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1),
              opacity 0.3s ease;
}

.ls-modal-enter.ls-modal-active {
  transform: translateY(0);
  opacity: 1;
}

/* Modal backdrop fade */
.ls-modal-backdrop {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.ls-modal-backdrop.ls-modal-active {
  opacity: 1;
  pointer-events: auto;
}

/* ══════════════════════════════════════════════════════════════
   8. STAGGER DELAY CSS CUSTOM PROPERTIES
   JS sets --ls-stagger-index on each card. CSS applies delay.
   ══════════════════════════════════════════════════════════════ */
.ls-card {
  transition-delay: calc(var(--ls-stagger-index, 0) * 50ms);
}

/* ══════════════════════════════════════════════════════════════
   9. REDUCED MOTION — KILL ALL ANIMATIONS
   Respects prefers-reduced-motion: reduce.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ls-bg-motion::before {
    animation: none !important;
  }
  .ls-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .ls-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .ls-ripple-circle {
    animation: none !important;
    display: none !important;
  }
  .ls-parallax {
    will-change: auto !important;
  }
  .ls-page-wrap {
    transition: none !important;
  }
  .ls-modal-enter {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .ls-modal-backdrop {
    transition: none !important;
  }
  .ls-card.ls-breathe {
    animation: none !important;
  }
}