/* ==========================================================================
   KADEŘNICTVÍ MARIE STÁRKOVÁ — animations.css
   Keyframes, scroll-reveal třídy, page-load sekvence, signature nůžky
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes wordUp {
  from { opacity: 0; transform: translateY(110%) rotate(3deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes bounceDown {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 10px); }
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   2. PAGE-LOAD SEKVENCE (hero + nav)
   Prvky startují skryté a rozehrají se s prodlevou.
   -------------------------------------------------------------------------- */
.nav__logo {
  opacity: 0;
  animation: fadeInDown 0.7s var(--ease) 0.1s forwards;
}
.nav__links a,
.nav__cta {
  opacity: 0;
  animation: fadeInDown 0.6s var(--ease) forwards;
}
.nav__links li:nth-child(1) a { animation-delay: 0.30s; }
.nav__links li:nth-child(2) a { animation-delay: 0.38s; }
.nav__links li:nth-child(3) a { animation-delay: 0.46s; }
.nav__links li:nth-child(4) a { animation-delay: 0.54s; }
.nav__links li:nth-child(5) a { animation-delay: 0.62s; }
.nav__cta { animation-delay: 0.70s; }

/* Hero obsah */
.hero__eyebrow {
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease) 0.4s forwards;
}
.hero__title .word {
  display: inline-block;
  opacity: 0;
  animation: wordUp 0.9s var(--ease) forwards;
}
.hero__title .word:nth-child(1) { animation-delay: 0.60s; }
.hero__title .word:nth-child(2) { animation-delay: 0.72s; }
.hero__title .word:nth-child(3) { animation-delay: 0.84s; }
.hero__title .word:nth-child(4) { animation-delay: 0.96s; }
.hero__lead {
  opacity: 0;
  animation: fadeInUp 0.9s var(--ease) 0.9s forwards;
}
.hero__cta .btn {
  opacity: 0;
  animation: scaleIn 0.7s var(--ease) forwards;
}
.hero__cta .btn:nth-child(1) { animation-delay: 1.10s; }
.hero__cta .btn:nth-child(2) { animation-delay: 1.22s; }

.hero__scroll {
  opacity: 0;
  animation: fadeIn 1s var(--ease) 1.6s forwards,
             bounceDown 2s ease-in-out 2s infinite;
}

/* Word wrapper — zabraňuje "vytékání" písmen během wordUp */
.hero__title .word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0 0.06em;
}

/* --------------------------------------------------------------------------
   3. SIGNATURE — kreslení "stříhající" čáry
   -------------------------------------------------------------------------- */
.scissors-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: drawLine 1.6s var(--ease) 1.4s forwards;
}
.scissors-icon-html {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: scissorTravel 1.7s var(--ease) 1.35s forwards;
}
.scissors-icon-html svg { display: block; }
@keyframes scissorTravel {
  0%   { left: 0;    opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 100%; opacity: 0.9; }
}

/* --------------------------------------------------------------------------
   4. SCROLL-REVEAL (Intersection Observer přidá .is-visible)
   -------------------------------------------------------------------------- */
.reveal,
.reveal--left,
.reveal--right,
.reveal--scale {
  opacity: 0;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}
.reveal        { transform: translateY(40px); }
.reveal--left  { transform: translateX(-60px); }
.reveal--right { transform: translateX(60px); }
.reveal--scale { transform: scale(0.92); }

.reveal.is-visible,
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger — děti se odhalují postupně */
.stagger-parent > * {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.stagger-parent.is-visible > * {
  opacity: 1;
  transform: none;
}
.stagger-parent.is-visible > *:nth-child(1) { transition-delay: 0s; }
.stagger-parent.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.stagger-parent.is-visible > *:nth-child(3) { transition-delay: 0.24s; }
.stagger-parent.is-visible > *:nth-child(4) { transition-delay: 0.36s; }
.stagger-parent.is-visible > *:nth-child(5) { transition-delay: 0.48s; }
.stagger-parent.is-visible > *:nth-child(6) { transition-delay: 0.60s; }

/* --------------------------------------------------------------------------
   5. RESPEKT K PREFERENCÍM UŽIVATELE
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .stagger-parent > *,
  .hero__eyebrow,
  .hero__title .word,
  .hero__lead,
  .hero__cta .btn,
  .hero__scroll,
  .nav__logo,
  .nav__links a,
  .nav__cta {
    opacity: 1 !important;
    transform: none !important;
  }
  .scissors-path { stroke-dashoffset: 0 !important; }
  .scissors-icon-html { opacity: 0.9 !important; left: 50% !important; }
}