/* =========================================
   MOTION — Animations & Transitions
   ========================================= */

/* --- Reveal Base --- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity var(--duration-reveal) var(--ease-out-expo),
    transform var(--duration-reveal) var(--ease-out-expo);
}

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

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--duration-reveal) var(--ease-out-expo),
    transform var(--duration-reveal) var(--ease-out-expo);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(n+7) { transition-delay: 0.47s; opacity: 1; transform: translateY(0); }

/* Slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition:
    opacity var(--duration-reveal) var(--ease-out-expo),
    transform var(--duration-reveal) var(--ease-out-expo);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up */
.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity var(--duration-reveal) var(--ease-out-expo),
    transform var(--duration-reveal) var(--ease-spring);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Clip path reveal */
.reveal-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}

.reveal-clip.visible {
  clip-path: inset(0 0% 0 0);
}

/* --- Hero entrance: name first, slogan after --- */
.hero__title {
  animation: slideUp 0.75s var(--ease-out-expo) 0.08s both;
}
.hero__slogan {
  animation: slideUp 0.7s var(--ease-out-expo) 0.24s both;
}
.hero__eyebrow {
  animation: slideUp 0.7s var(--ease-out-expo) 0.36s both;
}
.hero__subtitle {
  animation: slideUp 0.7s var(--ease-out-expo) 0.48s both;
}
.hero__cta {
  animation: slideUp 0.65s var(--ease-out-expo) 0.6s both;
}

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

/* --- Geo shapes drift — slow, no spin noise --- */
.geo-shape {
  animation: geoFloat 14s ease-in-out infinite;
}

.geo-line-h,
.geo-line-v {
  animation: none;
}

.geo-circle { animation-duration: 18s; }
.geo-square { animation-delay: -3s; animation-duration: 16s; animation-name: geoFloatAlt; }
.geo-diamond { animation-delay: -5s; animation-duration: 20s; animation-name: geoSpin; }
.geo-triangle { animation-delay: -2s; animation-duration: 17s; }

@keyframes geoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes geoFloatAlt {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes geoSpin {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
}

/* --- Cursor parallax --- */
.hero__shapes {
  transition: transform 0.8s var(--ease-out-quart);
}

/* --- Skill tags entrance --- */
.skill-tag {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity 0.4s var(--ease-out-expo),
    transform 0.4s var(--ease-out-expo),
    border-color var(--duration-fast),
    background var(--duration-fast);
}

.skill-tag.revealed {
  opacity: 1;
  transform: translateX(0);
}

.skill-tag.revealed:hover {
  transform: translateX(4px);
}

/* --- Project card geo rotation on hover --- */
.project-card__geo {
  transform-origin: center;
}

/* --- 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 > *,
  .reveal-left,
  .reveal-scale,
  .reveal-clip {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .hero__eyebrow,
  .hero__title,
  .hero__slogan,
  .hero__subtitle,
  .hero__cta,
  .geo-shape,
  .skill-tag {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (hover: none) {
  .skill-tag.revealed:hover {
    transform: none;
  }
}