/* ============================================================
   LIPIKA — animations.css (COMPLETE REVISION)
   ============================================================ */

/* ---------- Scroll reveal (driven by main.js) ---------- */
[data-reveal]{
  opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
[data-reveal="left"]{transform:translateX(-36px)}
[data-reveal="right"]{transform:translateX(36px)}
[data-reveal="scale"]{transform:scale(.92)}
[data-reveal].revealed{opacity:1;transform:none}

/* ---------- Ambient ---------- */
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 var(--shadow-accent),0 0 0 0 rgba(178,58,34,.35)}
  70%{box-shadow:var(--shadow-accent),0 0 0 16px rgba(178,58,34,0)}
  100%{box-shadow:var(--shadow-accent),0 0 0 0 rgba(178,58,34,0)}
}
.btn-pulse{animation:pulse-ring 2.4s var(--ease) infinite}
.pulse-dot{animation:blink-dot 1.8s ease-in-out infinite}
@keyframes blink-dot{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes pop-in{
  from{opacity:0;transform:scale(.94) translateY(10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.search-modal:not([hidden]) .search-panel{animation:pop-in .28s var(--ease) both}
.search-modal:not([hidden]) .search-backdrop{animation:fade-in .2s ease both}
.lightbox:not([hidden]) .lightbox-img{animation:pop-in .3s var(--ease) both}
.toast{animation:pop-in .3s var(--ease) both}

/* ---------- Timeline marker pulse when it activates ---------- */
@keyframes marker-pulse{
  0%{box-shadow:0 0 0 6px var(--bg),0 0 0 6px color-mix(in srgb,var(--accent) 45%,transparent)}
  100%{box-shadow:0 0 0 6px var(--bg),var(--shadow-accent)}
}
.tl-item.is-active .tl-marker{animation:marker-pulse .9s var(--ease) both}
/* Content slides in with a slight extra glide on activation */
@keyframes tl-content-in{
  from{opacity:0;transform:translateX(-14px)}
  to{opacity:1;transform:translateX(0)}
}
.tl-item.is-active .tl-content{animation:tl-content-in .6s var(--ease) both}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .konark::before,.konark .konark-spokes,.stat-card .stat-icon::after,
  .docs-main h2::before,.glyph,.hero-art .app-window,
  .float-chip,.btn-pulse{animation:none !important}
  .tl-item .tl-content{opacity:1 !important;transform:none !important}
  main{animation:none !important}
}