/* =============================================================
   LARKEN — animations.css
   Scroll-reveal, micro-animations, hover effects.
   All motion respects prefers-reduced-motion.
   ============================================================= */


/* ============================================================
   1. SCROLL REVEAL — base hidden state
   Elements get class .ls-reveal via PHP.
   JS adds .is-visible via IntersectionObserver.
   ============================================================ */
.ls-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.65s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.65s cubic-bezier(0.165, 0.84, 0.44, 1);
}

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

/* Stagger: JS reads data-delay and sets transition-delay */
.ls-reveal[data-delay] {
  /* delay is applied inline by JS: el.style.transitionDelay = el.dataset.delay + 'ms' */
}

/* Card-specific: fade-in + slide-up on grid */
.ls-portfolio-grid > div {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity  0.55s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.ls-portfolio-grid > div.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Section-level trigger: when .ls-reveal-section enters view,
   all child .ls-reveal elements get triggered by JS */


/* ============================================================
   2. HEADER SCROLL STATE
   JS adds .is-scrolled to .ls-header after 80px scroll
   ============================================================ */
.ls-header {
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}


/* ============================================================
   3. PAGE TRANSITION FADE
   Soft fade-in on page load
   ============================================================ */
.ls-main {
  animation: ls-page-fade-in 0.5s ease forwards;
}

@keyframes ls-page-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   4. IMAGE HOVER LIFT (standalone images, not in cards)
   ============================================================ */
.ls-img-hover {
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
              box-shadow 0.4s ease;
}
.ls-img-hover:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 0 120px var(--ls-glow),
    0 40px 80px rgba(0, 0, 0, 0.7);
}


/* ============================================================
   5. TOOL ITEM HOVER GLOW
   ============================================================ */
.ls-tool-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--ls-radius-sm);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.ls-tool-item {
  position: relative;
}
.ls-tool-item:hover::after {
  opacity: 1;
}


/* ============================================================
   6. REDUCED MOTION OVERRIDE
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ls-reveal,
  .ls-portfolio-grid > div {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ls-main {
    animation: none;
  }
  .ls-badge-dot {
    animation: none;
  }
  .ls-scroll-hint {
    animation: none;
  }
}