/* ==========================================================================
   Pałac Antyków — ruch
   Zasada: jedna zorkiestrowana sekwencja na wejściu (hero), ruch jako odpowiedź na akcję
   (menu, hover karty, dodanie do listy), nagłówek reagujący na przewijanie.
   Żadnego „wjeżdżania” każdej sekcji. Wszystko wyłączone przy prefers-reduced-motion.
   ========================================================================== */

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

  /* 1. Sekwencja hero: ramka rysuje się -> zdjęcie osiada -> tekst wchodzi. Tylko z JS (klasa .js). */
  .js .hero__frame rect { stroke-dashoffset: 1; animation: hero-frame 1.8s var(--ease-out) .25s forwards; }
  .js .hero__media { animation: hero-settle 7s var(--ease) both; }
  .js .hero__title, .js .hero__subtitle, .js .hero__cta { opacity: 0; animation: fade-up 1.1s var(--ease-out) forwards; }
  .js .hero__title { animation-delay: .9s; }
  .js .hero__subtitle { animation-delay: 1.15s; }
  .js .hero__cta { animation-delay: 1.4s; }

  /* 2. Nagłówek: przezroczysty nad hero, solidny po przewinięciu. Natywnie przez scroll-driven animations;
        w starszych przeglądarkach app.js dokłada klasę .is-scrolled. */
  @supports (animation-timeline: scroll()) {
    [data-header="transparent"] .site-header {
      animation: header-solidify linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 180px;
      transition: none;
    }
    /* Hero: zdjęcie przesuwa się wolniej niż treść (paralaksa) — na dziecku, bo rodzic ma animację „osiadania”. */
    .hero__media > * { animation: hero-parallax linear both; animation-timeline: scroll(root block); animation-range: 0px 100vh; }
    /* Zdjęcia w ramce: lekko „osiadają” w kadrze, gdy wchodzą w ekran. */
    .media--framed > img, .media--framed > svg { animation: media-enter linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    /* Złota linia sekcji rysuje się od lewej, gdy sekcja wchodzi w ekran — ten sam motyw co ramka w hero. */
    .rule { animation: rule-draw linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    /* Separator: obie połówki rysują się od rombu na zewnątrz, romb pojawia się pierwszy. */
    .ornament::before, .ornament::after { animation: rule-draw linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .ornament__mark { animation: mark-in linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    /* Segmenty linii procesu rysują się, gdy krok wchodzi w ekran. */
    .step::before { animation: rule-draw-y linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @media (min-width: 900px) { .step::before { animation-name: rule-draw; } }
  }

  /* 6. Proces: złota smuga przebiega segment po segmencie (2 s na krok, pętla 8 s) i zapala numer kroku,
        do którego właśnie wskakuje. Działa tylko, gdy sekcja jest w kadrze (klasa .is-inview z app.js). */
  .step::after { animation: streak-y 8s linear infinite paused; animation-delay: calc(var(--i, 0) * 2s); }
  .step__num { animation: num-pulse 8s var(--ease) infinite paused; animation-delay: calc(var(--i, 0) * 2s); }
  @media (min-width: 900px) { .step::after { animation-name: streak-x; } }
  .process.is-inview .step::after, .process.is-inview .step__num { animation-play-state: running; }

  /* 3. Menu mobilne: pozycje wchodzą kaskadą (odpowiedź na kliknięcie). */
  .mobile-nav li { animation: fade-up .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }

  /* 4. Punktowe ujawnianie — do użycia świadomie w wybranych miejscach (np. jedna sekcja na stronie), nie wszędzie. */
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
  .js .reveal.is-visible { opacity: 1; transform: none; }

  /* 5. Przejścia między podstronami: krótki crossfade. */
  ::view-transition-old(root) { animation: vt-out .28s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in .4s var(--ease-out) both; }
}

@keyframes hero-frame { to { stroke-dashoffset: 0; } }
@keyframes hero-parallax { to { transform: translateY(12%); } }
@keyframes media-enter { from { transform: scale(1.08); } to { transform: none; } }
@keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mark-in { from { opacity: 0; transform: rotate(45deg) scale(.4); } to { opacity: 1; transform: rotate(45deg) scale(1); } }
@keyframes rule-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* smuga: 34% długości segmentu, przejazd od -100% do końca segmentu (100/34 ≈ 294%) + lekko w przerwę */
@keyframes streak-x { 0% { transform: translateX(-40%); opacity: 0; } 3% { opacity: 1; } 22% { opacity: 1; } 25%, 100% { transform: translateX(340%); opacity: 0; } }
@keyframes streak-y { 0% { transform: translateY(-40%); opacity: 0; } 3% { opacity: 1; } 22% { opacity: 1; } 25%, 100% { transform: translateY(340%); opacity: 0; } }
@keyframes num-pulse { 0%, 100% { color: var(--accent); text-shadow: none; } 4% { color: var(--c-cream-100); text-shadow: 0 0 14px rgba(201, 169, 110, .85); } 26% { color: var(--accent); text-shadow: none; } }
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes header-solidify {
  from { background-color: rgba(44, 24, 16, 0); border-color: rgba(201, 169, 110, 0); }
  to   { background-color: rgba(44, 24, 16, .97); border-color: rgba(201, 169, 110, .22); }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}