/* 
   Wrzosowy Tartak - Animations 
   Plik zawiera wyłącznie mikrointerakcje (hover) oraz definicje klatek kluczowych (keyframes).
*/

/* ----------------------------------------- */
/* Tokeny ruchu (--duration-*, --ease-*, --scale-active, --animation-*)  */
/* zostaly przeniesione do src/css/variables.css (Faza 1 Design System 2.0). */
/* Ten plik zawiera wylacznie @keyframes i klasy narzedziowe.            */
/* ----------------------------------------- */

/* --- Klasy narzędziowe dla Transition (Ruch i Animacje) --- */
.motion-decelerate {
    transition-timing-function: var(--ease-decelerate);
    transition-duration: var(--duration-decelerate); /* Zwalnianie (Entering/Snapping) - 500ms */
}

.motion-accelerate {
    transition-timing-function: var(--ease-accelerate);
    transition-duration: var(--duration-accelerate); /* Przyspieszanie (Passive Exiting) - 400ms */
}

.motion-responsive {
    transition-timing-function: var(--ease-responsive);
    transition-duration: var(--duration-responsive); /* Szybkie wyjście (Dismissing) - 200ms */
}

.motion-linear {
    transition-timing-function: var(--ease-linear);
    transition-duration: var(--duration-linear); /* Jednostajny (Opacity/Color) - 200ms */
}

.motion-in-out {
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--duration-in-out); /* Start i koniec łagodny (Moving/Pushing) - 500ms */
}

/* ----------------------------------------- */
/* Gotowe Wzorce Animacji (Przejścia / Transitions) */
/* ----------------------------------------- */

/* 
   Dodaj klasę .anim-trigger do rodzica, aby wyzwolić animację 
   na dziecku po najechaniu myszką. Alternatywnie użyj JS i nadaj 
   na dany element (dziecko) klasę .is-active 
*/

/* 1. Opacity (Fade) */
.anim-opacity {
    opacity: 0;
    transition: opacity 100ms var(--ease-linear); /* Exit */
}
.anim-opacity.is-active,
.anim-trigger:hover .anim-opacity {
    opacity: 1;
    transition: opacity 200ms var(--ease-linear); /* Enter */
}

/* 2. Scale */
.anim-scale {
    transform: scale(0);
    transition: transform 400ms var(--ease-accelerate); /* Exit */
}
.anim-scale.is-active,
.anim-trigger:hover .anim-scale {
    transform: scale(1);
    transition: transform 500ms var(--ease-decelerate); /* Enter */
}

/* 3. Position (Slide) */
.anim-position {
    transform: translateY(20px);
    transition: transform 400ms var(--ease-accelerate); /* Exit */
}
.anim-position.is-active,
.anim-trigger:hover .anim-position {
    transform: translateY(0);
    transition: transform 500ms var(--ease-decelerate); /* Enter */
}

/* 4. Mask (Radial reveal) */
.anim-mask {
    clip-path: circle(0% at center);
    transition: clip-path 400ms var(--ease-accelerate); /* Exit */
}
.anim-mask.is-active,
.anim-trigger:hover .anim-mask {
    clip-path: circle(100% at center);
    transition: clip-path 500ms var(--ease-decelerate); /* Enter */
}

/* 5. Position and mask (Text reveal) */
.anim-pos-mask {
    clip-path: inset(100% 0 0 0);
    transform: translateY(100%);
    transition: clip-path 500ms var(--ease-in-out), transform 500ms var(--ease-in-out); /* Exit (przyspiesz/zwolnij w obie strony dla tekstu) */
}
.anim-pos-mask.is-active,
.anim-trigger:hover .anim-pos-mask {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
    transition: clip-path 500ms var(--ease-in-out), transform 500ms var(--ease-in-out); /* Enter */
}

/* 6. Color */
.anim-color-change {
    transition: color 200ms var(--ease-linear), background-color 200ms var(--ease-linear), border-color 200ms var(--ease-linear);
}

/* 7. Wipe (Linear mask progress) */
.anim-wipe {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 400ms var(--ease-accelerate); /* Exit */
}
.anim-wipe.is-active,
.anim-trigger:hover .anim-wipe {
    clip-path: inset(0 0 0 0);
    transition: clip-path 500ms var(--ease-decelerate); /* Enter */
}

/* 8. Ripple Pulse (To akurat musi pozostać w klatkach, bo działa w pętli) */
.anim-ripple-pulse {
    animation:
        rippleScale 2500ms var(--ease-decelerate) infinite,
        rippleOpacity 2500ms var(--ease-linear) infinite;
}

/* 9. Reveal "mgla" (sygnatura MGLA - Faza 5)
   Mgla przez TON, swiadomie BEZ filter:blur (zakaz briefu):
   samo opacity + delikatny scale 0.98 -> 1. Odslania scrollReveal.js. */
.reveal-mist {
    opacity: 0;
    transform: scale(0.98);
    transition:
        opacity var(--duration-decelerate) var(--ease-decelerate),
        transform var(--duration-decelerate) var(--ease-decelerate);
}

.reveal-mist.is-active,
.anim-trigger:hover .reveal-mist {
    opacity: 1;
    transform: scale(1);
}

/* ----------------------------------------- */
/* STAGGER - kaskadowe odslanianie dzieci     */
/* Rodzic z [data-stagger]: dzieci z klasami  */
/* .anim-* / .reveal-mist odslaniaja sie z    */
/* opoznieniem 70 ms na dziecko, czapka od 8. */
/* dziecka. Czyste CSS - dziala dla dowolnej  */
/* strony; bez JS degraduje sie do zwyklego   */
/* odsloniecia (opoznienie po prostu znika    */
/* wraz z brakiem transition).                */
/* Po zakonczonym odslonieciu scrollReveal.js */
/* dodaje .stagger-done, zeby opoznienie nie  */
/* dotykalo pozniejszych przejsc (hover).     */
/* ----------------------------------------- */
[data-stagger] > :nth-child(2) { --stagger-delay: 70ms; }
[data-stagger] > :nth-child(3) { --stagger-delay: 140ms; }
[data-stagger] > :nth-child(4) { --stagger-delay: 210ms; }
[data-stagger] > :nth-child(5) { --stagger-delay: 280ms; }
[data-stagger] > :nth-child(6) { --stagger-delay: 350ms; }
[data-stagger] > :nth-child(7) { --stagger-delay: 420ms; }
[data-stagger] > :nth-child(n+8) { --stagger-delay: 490ms; }

[data-stagger] > :is(.anim-opacity, .anim-scale, .anim-position, .anim-mask, .anim-pos-mask, .anim-wipe, .reveal-mist) {
    transition-delay: var(--stagger-delay, 0ms);
}

[data-stagger] > :is(.anim-opacity, .anim-scale, .anim-position, .anim-mask, .anim-pos-mask, .anim-wipe, .reveal-mist).stagger-done {
    transition-delay: 0ms;
}

/* ----------------------------------------- */
/* SMOKE DIVIDER - sygnatura LINIA DYMU       */
/* Pozioma linia dymu (inline SVG w HTML,     */
/* pathLength="1"). scrollReveal.js dodaje    */
/* .is-active przy wejsciu w viewport i linia */
/* "dorysowuje sie" przez stroke-dashoffset.  */
/* Reduced-motion / brak JS: linia narysowana */
/* (bloki nizej). Kolory wylacznie z tokenow. */
/* ----------------------------------------- */
.smoke-divider {
    display: flex;
    justify-content: center;
}

.smoke-divider svg {
    display: block;
    width: min(100%, 520px);
    height: auto;
    overflow: visible;
}

.smoke-divider__path {
    fill: none;
    stroke: var(--color-heather);
    stroke-width: var(--border-base);
    stroke-linecap: round;
    opacity: 0.3;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 800ms var(--ease-decelerate);
}

.smoke-divider__path--echo {
    stroke: var(--color-primary);
    opacity: 0.2;
    transition-delay: 150ms;
}

.smoke-divider.is-active .smoke-divider__path {
    stroke-dashoffset: 0;
}

/* ----------------------------------------- */
/* Keyframes (Tylko dla Ripple)              */
/* ----------------------------------------- */

@keyframes rippleScale {
    0% { transform: scale(0.2); }
    60% { transform: scale(2.5); }
    100% { transform: scale(2.5); }
}
@keyframes rippleOpacity {
    0% { opacity: 0.8; }
    40% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes floatPlate {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(1.5deg);
    }
}

@keyframes floatTomato {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    50% { transform: translateY(-8px) rotate(-6deg) scale(1.03); }
}

@keyframes floatLeaf1 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(8px) rotate(12deg); }
}

@keyframes floatLeaf2 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(-8deg); }
}

@keyframes scroll-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% - var(--space-md)));
    }
}

/* Puls bez cienia (ZERO CIENI - Faza 4/5): dawny box-shadow ring
   zastapiony oddechem opacity + transform. Uzywany przez token
   --animation-pulse (variables.css). */
@keyframes cc-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.55;
        transform: scale(0.9);
    }
}

@keyframes fadeInX {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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

/* Bezpiecznik no-JS (progressive): gdy przegladarka nie wykonuje
   skryptow, tresc animowana scrollem jest widoczna od razu,
   a linia dymu narysowana. */
@media (scripting: none) {
    .anim-opacity,
    .anim-scale,
    .anim-position,
    .anim-mask,
    .anim-pos-mask,
    .anim-wipe,
    .reveal-mist {
        opacity: 1;
        transform: none;
        clip-path: none;
    }

    .smoke-divider__path {
        stroke-dashoffset: 0;
    }
}

/* Reduced motion: linia dymu od razu narysowana (wersja statyczna). */
@media (prefers-reduced-motion: reduce) {
    .smoke-divider__path {
        stroke-dashoffset: 0;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}