/* ==========================================================================
   WASHLAY — WSZYSTKIE ANIMACJE PROJEKTU (zbiorczy plik)
   ==========================================================================
   Ten plik zawiera WSZYSTKIE animacje używane w projekcie Washlay,
   pogrupowane sekcjami. Mapowanie elementów do animacji znajduje się
   w pliku: public/css/animations-all.README.md
   ==========================================================================

   SPIS TREŚCI:
   1. Globalne animacje wejścia (h1–h6, p, .acent-box, .accent)
   2. Animacje gridów (stagger) — porównanie, bezpieczeństwo
   3. Sekcja "Nowoczesna alternatywa" (.difference-section)
   4. Animacja telefonu (.phone-img)
   5. Hero — accent box, H1, paragraf
   6. Button — wave text + scale (hover/active) + wejście
   7. Automation section (acent-box, paragraf, 3 boxy ze staggerem)
   8. Time section (paragrafy, 4 boxy, CTA)
   9. Works section (accent, 4 boxy)
   10. Calculator panel (calcPanelIn keyframe)
   11. FAQ accordion (block-answer + ikona +)
   12. Sticky model card (jak-dziala-washlay)
   13. Webflow loader (spin keyframe)
   14. Hamburger menu (transform 45deg)
   15. Reduced motion override
   ========================================================================== */


/* ==========================================================================
   1. GLOBALNE ANIMACJE WEJŚCIA — nagłówki i paragrafy
   Elementy: wszystkie h1–h6 oraz <p> w <main>
   Trigger: IntersectionObserver dodaje klasę .is-visible
   Plik JS: public/js/animations.js
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
p {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  will-change: opacity, transform;
}

h1.is-visible, h2.is-visible, h3.is-visible,
h4.is-visible, h5.is-visible, h6.is-visible,
p.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Akcenty (np. "Porównanie", "Bezpieczeństwo") */
.acent-box,
.accent {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.acent-box.is-visible,
.accent.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   2. GRIDY — animacja wejścia ze staggerem
   Elementy: .grid-security .cell-grid, .differencce-table .table-cell,
             .who-grid > *, .price-grid > *
   ========================================================================== */
.grid-security .cell-grid,
.differencce-table .table-cell,
.who-grid > *,
.price-grid > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.grid-security .cell-grid:nth-child(1) {
  transform: translate(-36px, -36px);
}
.grid-security .cell-grid:nth-child(2) {
  transform: translate(36px, -36px);
}
.grid-security .cell-grid:nth-child(3) {
  transform: translate(-36px, 36px);
}
.grid-security .cell-grid:nth-child(4) {
  transform: translate(36px, 36px);
}
.grid-security.is-visible .cell-grid,
.grid-security .cell-grid.is-visible,
.differencce-table.is-visible .table-cell,
.who-grid.is-visible > *,
.price-grid.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay */
.grid-security.is-visible .cell-grid:nth-child(1),
.differencce-table.is-visible .table-cell:nth-child(-n+3) { transition-delay: 0.05s; }
.grid-security.is-visible .cell-grid:nth-child(2),
.differencce-table.is-visible .table-cell:nth-child(n+4):nth-child(-n+6) { transition-delay: 0.15s; }
.grid-security.is-visible .cell-grid:nth-child(3),
.differencce-table.is-visible .table-cell:nth-child(n+7):nth-child(-n+9) { transition-delay: 0.25s; }
.grid-security.is-visible .cell-grid:nth-child(4),
.differencce-table.is-visible .table-cell:nth-child(n+10):nth-child(-n+12) { transition-delay: 0.35s; }
.differencce-table.is-visible .table-cell:nth-child(n+13):nth-child(-n+15) { transition-delay: 0.45s; }
.differencce-table.is-visible .table-cell:nth-child(n+16):nth-child(-n+18) { transition-delay: 0.55s; }
.differencce-table.is-visible .table-cell:nth-child(n+19) { transition-delay: 0.65s; }


/* ==========================================================================
   3. SEKCJA "Nowoczesna alternatywa dla tradycyjnej pralni"
   Element: .difference-section (zsynchronizowany stagger)
   ========================================================================== */
.difference-section .header-2,
.difference-section .acent-box,
.difference-section .differencce-table,
.difference-section .button {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.difference-section.is-visible .acent-box       { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.difference-section.is-visible .header-2        { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
.difference-section.is-visible .differencce-table { transition-delay: 0.25s; opacity: 1; transform: translateY(0); }
.difference-section.is-visible .button          { transition-delay: 0.35s; opacity: 1; transform: translateY(0); }


/* ==========================================================================
   4. ANIMACJA TELEFONU
   Element: .phone-img — porusza się za scrollem/myszą (JS w HTML)
   ========================================================================== */
.phone-img {
  will-change: transform;
  transition: transform 0.12s ease-out;
}


/* ==========================================================================
   5. HERO — accent box, H1, paragraf
   Elementy: .hero .acent-box, .header-1.show, .hero .paragraph
   ========================================================================== */
.hero .acent-box {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero .acent-box.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.header-1.show {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.header-1.show.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero .paragraph {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero .paragraph.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   6. BUTTON — wejście + wave text + scale (hover/active)
   Element: .button (wszystkie przyciski CTA)
   JS: buildWaveButton() / attachWaveHover() w plikach HTML
   ========================================================================== */
.button {
  overflow: hidden !important;
  position: relative !important;
  scale: 1;
  opacity: 0;
  transform: translateY(32px);
  transition: scale 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.button.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.button.is-hovered {
  scale: 0.96;
}
.button:active {
  scale: 0.94;
  transition: scale 0.15s ease !important;
}

/* Wave text — litery przewijają się w górę */
.button .btn-wave-inner {
  display: flex;
  overflow: hidden;
  height: 1.3em;
  line-height: 1.3em;
  pointer-events: none;
  white-space: nowrap;
}
.button .btn-wave-inner span {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: pre;
  text-shadow: 0 1.3em 0 currentColor;
}
.button.is-hovered .btn-wave-inner span {
  transform: translateY(-1.3em);
}

/* Hover na buttonie outline (Webflow) */
.button.button-outline:hover { /* style w washlay-com-draft.webflow.css */ }


/* ==========================================================================
   7. AUTOMATION SECTION
   Elementy: .automation-content .acent-box, .paragraph-global,
             .automation-single-box (3 boxy ze staggerem)
   ========================================================================== */
.automation-content .acent-box {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.automation-content .acent-box.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.automation-content .paragraph-global {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.automation-content .paragraph-global.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.automation-single-box {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.automation-single-box.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.automation-single-box:nth-child(1) { transition-delay: 0s; }
.automation-single-box:nth-child(2) { transition-delay: 0.15s; }
.automation-single-box:nth-child(3) { transition-delay: 0.3s; }


/* ==========================================================================
   8. TIME SECTION
   Elementy: .time-content paragrafy, .time-single-box (4), .time-cta
   ========================================================================== */
.time-content .paragraph-global,
.time-content .paragraph-time {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.time-content .paragraph-global.is-visible,
.time-content .paragraph-time.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.time-single-box {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.time-single-box.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.time-cta .paragraph {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.time-cta .paragraph.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   8A. PRICE SECTION
   Elementy: .three-blox-price .single-cell-price
   Zachowanie: identyczne wejście jak .time-single-box
   ========================================================================== */
.three-blox-price .single-cell-price {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.three-blox-price .single-cell-price.is-visible,
.three-blox-price.is-visible .single-cell-price {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   9. WORKS SECTION
   Elementy: .works-content .acent-box, .works-single-box (4 kroki)
   ========================================================================== */
.works-content .acent-box {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.works-content .acent-box.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.works-single-box {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.works-single-box.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   10. CALCULATOR — wejście panelu po zmianie zakładki
   Element: .calc-panel-enter (dodawane przez JS kalkulatora)
   Słuchacze JS: public/js/kalkulator.js + inline w HTML
   ========================================================================== */
@keyframes calcPanelIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.calc-panel-enter {
  animation: calcPanelIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

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

.zp-item-row.zp-item-enter {
  opacity: 0;
  animation: calcItemReveal 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Wiersze kalkulatora mają własny reveal i nie powinny zależeć od globalnego observera dla <p>. */
.zp-item-row .zp-item-name,
.zp-item-row .zp-item-count {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Slider thumb hover */
.weight-slider::-webkit-slider-thumb {
  transition: box-shadow 0.15s ease;
}
.weight-slider::-moz-range-thumb {
  transition: box-shadow 0.15s ease;
}

/* Opcje abonamentów */
.option-abonament {
  transition: background 0.2s ease, opacity 0.2s ease;
}


/* ==========================================================================
   11. FAQ ACCORDION
   Elementy: .block-answer (rozwijanie), .block-question .svg-faq svg (rotate)
   ========================================================================== */
.block-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.block-question.faq-active + .block-answer,
.block-answer.faq-open {
  grid-template-rows: 1fr;
}

.block-question .svg-faq svg {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.block-question.faq-active .svg-faq svg {
  transform: rotate(180deg);
}


/* ==========================================================================
   12. STICKY MODEL CARD (strona "Jak działa Washlay")
   Element: .jdw-model-card — zmiana koloru tła przy scrollu
   ========================================================================== */



/* ==========================================================================
   13. WEBFLOW — loader spinner
   Element: .w-loader (Webflow runtime)
   Plik: public/css/webflow.css (oryginał)
   ========================================================================== */
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ==========================================================================
   14. HAMBURGER MENU — animacja kresek na X
   Elementy: .hamburger-line (po dodaniu klasy .menu-open)
   ========================================================================== */
.hamburger-line {
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.menu-open .hamburger-line:nth-child(1) {
  transform: translate(0, 2px) rotate(45deg);
}
.menu-open .hamburger-line:nth-child(2) {
  opacity: 0.8;
}
.menu-open .hamburger-line:nth-child(3) {
  transform: rotate(-45deg);
}


/* ==========================================================================
   15. REDUCED MOTION — wyłącz animacje dla użytkowników, którzy ich nie chcą
   ========================================================================== */
/* ==========================================================================
   14A. FINALNE NADPISANIE DLA NAGŁÓWKÓW I PARAGRAFÓW
   Cel: wymusić ten sam ruch wejścia na wszystkich stronach,
   także tam, gdzie pozostał starszy CSS inline.
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
p {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease !important;
}

h1.is-visible, h2.is-visible, h3.is-visible,
h4.is-visible, h5.is-visible, h6.is-visible,
p.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* ==========================================================================
   14B. FINALNE NADPISANIE DLA GRID-SECURITY
   Cel: wymusić wejście z rogów do środka także przy starszym CSS inline.
   ========================================================================== */
.grid-security .cell-grid {
  opacity: 0 !important;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.grid-security .cell-grid:nth-child(1) {
  transform: translate(-36px, -36px) !important;
}

.grid-security .cell-grid:nth-child(2) {
  transform: translate(36px, -36px) !important;
}

.grid-security .cell-grid:nth-child(3) {
  transform: translate(-36px, 36px) !important;
}

.grid-security .cell-grid:nth-child(4) {
  transform: translate(36px, 36px) !important;
}

.grid-security.is-visible .cell-grid,
.grid-security .cell-grid.is-visible {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}


/* ==========================================================================
   14C. FINALNE NADPISANIE DLA THREE-BLOX-PRICE
   Cel: wymusić takie samo wejście jak w .time-single-box.
   ========================================================================== */
.three-blox-price .single-cell-price {
  opacity: 0 !important;
  transform: translateY(32px) !important;
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.three-blox-price .single-cell-price.is-visible,
.three-blox-price.is-visible .single-cell-price {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ==========================================================================
   14D. STAŁE NAGŁÓWKI BEZ REVEAL
   Cel: wybrane nagłówki mają być zawsze widoczne, bez clip-path i bez
   zależności od observerów inline.
   ========================================================================== */
.zp-static-header {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .zp-item-row.zp-item-enter {
    opacity: 1;
    animation: none !important;
    transform: none !important;
  }
}

.p-closers .header-points {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ==========================================================================
   15. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  h1, h2, h3, h4, h5, h6, p,
  .acent-box, .accent,
  .grid-security .cell-grid,
  .differencce-table .table-cell,
  .who-grid > *, .price-grid > *,
  .difference-section .header-2,
  .difference-section .differencce-table,
  .difference-section .button,
  .button,
  .automation-single-box,
  .time-single-box,
  .three-blox-price .single-cell-price,
  .works-single-box {
    opacity: 1 !important;
    transform: none !important;
  }

}