/* =========================================================================
   teenage engineering — ruch
   Dwie warstwy:
   1) REVEAL  — dyskretne wejścia, wyzwalane przez IntersectionObserver (.is-in),
                ze stagger'em przez zmienną --i. Działa wszędzie.
   2) SCROLL  — efekty ciągłe (parallax, wygaszanie hero, dryf paska PO)
                na natywnych osiach czasu: animation-timeline: view()/scroll().
                Tam gdzie brak wsparcia, po prostu ich nie ma — layout bez zmian.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. REVEAL
   ------------------------------------------------------------------------- */

@keyframes anim-up {
  from { opacity: 0; transform: translateY(28px); filter: blur(8px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}

@keyframes anim-clip {
  from { opacity: 0; clip-path: inset(0 0 110% 0); transform: translateY(16px); }
  to   { opacity: 1; clip-path: inset(0 0 -20% 0); transform: none; }
}

@keyframes anim-rule {
  from { opacity: 1; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}

@keyframes anim-rule-x {
  from { opacity: 1; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

@keyframes anim-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* kadr obrazu odsłaniany od dołu — "wipe" */
@keyframes anim-wipe {
  from { opacity: 1; clip-path: inset(100% 0 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}


[data-anim] { --i: 0; --anim-name: anim-up; --anim-dur: .9s; }

[data-anim="clip"]   { --anim-name: anim-clip;   --anim-dur: 1s; }
[data-anim="rule"]   { --anim-name: anim-rule;   --anim-dur: 1.1s; }
[data-anim="rule-x"] { --anim-name: anim-rule-x; --anim-dur: 1.1s; }
[data-anim="fade"]   { --anim-name: anim-fade;   --anim-dur: 1.2s; }
[data-anim="wipe"]   { --anim-name: anim-wipe;   --anim-dur: 1.2s; }

.js [data-anim] { opacity: 0; }

.js [data-anim].is-in {
  animation: var(--anim-name) var(--anim-dur) var(--ease) both;
  animation-delay: calc(var(--i) * 70ms);
}

/* --- rozruch nagłówka: znaki przelatują przez losowe glify --- */

@keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* nagłówek jest widoczny od razu — treść podmienia JS znak po znaku */
.js .h1[data-scramble] { opacity: 1; }

.h1[data-scramble] { position: relative; }
.h1[data-scramble].is-booting::after {
  content: "▌";
  position: absolute;
  top: 0;
  /* przy zawiniętym nagłówku (mobile) karetka zatrzymuje się na krawędzi bloku */
  left: min(calc(var(--lock, 0) * 1ch), 100%);
  color: var(--accent);
  animation: caret-blink .42s steps(1, end) infinite;
}

/* migoczące glify są odrobinę przygaszone, żeby oko szło za tym,
   co już „zaskoczyło" */
.h1[data-scramble].is-booting { color: color-mix(in srgb, currentColor 82%, transparent); }

/* -------------------------------------------------------------------------
   2. SCROLL — osie czasu powiązane z przewijaniem
   ------------------------------------------------------------------------- */

@keyframes parallax-y {
  from { transform: translateY(-5%) scale(1.11); }
  to   { transform: translateY(5%)  scale(1.11); }
}

@keyframes parallax-y-soft {
  from { transform: translateY(-3.5%) scale(1.08); }
  to   { transform: translateY(3.5%)  scale(1.08); }
}

@keyframes parallax-x {
  from { transform: translateX(-3.5%) scale(1.07); }
  to   { transform: translateX(3.5%)  scale(1.07); }
}

@keyframes hero-out {
  from { opacity: 1; transform: translateY(0);     filter: blur(0); }
  to   { opacity: 0; transform: translateY(-80px); filter: blur(7px); }
}

@keyframes progress-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    [data-parallax] {
      animation: parallax-y linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }

    [data-parallax="soft"] { animation-name: parallax-y-soft; }
    [data-parallax="x"]    { animation-name: parallax-x; }

    /* hero: treść odjeżdża i rozmywa się dopiero przy wyjściu z kadru,
       dzięki czemu w spoczynku wygląda dokładnie jak w Figmie */
    .hero .pitch {
      animation: hero-out linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 90%;
    }

    /* pasek postępu strony */
    .progress span {
      animation: progress-grow linear both;
      animation-timeline: scroll(root);
    }
  }
}

/* -------------------------------------------------------------------------
   2b. Reflektor za kursorem
   ------------------------------------------------------------------------- */

.spotlight {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s var(--ease);
  mix-blend-mode: plus-lighter;
  background: radial-gradient(
    320px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    color-mix(in srgb, var(--accent) 26%, transparent),
    transparent 70%);
}
[data-spot="on"] .spotlight { opacity: 1; }

@media (pointer: coarse) {
  .spotlight { display: none; }
}

/* -------------------------------------------------------------------------
   3. Pasek postępu
   ------------------------------------------------------------------------- */

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  height: 1px;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: background-color .5s var(--ease);
}

/* -------------------------------------------------------------------------
   4. Choreografia menu
   ------------------------------------------------------------------------- */

.menu > * {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity .5s var(--ease),
    transform .6s var(--ease),
    filter .5s var(--ease);
}
.menu[data-open="true"] > * {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition-delay: calc(var(--i, 0) * 45ms + 80ms);
}

/* hamburger → krzyżyk */
.nav__burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(13px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-13px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   5. Mikrointerakcje
   ------------------------------------------------------------------------- */

/* kreska pod "explore" wydłuża się przy najechaniu na cały blok */
.pitch__rule { transition: height .5s var(--ease); }
.pitch:hover .pitch__rule { height: calc(var(--rule) + 24px); }
.po .pitch:hover .pitch__rule { height: min(500px, 58svh); }

/* obraz produktu lekko podjeżdża pod kursorem */
.mixer__product img,
.duo__half img { transition: transform .8s var(--ease); }
.mixer__product:hover img { transform: scale(1.04); }
.duo__half:hover img { transform: scale(1.05); }

/* -------------------------------------------------------------------------
   6. Przejścia między stronami (View Transitions API)
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-out .35s var(--ease-io) both;
  }
  ::view-transition-new(root) {
    animation: vt-in .45s var(--ease-io) both;
  }
}

@keyframes vt-out {
  to { opacity: 0; transform: scale(.985); filter: blur(4px); }
}
@keyframes vt-in {
  from { opacity: 0; transform: scale(1.015); filter: blur(4px); }
}

/* -------------------------------------------------------------------------
   7. Szacunek dla ustawień systemowych
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-anim] { opacity: 1 !important; }
  .h1[data-scramble].is-booting::after { content: none; }
  .spotlight { display: none; }
  .progress { display: none; }
}