/*
 * Animations — First Temple v2
 * 3 types only: Reveal, Fade, Underline Draw
 */

/* ============================================
   1. Reveal — clip-path text reveal
   ============================================ */
@keyframes reveal {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

/* ============================================
   2. Fade — simple opacity
   ============================================ */
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================
   3. Underline Draw — right to left
   ============================================ */
.underline-draw {
  position: relative;
  display: inline-block;
}

.underline-draw::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width var(--duration-base) var(--ease-out);
}

.underline-draw:hover::after {
  width: 100%;
  left: 0;
  right: auto;
}

/* ============================================
   Scroll Animation — Intersection Observer
   ============================================ */

/* Initial hidden state */
.animate-on-scroll {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}

/* Revealed state */
.animate-on-scroll.animated {
  opacity: 1;
}

/* Reveal variant: clip-path text reveal */
.animate-on-scroll[data-animate="reveal"] {
  clip-path: inset(0 100% 0 0);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    clip-path var(--duration-slow) var(--ease-out);
}

.animate-on-scroll[data-animate="reveal"].animated {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

/* Stagger delays */
.animate-on-scroll:nth-child(1) { transition-delay: 0s; }
.animate-on-scroll:nth-child(2) { transition-delay: 0.08s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.16s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.24s; }
.animate-on-scroll:nth-child(5) { transition-delay: 0.32s; }
.animate-on-scroll:nth-child(6) { transition-delay: 0.4s; }

/* Hero fade-in */
.animate-fade-in {
  opacity: 0;
  animation: fade var(--duration-slow) var(--ease-out) forwards;
}

.animate-fade-in:nth-child(1) { animation-delay: 0.2s; }
.animate-fade-in:nth-child(2) { animation-delay: 0.4s; }
.animate-fade-in:nth-child(3) { animation-delay: 0.6s; }
.animate-fade-in:nth-child(4) { animation-delay: 0.8s; }

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-on-scroll {
    opacity: 1;
    clip-path: none;
  }
}