/* css/dom.css: home page only (body.strona-glowna). Owned by the home-story session, see DESIGN.md "Home story".
   Light theme only. Opacity and transform only, no layout shift; everything motion-related is
   switched off under prefers-reduced-motion. */

/* 1. Entrance: photo settles from 1.04 to 1, text lines rise in one after another */
@keyframes dom-osiadanie { from { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes dom-wzniesienie { from { opacity: 0; transform: translate3d(0, 1.1em, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .strona-glowna .dom-hero-obraz img { animation: dom-osiadanie 1.2s cubic-bezier(.2, .6, .2, 1) both; }
  .strona-glowna .dom-hero-tekst .kicker,
  .strona-glowna .dom-hero h1,
  .strona-glowna .dom-hero .h1-dopisek,
  .strona-glowna .dom-hero-tekst .link-wiecej { animation: dom-wzniesienie 1s var(--ruch) both; }
  .strona-glowna .dom-hero-tekst .kicker { animation-delay: .25s; }
  .strona-glowna .dom-hero h1 { animation-delay: .45s; }
  .strona-glowna .dom-hero .h1-dopisek { animation-delay: .75s; }
  .strona-glowna .dom-hero-tekst .link-wiecej { animation-delay: 1.05s; display: inline-block; }
}

/* 2. "Jeden dzień": six full-bleed frames stacking with position: sticky */
/* body has overflow-x: hidden in styl.css, which makes it a scroll container and would keep the
   frames from sticking; clip keeps the horizontal lock without creating a scroll container. */
.strona-glowna { overflow-x: clip; }
.dom-historia { margin-top: clamp(5rem, 10vw, 9rem); background: #1E1A17; color: #fff; }
.hist-tytul { position: relative; z-index: 2; width: min(100% - 2 * var(--margines), var(--szer-tresci)); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3.5rem); }
.hist-tytul .kicker { color: #fff; letter-spacing: 0.3em; font-weight: 500; margin: 0 0 1rem; opacity: .8; }
.hist-tytul h2 { color: #fff; font-weight: 300; font-size: clamp(2.2rem, 1.4rem + 2.8vw, 4.2rem); line-height: 1; letter-spacing: -0.025em; margin: 0; max-width: 18ch; }
.hist-kadr { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 520px; margin: 0; overflow: hidden; background: #1E1A17; }
.hist-obraz { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hist-kadr::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20,16,14,.18) 0%, rgba(20,16,14,0) 30%, rgba(20,16,14,0) 48%, rgba(20,16,14,.72) 100%); }
.hist-podpis { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(2.2rem, 7vh, 5rem); width: min(100% - 2 * var(--margines), var(--szer-tresci)); margin: 0 auto; text-shadow: 0 1px 18px rgba(0,0,0,.22); }
.hist-podpis p { margin: 0; }
.hist-kicker { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.2rem; }
.hist-kicker::after { content: ""; flex: 0 0 3rem; height: 1px; background: currentColor; opacity: .7; }
.hist-wartosc { font-family: var(--font-naglowek); font-weight: 300; line-height: .9; letter-spacing: -0.04em; }
.hist-liczba { display: block; font-size: clamp(4.6rem, 2rem + 10vw, 11rem); font-variant-numeric: lining-nums tabular-nums; }
.hist-jednostka { display: block; font-family: var(--font-tekst); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.6; margin-top: 0.9rem; max-width: 34ch; opacity: .9; }
.hist-zdanie { font-family: var(--font-naglowek); font-style: italic; font-size: clamp(1.25rem, 1rem + 1vw, 2rem); line-height: 1.25; max-width: 30ch; margin-top: 1.4rem; }
.hist-ilustracja { position: absolute; right: 0; bottom: -1.6rem; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.62); }
@media (max-width: 900px) {
  .hist-podpis { bottom: 2.4rem; }
  .hist-ilustracja { bottom: -1.5rem; }
}
/* the caption fades and lifts in when the frame is in view (class set by js/dom.js) */
@media (prefers-reduced-motion: no-preference) {
  .hist-podpis > * { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .9s var(--ruch), transform .9s var(--ruch); }
  .hist-kadr.w-kadrze .hist-podpis > * { opacity: 1; transform: none; }
  .hist-kadr.w-kadrze .hist-wartosc { transition-delay: .1s; }
  .hist-kadr.w-kadrze .hist-zdanie { transition-delay: .25s; }
  .hist-kadr.w-kadrze .hist-ilustracja { transition-delay: .4s; }
  .hist-obraz { transform: scale(1.06); transition: transform 2.4s cubic-bezier(.2, .6, .2, 1); }
  .hist-kadr.w-kadrze .hist-obraz { transform: scale(1); }
}

/* 3. Finale: one sentence, three entry links, larger than anything else on the page */
.dom-final { margin-top: clamp(5rem, 10vw, 9rem); border-top: 1px solid var(--tekst); padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(2rem, 5vw, 4rem); }
.dom-final > * { width: min(100% - 2 * var(--margines), var(--szer-tresci)); margin-inline: auto; }
.final-zdanie { font-family: var(--font-naglowek); font-weight: 300; font-style: italic; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem); line-height: 1.25; max-width: 30ch; margin: 0 0 clamp(2.5rem, 6vw, 5rem); }
.final-linki { display: flex; flex-direction: column; }
.final-linki a { position: relative; display: block; font-family: var(--font-naglowek); font-weight: 300; font-size: clamp(3.3rem, 1.6rem + 7.8vw, 11.5rem); line-height: .96; letter-spacing: -0.035em; color: var(--tekst); text-decoration: none; padding: 0.12em 0 0.1em 0; border-top: 1px solid var(--wlos); transition: color .5s var(--ruch), padding-left .6s var(--ruch); }
.final-linki a:last-child { border-bottom: 1px solid var(--wlos); }
.final-nr { position: absolute; top: 0.9em; left: 0; font: 500 0.7rem/1 var(--font-tekst); letter-spacing: 0.22em; color: var(--akcent); margin-top: 0.4rem; }
.final-linki a { padding-left: 3.2rem; }
.final-linki a::after { content: ""; position: absolute; left: 3.2rem; right: 0; bottom: 0.08em; height: 1px; background: var(--akcent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ruch); }
.final-linki a:hover, .final-linki a:focus-visible { color: var(--akcent); padding-left: 3.8rem; }
.final-linki a:hover::after, .final-linki a:focus-visible::after { transform: scaleX(1); }
@media (max-width: 600px) { .final-linki a { padding-left: 2.4rem; } .final-linki a::after { left: 2.4rem; } .final-linki a:hover { padding-left: 2.8rem; } }

/* 4. Finish: film grain (CSS only, no clicks caught), index card hover states */
.strona-glowna::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .055; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23z)'/%3E%3C/svg%3E"); background-size: 180px 180px; }
.strona-glowna .indeks-poz .rama img { transition: transform 1s var(--ruch); }
.strona-glowna .indeks-poz:hover .rama img, .strona-glowna .indeks-poz a:hover .rama img { transform: scale(1.03); }
.strona-glowna .indeks-poz:hover h2 a { text-decoration: none; }
.strona-glowna .indeks-poz h2 a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 92%; transition: background-size .55s var(--ruch); }
.strona-glowna .indeks-poz:hover h2 a, .strona-glowna .indeks-poz h2 a:focus-visible { background-size: 100% 1px; }

/* reduced motion: everything static, nothing hidden */
@media (prefers-reduced-motion: reduce) {
  .strona-glowna .dom-hero-obraz img, .strona-glowna .dom-hero-tekst * { animation: none; }
  .hist-podpis > *, .hist-obraz, .final-linki a, .final-linki a::after, .strona-glowna .indeks-poz .rama img, .strona-glowna .indeks-poz h2 a { transition: none; }
  .hist-obraz, .strona-glowna .indeks-poz:hover .rama img { transform: none; }
  .final-linki a:hover { padding-left: 3.2rem; }
}