/* ============================================
   Animations layer
   ============================================ */

/* Page-load fade-in — softens the flash between page navigations */
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
body {
  animation: page-fade-in .45s cubic-bezier(.22,1,.36,1) both;
}

/* Scroll-reveal: hidden by default, shown when .is-visible */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--left { transform: translateX(-32px); }
.reveal--left.is-visible { transform: translateX(0); }
.reveal--right { transform: translateX(32px); }
.reveal--right.is-visible { transform: translateX(0); }
.reveal--scale { transform: scale(0.94); }
.reveal--scale.is-visible { transform: scale(1); }

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 450ms; }

/* Counter pulse when value lands */
@keyframes count-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.05); color: var(--warm-300); }
  100% { transform: scale(1); }
}
.stat__num.is-done em,
.stat__num.is-done {
  animation: count-pop .6s ease-out;
}

/* Floating "live" badge dot */
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 161, 121, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(22, 161, 121, 0); }
}
.hero__photo-badge::before {
  animation: pulse-dot 2.4s ease-out infinite;
}


/* Floaters: gentle bob */
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.hero__floater--top { animation: bob 5s ease-in-out infinite; }
.hero__floater--bottom { animation: bob 5s ease-in-out infinite -2.5s; }

/* Background mark on typographic hero — slow rotate */
@keyframes slow-rotate {
  from { transform: rotate(-4deg); }
  to   { transform: rotate(4deg); }
}
.hero__bg-mark {
  animation: slow-rotate 14s ease-in-out infinite alternate;
  transform-origin: center;
}

/* Path-card icon: lift and tilt on hover */
.path-card .path-card__icon,
.opo-card .opo-card__num,
.level-card .level-card__age,
.value-card .value-card__icon {
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.path-card:hover .path-card__icon { transform: translateY(-3px) rotate(-4deg) scale(1.06); }
.opo-card:hover .opo-card__num { transform: translateY(-2px) scale(1.08); }
.level-card:hover .level-card__age { transform: translateY(-4px) rotate(-2deg); }
.value-card:hover .value-card__icon { transform: rotate(-6deg) scale(1.08); }

/* Buttons: subtle shimmer on hover */
.btn--primary, .btn--warm {
  position: relative;
  overflow: hidden;
}
.btn--primary::after, .btn--warm::after {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  transition: left .6s cubic-bezier(.22,1,.36,1);
}
.btn--primary:hover::after, .btn--warm:hover::after { left: 130%; }

/* Calendar day: pop on hover */
.cal__day:not(.is-out) {
  transition: transform .25s var(--ease), background .2s var(--ease);
}
.cal__day:not(.is-out):not(.is-selected):hover {
  transform: translateY(-2px);
}
.cal__day.has-event .dots span {
  transition: transform .3s var(--ease);
}
.cal__day.has-event:hover .dots span {
  transform: scale(1.4);
}

/* Filter pill bounce on activate */
@keyframes pill-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.filter-btn.is-active {
  animation: pill-pop .35s ease-out;
}

/* Form field success tick */
@keyframes tick-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
.form.is-submitted .form__success {
  animation: tick-in .5s ease-out;
}

/* Gentle underline grow on nav links */
.nav__menu a {
  position: relative;
}
.nav__menu a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 0;
  height: 2px;
  background: var(--blue-500);
  border-radius: 2px;
  transition: width .3s var(--ease), left .3s var(--ease);
}
.nav__menu a:hover::after, .nav__menu a.is-active::after {
  width: 22px;
  left: calc(50% - 11px);
}

/* CTA banner shine */
@keyframes banner-glow {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.35; }
}
.cta-banner {
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 60%;
  height: 180%;
  background: radial-gradient(ellipse, rgba(244, 200, 121, 0.4) 0%, transparent 60%);
  pointer-events: none;
  animation: banner-glow 6s ease-in-out infinite;
}

/* Page-hero parallax mark */
.page-hero {
  position: relative;
  overflow: hidden;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}