/* =========================================================
   Ideal Form — warstwa ruchu (motion)
   - przejścia między stronami: cross-document View Transitions
   - wejścia sekcji: CSS scroll-driven animations (animation-timeline: view())
   - intro hero / nagłówków: animacje czasowe przy załadowaniu
   Wszystko to progressive enhancement: przeglądarka bez wsparcia
   pokazuje stronę 1:1 z Figmą, bez ruchu. Szanujemy prefers-reduced-motion.
   ========================================================= */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* expo out */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 20.6%, 1.043 24.4%, 1.035 28.6%, 1.007 37.6%, .998 46.2%, 1);
}

/* ---------- Przejścia między stronami ---------- */
@view-transition { navigation: auto; }

.topbar { view-transition-name: topbar; }
.header { view-transition-name: site-header; }
.gallery__main { view-transition-name: product-hero; }   /* karta produktu ↔ zdjęcie z listingu */

::view-transition-group(*) { animation-duration: .6s; animation-timing-function: var(--ease-out); }
::view-transition-old(root) { animation: vt-out .28s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease-out) .08s both; }
::view-transition-image-pair(product-hero) { isolation: auto; }
::view-transition-old(product-hero),
::view-transition-new(product-hero) {
  animation: none;
  mix-blend-mode: normal;
  height: 100%;
  object-fit: cover;
  overflow: clip;
}
::view-transition-old(product-hero) { display: none; }

@keyframes vt-out { to { opacity: 0; translate: 0 -12px; } }
@keyframes vt-in  { from { opacity: 0; translate: 0 24px; } }

/* ---------- Mikrointerakcje ---------- */
.btn { transition: background-color .2s, color .2s, border-color .2s, scale .35s var(--ease-spring), translate .35s var(--ease-out); }
.btn:hover { translate: 0 -1px; }
.btn:active { scale: .96; translate: 0; }
.circle-btn { transition: transform .5s var(--ease-spring), background-color .2s, color .2s; }
.category:hover .circle-btn { background: var(--c-green); }
.partners__logos img { transition: opacity .3s; }
.partners__logos img:hover { opacity: 1; }
.link-arrow, .footer a { transition: opacity .2s, letter-spacing .4s var(--ease-out); }

/* Header: chowa się przy przewijaniu w dół, wraca przy przewijaniu w górę */
.header { transition: box-shadow .2s, translate .45s var(--ease-out); }
.header.is-hidden { translate: 0 -100%; }
.header.is-scrolled {
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
}

/* Hero: linie tytułu (maska dla animacji) */
.hero__title .ln { display: block; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }

/* Wordmark — litery (span dzielony w motion.js) */
.wordmark__text .ch { display: inline-block; }
.wordmark__text > .ch { color: inherit; }   /* litery „ideal” zostają ciemne, „form” dziedziczy zieleń */

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Intro: hero ---------- */
  .hero__img {
    animation:
      hero-zoom 2.2s var(--ease-out) both,
      hero-parallax linear both;
    animation-timeline: auto, scroll(root);
    animation-range: normal, 0 900px;
  }
  .hero__title .ln > span { display: inline-block; animation: line-up 1.1s var(--ease-out) both; }
  .hero__title .ln:nth-child(2) > span { animation-delay: .09s; }
  .hero__lead { animation: fade-up 1s var(--ease-out) .35s both; }
  .hero__content .btn { animation: fade-up 1s var(--ease-out) .48s both; }
  .hero::before, .hero::after { animation: fade-in 1.4s ease both; }

  /* ---------- Intro: nagłówki podstron ---------- */
  .page-head .breadcrumb,
  .product-crumb { animation: fade-in .8s ease .05s both; }
  .page-head .h-page,
  .product__title { animation: title-in 1.1s var(--ease-out) .08s both; }
  .page-head__lead,
  .product__eyebrow,
  .product__lead { animation: fade-up 1s var(--ease-out) .22s both; }
  .filters,
  .wz-tabs,
  .facts,
  .quote-card { animation: fade-up 1s var(--ease-out) .32s both; }
  .gallery__main { animation: media-in 1.2s var(--ease-out) both; }
  .gallery__thumbs { animation: fade-up 1s var(--ease-out) .3s both; }

  /* ---------- Menu mobilne: kaskada linków ---------- */
  @media (max-width: 1200px) {
    .nav__link { opacity: 0; translate: 0 12px; transition: opacity .3s, translate .5s var(--ease-out), color .2s; }
    .nav-open .nav__link { opacity: 1; translate: 0; }
    .nav-open .nav__link:nth-child(2) { transition-delay: .03s; }
    .nav-open .nav__link:nth-child(3) { transition-delay: .06s; }
    .nav-open .nav__link:nth-child(4) { transition-delay: .09s; }
    .nav-open .nav__link:nth-child(5) { transition-delay: .12s; }
    .nav-open .nav__link:nth-child(6) { transition-delay: .15s; }
    .nav-open .nav__link:nth-child(7) { transition-delay: .18s; }
  }
}

/* ---------- Wejścia przy przewijaniu (scroll-driven) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* treść: delikatne wynurzenie */
    :is(
      .section-head__titles > *, .section-head__actions, .section-head > .link-arrow,
      .dark-panel__head, .dark-panel__copy, .dark-panel > .btn,
      .steps-head, .step, .review, .rc-footer,
      .partners .caps-label, .partners__logos img,
      .footer__top, .footer__bottom,
      .p-card, .spec__intro, .spec__row, .similar__head, .colors__head, .swatch,
      .seo__h, .seo__col, .seo__toggle,
      .about-story__titles, .about-story__copy > *, .usp, .signature,
      .contact-card, .contact-form, .faq__head > *, .faq__item, .map__card,
      .info-card, .wz-head > *, .wz-collection__head, .grain, .wz-note, .wz-stats,
      .gallery__item, .gallery-bar, .about-cols > *
    ) {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }

    /* drobny stagger w siatkach (kolejne kolumny startują później) */
    :is(.p-card, .step, .usp, .info-card, .seo__col, .reviews-wall__col):nth-child(3n+2),
    .reviews-wall__col:nth-child(2) .review { animation-range: entry 8% entry 98%; }
    :is(.p-card, .step, .usp, .info-card, .seo__col):nth-child(3n+3),
    .reviews-wall__col:nth-child(3) .review { animation-range: entry 16% cover 20%; }
    .partners__logos img:nth-child(2) { animation-range: entry 4% entry 94%; }
    .partners__logos img:nth-child(3) { animation-range: entry 8% entry 98%; }
    .partners__logos img:nth-child(4) { animation-range: entry 12% cover 10%; }
    .partners__logos img:nth-child(5) { animation-range: entry 16% cover 14%; }
    .partners__logos img:nth-child(6) { animation-range: entry 20% cover 18%; }

    /* duże nagłówki sekcji: odsłonięcie maską */
    :is(.section-head .h-section, .dark-panel .h-panel, .cta-contact .h-panel, .about-story__title, .wz-head .h-section) {
      animation: title-in linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }

    /* zdjęcia: odsłonięcie ramki + zoom-out */
    :is(.category, .photo-strip a, .split__photo, .about-banner__frame, .p-card__media, .grain > :first-child) {
      animation: frame-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
    :is(.category img, .photo-strip img, .split__photo img, .about-banner__frame img, .p-card__media img) {
      animation: img-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
    .photo-strip a:nth-child(2) { animation-range: entry 6% cover 38%; }
    .photo-strip a:nth-child(3) { animation-range: entry 12% cover 41%; }
    .photo-strip a:nth-child(4) { animation-range: entry 18% cover 44%; }
    .photo-strip a:nth-child(5) { animation-range: entry 24% cover 47%; }
    .category:nth-child(2) { animation-range: entry 8% cover 38%; }
    .category:nth-child(3) { animation-range: entry 16% cover 41%; }

    /* CTA kontakt: tło z paralaksą, karta wjeżdża */
    .cta-contact__panel { view-timeline: --cta block; }
    .cta-contact__bg {
      animation: parallax-y linear both;
      animation-timeline: --cta;
      animation-range: cover 0% cover 100%;
    }
    .cta-contact__card {
      animation: card-in linear both;
      animation-timeline: --cta;
      animation-range: entry 15% cover 45%;
    }

    /* Wykres 90 / 10 (wzornik) */
    .wz-chart__fill, .wz-chart__rest {
      transform-origin: left center;
      animation: bar-grow linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 45%;
    }
    .wz-chart__rest { animation-range: cover 30% cover 50%; }

    /* Wordmark w stopce: litery wynurzają się po kolei */
    .wordmark { view-timeline: --wm block; }
    .wordmark__text .ch {
      animation: char-up linear both;
      animation-timeline: --wm;
      animation-range: entry calc(var(--i, 0) * 6%) entry calc(55% + var(--i, 0) * 6%);
    }
  }
}

/* ---------- Keyframes ---------- */
@keyframes fade-in   { from { opacity: 0; } }
@keyframes fade-up   { from { opacity: 0; translate: 0 18px; } }
@keyframes line-up   { from { translate: 0 105%; } }
@keyframes title-in  {
  from { opacity: 0; translate: 0 .35em; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; translate: 0 0;     clip-path: inset(0 0 -25% 0); }
}
@keyframes hero-zoom { from { transform: scale(1.14); } }
@keyframes hero-parallax { to { translate: 0 16%; } }
@keyframes media-in  { from { opacity: 0; clip-path: inset(6% 6% 6% 6% round 8px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 0); } }

@keyframes reveal-up {
  from { opacity: 0; translate: 0 48px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes frame-in {
  from { clip-path: inset(10% 6% 0 6% round 12px); opacity: .2; }
  to   { clip-path: inset(0 0 0 0 round 0); opacity: 1; }
}
@keyframes img-settle { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes parallax-y { from { transform: translateY(-8%) scale(1.16); } to { transform: translateY(8%) scale(1.16); } }
@keyframes card-in   { from { clip-path: inset(0 100% 0 0 round 6px); } to { clip-path: inset(0 0 0 0 round 6px); } }
@keyframes bar-grow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes char-up   { from { translate: 0 70%; opacity: 0; } to { translate: 0 0; opacity: 1; } }