/* ── Hero entrance (staggered fade-up) ─────────────────────────────────── */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  opacity: 0;
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

/* ── Scroll reveal ──────────────────────────────────────────────────────── */

.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Project card hover ─────────────────────────────────────────────────── */

.project-card {
  transition: border-color var(--t-base), transform var(--t-base);
}

.project-card:hover {
  border-color: rgba(155, 17, 30, 0.5);
  transform: translateY(-2px);
}

/* ── Video card hover ───────────────────────────────────────────────────── */

.video-card {
  transition: transform var(--t-base);
}

.video-card:hover {
  transform: scale(1.02);
}

.video-card__thumb::after {
  transition: opacity var(--t-base);
}

.video-card:hover .video-card__thumb::after {
  opacity: 1;
}

/* ── Button transitions ─────────────────────────────────────────────────── */

.btn-primary,
.btn-secondary,
.btn-cta {
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}

/* ── Footer icon hover ──────────────────────────────────────────────────── */

.footer__icon {
  transition: color var(--t-base), opacity var(--t-base);
}

/* ── Reduced motion overrides ───────────────────────────────────────────── */

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

  .fade-up {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .project-card,
  .video-card,
  .btn-primary,
  .btn-secondary,
  .footer__icon {
    transition: none;
  }

  /* Banner: sin entrada animada, sin sweep, sin pulso */
  .announce-bar,
  .announce-bar::after,
  .announce-bar__dot,
  .announce-bar__btn-arrow {
    animation: none !important;
    transition: none !important;
  }
}