/* =========================================================
   animations.css — all motion lives here
   Rules: animate only transform/opacity, keep it subtle,
   and switch everything off for people who prefer reduced motion.
   ========================================================= */

/* ---------- Keyframes ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(10px) rotate(6deg); }
}
@keyframes scrollDot {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(34, 211, 238, 0.45); }
  50%      { box-shadow: 0 0 26px rgba(34, 211, 238, 0.8); }
}
@keyframes drawLine {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes pop {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Page load / page leave ---------- */
body { animation: fadeIn 0.5s var(--ease) both; }
body.is-leaving { opacity: 0; transition: opacity 0.18s ease; }

/* ---------- Hero entrance (staggered with --i) ---------- */
.hero-anim {
  animation: fadeUp 0.9s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 120ms + 150ms);
}

/* ---------- Hero photo animations ---------- */
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes glowPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
@keyframes photoReveal {
  from { opacity: 0; clip-path: inset(100% 0 0 0); transform: scale(1.12); }
  to   { opacity: 1; clip-path: inset(0 0 0 0);    transform: scale(1); }
}
@keyframes shine {
  0%, 62% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.6); }
  50%      { opacity: 1;    transform: scale(1.4); }
}
@keyframes badgeIn {
  from { opacity: 0; transform: translateY(14px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.hero-glow     { animation: glowPulse 5s ease-in-out infinite; }
.hero-float    { animation: bob 7s ease-in-out infinite; }
.hero-frame::before { animation: spin 7s linear infinite; }   /* rotating glowing border */
.orbit--1      { animation: spin 26s linear infinite; }
.orbit--2      { animation: spin 40s linear infinite reverse; }
.avatar        { animation: photoReveal 1.3s var(--ease) 0.5s both; }
.avatar-shine  { animation: shine 6s ease-in-out 2.2s infinite; }
.spark         { animation: twinkle 3.2s ease-in-out infinite; }
.spark:nth-of-type(2) { animation-delay: 0.7s; }
.spark:nth-of-type(3) { animation-delay: 1.4s; }
.spark:nth-of-type(4) { animation-delay: 2.1s; }
.spark:nth-of-type(5) { animation-delay: 2.6s; }
.spark:nth-of-type(6) { animation-delay: 3.1s; }

/* Badges pop in one by one, then float gently (the 2nd animation starts after the 1st) */
.float-badge { animation: badgeIn 0.7s var(--ease) both, bob 6s ease-in-out infinite; }
.float-badge--1 { animation-delay: 1.2s, 1.9s; }
.float-badge--2 { animation-delay: 1.4s, 2.6s; }
.float-badge--3 { animation-delay: 1.6s, 1.2s; }
.float-badge--4 { animation-delay: 1.8s, 3.1s; }
.float-badge--5 { animation-delay: 2.0s, 2.3s; }
.float-badge--6 { animation-delay: 2.2s, 1.7s; }

/* ---------- Floating decorative elements ---------- */
.deco--ring   { animation: float 7s ease-in-out infinite; }
.deco--square { animation: floatSlow 9s ease-in-out infinite; }
.deco--dot    { animation: float 5s ease-in-out infinite 0.6s; }
.scroll-mouse::after { animation: scrollDot 1.8s ease-in-out infinite; }

/* ---------- Scroll reveal (class added by animations.js) ---------- */
/* Only hide things when JavaScript is running (the .js class is set in <head>) */
.js .reveal,
.js [data-stagger] > * {
  opacity: 0;
}
.js .reveal {
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms); /* staggered card reveals */
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* After the reveal finishes, hand control back to normal hover transitions */
.js .reveal.is-done {
  transition: translate var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  transition-delay: 0s;
}

/* Reveal from the side (used by timeline items) */
.js .reveal--left { transform: translateX(-28px); }

/* ---------- Timeline ---------- */
.js .timeline::before { transform: scaleY(0); }
.js .timeline.is-visible::before { animation: drawLine 1.4s var(--ease) 0.1s both; }
.js .timeline.is-visible .timeline-marker { animation: pulseGlow 3.2s ease-in-out 1s 2; }

/* ---------- Filtered project cards ---------- */
.project-card.pop { animation: pop 0.45s var(--ease); }

/* ---------- Philosophy words ---------- */
.js .philosophy-words span { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i, 0) * 160ms); }
.js .philosophy.is-visible .philosophy-words span { opacity: 1; transform: none; }

/* ---------- Floating WhatsApp button ---------- */
@keyframes waIn   { from { opacity: 0; transform: scale(0.4) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes waRing { 0% { transform: scale(1); opacity: 0.45; } 70%, 100% { transform: scale(1.75); opacity: 0; } }
.whatsapp-float { animation: waIn 0.6s var(--ease) 1.2s both; }
.whatsapp-float::before { animation: waRing 2.6s ease-out 2s infinite; }

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js .reveal,
  .js [data-stagger] > *,
  .js .philosophy-words span { opacity: 1; transform: none; }
  .js .timeline::before { transform: none; }
  .hero-tilt { transform: none !important; }
  .avatar { clip-path: none; }
  .avatar-shine { display: none; }
  .whatsapp-float::before { display: none; }
}