/* =============================================================================
   home.css — sekcje strony głównej (hero-slider, sceny SVG, kafle kategorii, o firmie, USP, blog).
   Ładowany tylko na stronie głównej. Wszystkie wartości wizualne przez tokeny z tokens.css.
   Zasada ruchu: animacje sceny/tekstu działają tylko pod .hero.is-ready (JS dodaje po window.load),
   więc pierwsze malowanie (LCP) jest statyczne i kompletne.
   ============================================================================= */

/* ---- Hero: szkielet slidera ------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; padding-block: 0; /* padding z main.css zerowany — wysokość dają slajdy */
  background: linear-gradient(135deg, var(--color-paper) 0%, var(--color-bg) 55%, var(--color-beige) 100%);
}
.hero::after { content: none; }
.hero__track { display: grid; }
.hero-slide {
  grid-area: 1 / 1; position: relative;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.7s ease, visibility 0s; z-index: 1; }
.hero-slide__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: var(--space-6); min-height: var(--hero-min-height);
  padding-block: clamp(var(--space-7), 8vw, var(--space-9)) clamp(var(--space-8), 10vw, calc(var(--space-9) + var(--space-4)));
}
.hero-slide__content { position: relative; z-index: 2; max-width: 600px; }
.hero-slide__eyebrow { display: inline-block; }
.hero-slide__title { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-stretch: var(--font-heading-stretch); font-size: var(--text-4xl); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); margin: 0 0 var(--space-4); text-wrap: balance; }
.hero-slide__text { font-size: var(--text-xl); color: var(--color-text-muted); max-width: 44ch; margin: 0 0 var(--space-6); }
.hero-slide__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-slide__scene { position: relative; z-index: 1; }
.hero-slide__scene .scene { width: 100%; height: auto; max-height: calc(var(--hero-min-height) - var(--space-8)); margin-inline: auto; }

/* Wejście tekstu (sekwencyjne) — nie dla slajdu początkowego (LCP), tylko po zmianie slajdu */
@keyframes hero-rise { from { opacity: 0; transform: translate3d(-18px, 10px, 0); } to { opacity: 1; transform: none; } }
.hero.is-ready .hero-slide.is-active:not(.is-initial) .hero-slide__eyebrow,
.hero.is-ready .hero-slide.is-active:not(.is-initial) .hero-slide__title,
.hero.is-ready .hero-slide.is-active:not(.is-initial) .hero-slide__text,
.hero.is-ready .hero-slide.is-active:not(.is-initial) .hero-slide__actions { animation: hero-rise 0.7s var(--motion-ease) both; }
.hero.is-ready .hero-slide.is-active:not(.is-initial) .hero-slide__title   { animation-delay: 0.12s; }
.hero.is-ready .hero-slide.is-active:not(.is-initial) .hero-slide__text    { animation-delay: 0.24s; }
.hero.is-ready .hero-slide.is-active:not(.is-initial) .hero-slide__actions { animation-delay: 0.36s; }

/* ---- Hero: sterowanie -------------------------------------------------------- */
.hero__controls {
  position: absolute; left: 0; right: 0; bottom: var(--space-5); z-index: 3;
  display: flex; align-items: center; gap: var(--space-4); pointer-events: none;
}
.hero__controls > * { pointer-events: auto; }
/* kropki: wizualnie 12 px, ale przycisk ma 32 px pola dotyku (padding); kolor kropki i pasek postępu w ::before/.hero-dots__progress */
.hero-dots { display: flex; align-items: center; gap: 0; }
.hero-dots__dot {
  --hero-dot-pad: 10px; --hero-dot-bg: color-mix(in srgb, var(--color-brown) 28%, transparent);
  position: relative; width: 32px; height: 32px; padding: var(--hero-dot-pad); border: 0; cursor: pointer;
  border-radius: var(--radius-pill); background: transparent;
  transition: width 0.35s var(--motion-ease);
}
.hero-dots__dot::before { content: ""; position: absolute; inset: var(--hero-dot-pad); border-radius: var(--radius-pill); background: var(--hero-dot-bg); transition: background var(--transition); }
.hero-dots__dot:hover { --hero-dot-bg: color-mix(in srgb, var(--color-brown) 50%, transparent); }
.hero-dots__dot[aria-selected="true"] { --hero-dot-bg: color-mix(in srgb, var(--color-brown) 22%, transparent); width: 68px; }
.hero-dots__progress { display: none; position: absolute; inset: var(--hero-dot-pad); border-radius: var(--radius-pill); overflow: hidden; }
.hero-dots__progress::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--hero-progress, 0) * 100%); background: var(--color-brown); border-radius: inherit; }
.hero-dots__dot[aria-selected="true"] .hero-dots__progress { display: block; }
.hero.is-paused .hero-dots__progress { opacity: 0.55; }

.hero-ctrl, .hero-arrow {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--color-brown) 30%, transparent); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent); color: var(--color-brown);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.hero-ctrl:hover, .hero-arrow:hover { background: var(--color-brown); border-color: var(--color-brown); color: var(--color-on-primary); }
.hero-ctrl { width: 32px; height: 32px; padding: 0; }
.hero-ctrl svg { width: 14px; height: 14px; }
.hero-ctrl__play { display: none; }
.hero-ctrl[aria-pressed="true"] .hero-ctrl__pause { display: none; }
.hero-ctrl[aria-pressed="true"] .hero-ctrl__play { display: block; }
/* Strzałki: na szerokich ekranach po bokach (poza treścią), poniżej 1400 px w prawym dolnym rogu obok kropek */
.hero-arrow { position: absolute; z-index: 3; width: 44px; height: 44px; padding: 0; bottom: calc(var(--space-5) - 6px); }
.hero-arrow svg { width: 22px; height: 22px; }
.hero-arrow--prev { right: calc(var(--gutter) + 52px); }
.hero-arrow--next { right: var(--gutter); }
@media (min-width: 1400px) {
  .hero-arrow { top: 50%; bottom: auto; width: 48px; height: 48px; transform: translateY(-50%); }
  .hero-arrow--prev { left: calc((100vw - var(--container-wide)) / 2 - var(--space-4)); right: auto; }
  .hero-arrow--next { right: calc((100vw - var(--container-wide)) / 2 - var(--space-4)); }
  .hero-arrow:hover { transform: translateY(-50%) scale(1.05); }
}
.hero.is-reduced .hero-ctrl--toggle { display: none; }

/* ---- Hero: wariant „photo” (zdjęcia + Ken Burns) ----------------------------- */
.hero--photo { background: var(--color-text); }
.hero--photo .hero-slide__media { position: absolute; inset: 0; overflow: hidden; }
.hero--photo .hero-slide__media::after { content: ""; position: absolute; inset: 0; background: var(--hero-overlay); }
.hero--photo .hero-slide__img, .hero--photo .hero-slide__placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; will-change: transform; }
.hero--photo .hero-slide__placeholder { background: var(--hero-photo-fallback-1); }
.hero--photo .hero-slide--2 .hero-slide__placeholder { background: var(--hero-photo-fallback-2); }
.hero--photo .hero-slide--3 .hero-slide__placeholder { background: var(--hero-photo-fallback-3); }
/* delikatny wzór „tektury” na placeholderach, żeby ruch Ken Burns był widoczny bez zdjęcia */
.hero--photo .hero-slide__placeholder::before {
  content: ""; position: absolute; inset: -10%;
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--hero-text-on-photo) 8%, transparent) 0 2px, transparent 2px 46px),
                    repeating-linear-gradient(0deg, color-mix(in srgb, var(--hero-text-on-photo) 5%, transparent) 0 2px, transparent 2px 46px);
}
.hero--photo .hero-slide__inner { grid-template-columns: minmax(0, 1fr); }
.hero--photo .hero-slide__content { max-width: 640px; }
.hero--photo .hero-slide__title, .hero--photo .hero-slide__text { color: var(--hero-text-on-photo); }
.hero--photo .hero-slide__text { opacity: 0.88; }
.hero--photo .hero-slide__eyebrow { color: var(--color-kraft-light); }
.hero--photo .btn--outline { color: var(--hero-text-on-photo); border-color: var(--hero-text-on-photo); }
.hero--photo .btn--outline:hover { background: var(--hero-text-on-photo); color: var(--color-brown); }
.hero--photo .hero-dots__dot { --hero-dot-bg: color-mix(in srgb, var(--hero-text-on-photo) 40%, transparent); }
.hero--photo .hero-dots__dot:hover, .hero--photo .hero-dots__dot[aria-selected="true"] { --hero-dot-bg: color-mix(in srgb, var(--hero-text-on-photo) 30%, transparent); }
.hero--photo .hero-dots__progress { background: var(--hero-text-on-photo); }
.hero--photo .hero-ctrl, .hero--photo .hero-arrow { color: var(--hero-text-on-photo); border-color: color-mix(in srgb, var(--hero-text-on-photo) 45%, transparent); background: color-mix(in srgb, var(--color-text) 25%, transparent); }
.hero--photo .hero-ctrl:hover, .hero--photo .hero-arrow:hover { background: var(--hero-text-on-photo); border-color: var(--hero-text-on-photo); color: var(--color-brown); }

@keyframes kenburns-1 { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(1.5%, -1%, 0); } }
@keyframes kenburns-2 { from { transform: scale(1.12) translate3d(-2%, 0, 0); } to { transform: scale(1.02) translate3d(1%, 1%, 0); } }
@keyframes kenburns-3 { from { transform: scale(1.04) translate3d(2%, 1.5%, 0); } to { transform: scale(1.14) translate3d(-1%, -1%, 0); } }
.hero--photo.is-ready .hero-slide.is-active .hero-slide__img,
.hero--photo.is-ready .hero-slide.is-active .hero-slide__placeholder { animation: kenburns-1 calc(var(--hero-duration) + 3s) linear both; }
.hero--photo.is-ready .hero-slide--2.is-active .hero-slide__img,
.hero--photo.is-ready .hero-slide--2.is-active .hero-slide__placeholder { animation-name: kenburns-2; }
.hero--photo.is-ready .hero-slide--3.is-active .hero-slide__img,
.hero--photo.is-ready .hero-slide--3.is-active .hero-slide__placeholder { animation-name: kenburns-3; }

/* ---- Sceny SVG: paleta .sc-* jest w main.css (współdzielona z O firmie, Kontaktem i stopką) ---- */

/* Scena 1: koperta — klapy narysowane w pozycji złożonej, animacja od odbicia (arkusz rozłożony) */
.env-flap { transform-box: fill-box; }
.env-flap--bottom { transform-origin: 50% 100%; }
.env-flap--top    { transform-origin: 50% 0%; }
.env-flap--left   { transform-origin: 0% 50%; }
.env-flap--right  { transform-origin: 100% 50%; }
.env-seal { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes fold-y { from { transform: scaleY(-1); } 50% { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fold-x { from { transform: scaleX(-1); } 50% { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pop    { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.hero.is-ready .hero-slide.is-active .env-flap--bottom { animation: fold-y 0.8s cubic-bezier(0.45, 0, 0.35, 1) 0.5s both; }
.hero.is-ready .hero-slide.is-active .env-flap--left   { animation: fold-x 0.8s cubic-bezier(0.45, 0, 0.35, 1) 1.2s both; }
.hero.is-ready .hero-slide.is-active .env-flap--right  { animation: fold-x 0.8s cubic-bezier(0.45, 0, 0.35, 1) 1.8s both; }
.hero.is-ready .hero-slide.is-active .env-flap--top    { animation: fold-y 0.9s cubic-bezier(0.45, 0, 0.35, 1) 2.5s both; }
.hero.is-ready .hero-slide.is-active .env-seal         { animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 3.4s both; }
.hero.is-ready .hero-slide.is-active .env-shadow       { animation: fade-in 1s ease 0.2s both; }

/* Scena 2: kartony — trzy warstwy wchodzą kolejno, potem parallax od kursora (--hero-px/--hero-py z JS) i lekkie kołysanie */
@keyframes rise-in { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.bx-layer--back .bx { opacity: 0.62; }
.bx-parallax { transform: translate(calc(var(--hero-px, 0) * var(--depth, 0) * 1px), calc(var(--hero-py, 0) * var(--depth, 0) * 0.55px)); transition: transform 0.7s var(--motion-ease); }
.bx-layer--back  .bx-parallax { --depth: -9; }
.bx-layer--mid   .bx-parallax { --depth: 9; }
.bx-layer--front .bx-parallax { --depth: 24; }
.hero.is-ready .hero-slide.is-active .bx-layer--back  { animation: rise-in 0.9s var(--motion-ease) 0.15s both, float 7.5s ease-in-out 1.2s infinite; }
.hero.is-ready .hero-slide.is-active .bx-layer--mid   { animation: rise-in 0.9s var(--motion-ease) 0.40s both, float 6.5s ease-in-out 1.4s infinite; }
.hero.is-ready .hero-slide.is-active .bx-layer--front { animation: rise-in 0.9s var(--motion-ease) 0.65s both, float 5.5s ease-in-out 1.6s infinite; }

/* Scena 3: taśma — ścieżka „rysuje się” (pathLength=1), dyspenser jedzie w tym samym tempie, potem unosi się */
.tp-tape { fill: none; stroke: var(--color-brown); stroke-width: 18; opacity: 0.6; stroke-linecap: butt; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tp-dispenser { transform: translate(395px, 249px); }
.tp-dispenser__body { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes tape-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tape-move { from { transform: translate(205px, 151px); } to { transform: translate(395px, 249px); } }
@keyframes tape-drop { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tape-lift { to { opacity: 0; transform: translateY(-40px); } }
.hero.is-ready .hero-slide.is-active .tp-tape           { animation: tape-draw 2.2s cubic-bezier(0.45, 0, 0.55, 1) 0.7s both; }
.hero.is-ready .hero-slide.is-active .tp-dispenser      { animation: tape-move 2.2s cubic-bezier(0.45, 0, 0.55, 1) 0.7s both; }
.hero.is-ready .hero-slide.is-active .tp-dispenser__body { animation: tape-drop 0.5s var(--motion-ease) 0.1s both, tape-lift 0.6s ease-in 3.2s forwards; }

/* ---- Kafle kategorii: komponent .cat-grid/.cat-tile jest w main.css (współdzielony ze sklepem) ---- */
.home-categories .section__header { margin-bottom: var(--space-6); }

/* ---- O firmie ----------------------------------------------------------------- */
.home-about__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(var(--space-6), 6vw, var(--space-9)); align-items: center; }
.home-about__media { margin: 0; position: relative; }
.home-about__media::before { content: ""; position: absolute; inset: var(--space-4) auto auto var(--space-4); right: calc(-1 * var(--space-4)); bottom: calc(-1 * var(--space-4)); border: 2px solid var(--color-kraft-light); border-radius: var(--radius-lg); opacity: 0.6; pointer-events: none; }
.home-about__img, .home-about__placeholder { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 560px; object-fit: cover; border-radius: var(--radius-lg); }
.home-about__placeholder { height: auto; }
.home-about__body h2 { margin-bottom: var(--space-5); }
.home-about__text { font-size: var(--text-lg); }
.home-about__text p { margin-bottom: var(--space-4); }
.home-about__actions { margin-top: var(--space-6); }

/* ---- USP ------------------------------------------------------------------------- */
.home-usp { padding-block: var(--space-7); }
.home-usp__title { font-size: var(--text-2xl); text-align: center; margin-bottom: var(--space-6); }
.usp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5) var(--space-6); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.usp-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.usp-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.usp { display: flex; gap: var(--space-4); align-items: flex-start; }
.usp__icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-brown); }
.usp__icon svg { width: 26px; height: 26px; }
.usp__title { display: block; font-family: var(--font-heading); font-weight: var(--font-weight-semibold); font-size: var(--text-base); margin-bottom: var(--space-1); }
.usp__text { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---- Blog ------------------------------------------------------------------------ */
.section__header--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.section__header--split h2 { margin-bottom: 0; }
.post-list--home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post-list--home .post-card:not(.has-post-thumbnail) .post-card__body { border-top: 4px solid var(--color-kraft); }
.post-list--home .post-card__title { font-size: var(--text-lg); }

/* ---- Responsywność ------------------------------------------------------------ */
@media (max-width: 899px) {
  .hero-slide__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-content: center; padding-bottom: calc(var(--space-8) + var(--space-5)); }
  .hero-slide__scene { order: -1; }
  .hero-slide__scene .scene { max-height: 40vh; max-width: 520px; }
  .hero-slide__text { font-size: var(--text-lg); }
  .hero-arrow { width: 40px; height: 40px; bottom: calc(var(--space-5) - 4px); }
  .hero-arrow--prev { right: calc(var(--gutter) + 48px); }
  .home-about__inner { grid-template-columns: minmax(0, 1fr); }
  .home-about__media { max-width: 420px; }
  .usp-list, .usp-list--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-list--home { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 599px) {
  .usp-list, .usp-list--3, .usp-list--2 { grid-template-columns: minmax(0, 1fr); }
  .hero-slide__title { font-size: var(--text-3xl); }
  .hero-slide__actions .btn--lg { font-size: var(--text-sm); padding: 0.9em 1.4em; }
}

/* ---- Redukcja ruchu: statyczny slajd, bez animacji scen i Ken Burns -------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide.is-active { transition: none; }
  .hero .scene *, .hero .hero-slide__img, .hero .hero-slide__placeholder,
  .hero .hero-slide__eyebrow, .hero .hero-slide__title, .hero .hero-slide__text, .hero .hero-slide__actions { animation: none !important; }
  .bx-parallax { transform: none !important; transition: none; }
  .hero-dots__dot { transition: none; }
}