/* ==========================================================================
   animations.css — reveal-on-scroll, keyframes, micro-motion
   ========================================================================== */

/* scroll reveal — content is visible by default; the hidden state is only
   armed once JS adds .anim to <html>, so a JS failure never hides content. */
.reveal { transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.anim .reveal { opacity: 0; transform: translateY(22px); }
.anim .reveal.is-visible { opacity: 1; transform: none; }

/* stagger children inside a revealed group */
.reveal.is-visible .stat-tile,
.reveal.is-visible .profile-points li { transition-delay: 0.05s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* screen entrance when navigated to */
.screen.is-entering > * { animation: screen-in 0.55s var(--ease-out) both; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes blink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* gentle idle float on the hero float-cards (disabled for reduced motion) */
@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
  .float-card-fire  { animation: float-y 6s ease-in-out infinite 0.6s; }
  .float-card-store { animation: float-y 8s ease-in-out infinite 1.2s; }
}

/* tab bar active pop */
.tab.is-active svg { animation: tab-pop 0.4s var(--ease); }
@keyframes tab-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* ---------- minimal cards — soft shadow, gentle lift ---------- */
.stack-card,
.work-card,
.service,
.edu-card,
.stat-tile {
  box-shadow: var(--card-rest), inset 0 0 0 1px var(--border);
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
}
.stack-card:hover,
.work-card:hover,
.service:hover,
.edu-card:hover,
.stat-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-hover), inset 0 0 0 1px var(--border-2);
}
.tl-item {
  box-shadow: var(--card-rest), inset 0 0 0 1px var(--border);
  transition: box-shadow 0.28s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .stack-card:hover, .work-card:hover, .service:hover,
  .edu-card:hover, .stat-tile:hover { transform: none; }
}