/* ====================================================
   EVANN TERRIER — PORTFOLIO  |  animations.css
   Keyframes · Reveal · Section transitions
   ==================================================== */

/* ===== CORE KEYFRAMES ===== */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.65); }
}

@keyframes scroll-anim {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

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

@keyframes slideUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes loader-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ===== SECTION REVEAL ===== */
.section {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== STAGGER CHILDREN ===== */
/* Sections with stagger on cards */
.section.visible .project-card {
  animation: fadeUp 0.6s both;
}
.section.visible .project-card:nth-child(1) { animation-delay: 0.1s; }
.section.visible .project-card:nth-child(2) { animation-delay: 0.22s; }
.section.visible .project-card:nth-child(3) { animation-delay: 0.34s; }

.section.visible .timeline-item {
  animation: fadeUp 0.6s both;
}
.section.visible .timeline-item:nth-child(1) { animation-delay: 0.1s; }
.section.visible .timeline-item:nth-child(2) { animation-delay: 0.22s; }
.section.visible .timeline-item:nth-child(3) { animation-delay: 0.34s; }
.section.visible .timeline-item:nth-child(4) { animation-delay: 0.46s; }

.section.visible .skill-category {
  animation: fadeUp 0.5s both;
}
.section.visible .skill-category:nth-child(1) { animation-delay: 0.08s; }
.section.visible .skill-category:nth-child(2) { animation-delay: 0.16s; }
.section.visible .skill-category:nth-child(3) { animation-delay: 0.24s; }
.section.visible .skill-category:nth-child(4) { animation-delay: 0.32s; }
.section.visible .skill-category:nth-child(5) { animation-delay: 0.40s; }
.section.visible .skill-category:nth-child(6) { animation-delay: 0.48s; }

.section.visible .stat {
  animation: fadeUp 0.6s both;
}
.section.visible .stat:nth-child(1) { animation-delay: 0.1s; }
.section.visible .stat:nth-child(2) { animation-delay: 0.22s; }
.section.visible .stat:nth-child(3) { animation-delay: 0.34s; }

/* ===== LOADER ENTRANCE ===== */
.loader-logo {
  animation: loader-pulse 1.4s ease-in-out infinite;
}

/* ===== HOVER GLOW on project cards ===== */
.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--gold-glow), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.project-card:hover::after { opacity: 1; }

/* ===== LINK UNDERLINE ANIMATION ===== */
.animated-link {
  position: relative;
  display: inline-block;
}

.animated-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.35s ease;
}

.animated-link:hover::after { width: 100%; }

/* ===== MAGNETIC BUTTON GLOW ===== */
.btn-primary,
.btn-secondary {
  will-change: transform;
}

/* ===== SCROLL FADE REGIONS ===== */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

/* ===== SECTION BORDER GLOW on visible ===== */
.section.visible {
  border-top-color: var(--border);
}

/* ===== CONTACT CTA pulse ===== */
.btn-large {
  position: relative;
}

.btn-large::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  animation: fadeIn 0.4s 0.2s both, pulse-cta 3s 0.6s ease-in-out infinite;
}

@keyframes pulse-cta {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 0; transform: scale(1.03); }
}

/* ===== FOOTER SEPARATOR spin ===== */
.footer-sep {
  display: inline-block;
  transition: transform 0.4s ease;
}

.footer:hover .footer-sep {
  transform: rotate(90deg);
}