/* ============================================================
   ANIMATIONS – animations.css
   Coaching & Styling by Sipos Évi
   ============================================================ */

/* --- Reduced motion respect --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .gold-thread__line {
    transform: none !important;
  }
}

/* ===========================================
   LOGO SVG DRAW-ON ANIMATION
   =========================================== */

/* Initial state: paths invisible (stroke-dashoffset hides them) */
.logo-anim .logo-line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawLine 1.2s var(--ease-out) 0.3s forwards;
}

.logo-anim .logo-arc-upper {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: drawArc 1s var(--ease-out) 0.9s forwards;
}

.logo-anim .logo-arc-lower {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: drawArc 1s var(--ease-out) 1.2s forwards;
}

.logo-anim .logo-dot {
  transform-origin: center;
  transform: scale(0);
  animation: popDot 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}

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

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

@keyframes popDot {
  to { transform: scale(1); }
}

/* Manifesto logo animation (triggered on section enter) */
.manifesto-logo-anim .logo-line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawLine 1.4s var(--ease-out) 0.2s forwards;
}

.manifesto-logo-anim .logo-arc-upper {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: drawArc 1.1s var(--ease-out) 1.0s forwards;
}

.manifesto-logo-anim .logo-arc-lower {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: drawArc 1.1s var(--ease-out) 1.4s forwards;
}

.manifesto-logo-anim .logo-dot {
  transform-origin: center;
  transform: scale(0);
  animation: popDot 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}

/* ===========================================
   HERO ENTRANCE
   =========================================== */
.hero__content .label {
  opacity: 0;
  transform: translateY(1rem);
  animation: fadeUp 0.8s var(--ease-out) 0.4s forwards;
}

.hero__headline {
  opacity: 0;
  transform: translateY(1.5rem);
  animation: fadeUp 1s var(--ease-out) 0.7s forwards;
}

.hero__supporting {
  opacity: 0;
  transform: translateY(1rem);
  animation: fadeUp 0.8s var(--ease-out) 1s forwards;
}

.hero__accent {
  opacity: 0;
  transform: translateY(1rem);
  animation: fadeUp 0.8s var(--ease-out) 1.2s forwards;
}

.hero__cta {
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 1.5s forwards;
}

.hero__image {
  opacity: 0;
  animation: fadeIn 1.4s var(--ease-out) 0.6s forwards;
}

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

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

/* ===========================================
   PERSPECTIVE SECTION
   =========================================== */

/* Opacity fade for the blurred first line on scroll */
.perspective__main {
  transition: opacity 1.2s var(--ease-out);
}

/* ===========================================
   MANIFESTO PANELS
   =========================================== */
.manifesto__word {
  opacity: 0;
  transform: translateY(3rem) scale(0.97);
  transition: opacity 1.2s var(--ease-out),
              transform 1.2s var(--ease-out),
              color 1.2s var(--ease-out),
              -webkit-text-stroke 0.8s ease;
}

.manifesto__panel.revealed .manifesto__word {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.manifesto__final .manifesto__logo-wrap {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 1.2s var(--ease-out) 0.3s,
              transform 1.2s var(--ease-out) 0.3s;
}

.manifesto__final.revealed .manifesto__logo-wrap {
  opacity: 1;
  transform: translateY(0);
}

.manifesto__final .manifesto__tagline {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 1s var(--ease-out) 0.8s,
              transform 1s var(--ease-out) 0.8s;
}

.manifesto__final.revealed .manifesto__tagline {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================
   METHOD PHASE ENTRANCE
   =========================================== */
.method__phase {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.8s var(--ease-out),
              transform 0.8s var(--ease-out),
              background 0.4s ease;
}

.method__phase.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================
   EU42 NUMBER ENTRANCE
   =========================================== */
.eu42__number {
  opacity: 0;
  transform: translateX(3rem);
  transition: opacity 1.4s var(--ease-out) 0.2s,
              transform 1.4s var(--ease-out) 0.2s;
}

.eu42__number.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* ===========================================
   PROGRAM TRACKS ENTRANCE
   =========================================== */
.program__track {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 0.9s var(--ease-out),
              transform 0.9s var(--ease-out),
              background 0.4s ease;
}

.program__track.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================
   TOOLBOX COMPOSITION
   =========================================== */
.toolbox__coaching {
  opacity: 0;
  transform: translateX(-2rem);
  transition: opacity 1s var(--ease-out),
              transform 1s var(--ease-out);
}

.toolbox__coaching.revealed {
  opacity: 1;
  transform: translateX(0);
}

.toolbox__item {
  opacity: 0;
  transform: translateX(-1rem);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out),
              color 0.3s ease;
}

.toolbox__item.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* ===========================================
   EVI STORY
   =========================================== */
.evi__image {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s var(--ease-out);
}

.evi__image.revealed {
  clip-path: inset(0 0% 0 0);
}

.evi__content {
  opacity: 0;
  transform: translateX(2rem);
  transition: opacity 1s var(--ease-out) 0.4s,
              transform 1s var(--ease-out) 0.4s;
}

.evi__content.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* ===========================================
   GOLD WAVE DECORATIVE
   =========================================== */
.gold-wave-deco {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  opacity: 0.4;
  pointer-events: none;
}

/* ===========================================
   NAV LINKS HOVER / ACTIVE INDICATOR
   =========================================== */
.nav__link {
  transition: color 0.3s ease;
}

/* ===========================================
   BUTTON RIPPLE
   =========================================== */
.btn-primary {
  isolation: isolate;
}

/* ===========================================
   PAGE LOAD SEQUENCE
   =========================================== */
.nav {
  opacity: 0;
  animation: fadeIn 0.6s var(--ease-out) 0.2s forwards;
}

.gold-thread {
  opacity: 0;
  animation: fadeIn 0.6s var(--ease-out) 2s forwards;
}

/* ===========================================
   CLUE QUESTIONS STAGGER
   =========================================== */
.clue__q {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out),
              background 0.3s ease,
              border-color 0.3s ease;
}

.clue__q.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================
   SITUATION PAIRS
   =========================================== */
.situation__pair {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out),
              background 0.4s ease;
}

.situation__pair.revealed {
  opacity: 1;
  transform: translateY(0);
}