/* Animations - PrintEclipse */

/* Letter assembly animation for hero logo */
@keyframes letterDrop {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
}

.logo-letter.is-animated {
  animation: letterDrop 0.8s var(--ease-organic) forwards;
}

/* Buse line animation */
.buse-line {
  position: absolute;
  height: 2px;
  background: var(--accent-warm);
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  z-index: 2;
}

/* Stat box SVG draw */
.stat-box {
  position: relative;
}

.stat-box__border {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stat-box__border rect {
  fill: none;
  stroke: var(--wire);
  stroke-width: 1;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.2s var(--ease-organic);
}

.stat-box.is-drawn .stat-box__border rect {
  stroke-dashoffset: 0;
}

/* Layer stack animation */
.layer-line {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-organic), transform 0.8s var(--ease-organic);
}

.layer-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Parallax cards */
.parallax-card {
  will-change: transform;
}

/* Clip-path reveal for projects */
.reveal-mask {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s var(--ease-organic);
}

.reveal-mask.is-revealed {
  clip-path: inset(0% 0 0 0);
}

/* CTA border draw animation */
.cta-draw.is-animated::before {
  animation: borderDraw 1s var(--ease-organic) forwards;
}

@keyframes borderDraw {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Submit zone printing animation */
.submit-zone {
  position: relative;
  width: 100%;
  padding: var(--space-md);
  text-align: center;
  border: 1px dashed var(--wire);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-organic),
              background-color var(--duration-fast) var(--ease-organic);
}

.submit-zone:hover {
  border-color: var(--accent-warm);
  background-color: var(--surface);
}

.submit-zone.is-printing::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-warm);
  animation: printProgress 2s linear forwards;
}

@keyframes printProgress {
  from { width: 0; }
  to { width: 100%; }
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--wire);
}

.timeline__progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 0%;
  background: var(--accent);
  transition: height 0.1s linear;
}

.timeline__item {
  position: relative;
  padding-bottom: var(--space-lg);
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 0.5rem;
  width: 9px;
  height: 9px;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 50%;
  transform: translateX(-4px);
}

/* Page transition animations */
.page-enter {
  animation: pageEnter 0.6s var(--ease-organic) forwards;
}

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

/* Reduced motion helpers */
@media (prefers-reduced-motion: reduce) {
  .logo-letter.is-animated,
  .layer-line.is-visible,
  .reveal-mask.is-revealed,
  .stat-box.is-drawn .stat-box__border rect {
    animation: none;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
    clip-path: none;
  }
}