/* TASMA: pozioma taśma kadrów 4:5 + wideo 9:16 na product page (19.09.2026).
   Markup z pg-render.php (habTasmaHtml), assety img/catalog/tasma-20260919/, wideo Bunny (field-video.js). */
.tasma { --tasma-h: clamp(440px, 66vh, 760px); --tasma-gap: 14px; --tasma-pad: max(48px, calc((100vw - 1120px) / 2)); padding: 8px 0 120px; overflow: hidden; }
.tasma-title { margin: 0 0 40px; padding: 0 var(--tasma-pad); font-size: clamp(24px, 2.9vw, 38px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }
.tasma-strip { display: flex; gap: var(--tasma-gap); margin: 0; padding: 24px var(--tasma-pad) 12px; margin-top: -24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: var(--tasma-pad); scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; }
.tasma-strip::-webkit-scrollbar { display: none; }
.tasma-strip.is-drag { cursor: grabbing; scroll-snap-type: none; }
.tasma-strip.is-drag * { pointer-events: none; }
/* szerokości jawnie z wysokości (Safari źle liczy flex-item z aspect-ratio w dziecku: dziury między kadrami) */
/* asymetria: każdy kadr ma własną skalę (--k) i własne wyrównanie w pionie; wysokość = --tasma-h * --k */
.tasma-strip { align-items: center; min-height: calc(var(--tasma-h) + 64px); }
.tasma-item { --k: 1; position: relative; flex: 0 0 auto; margin: 0; width: calc(var(--tasma-h) * var(--k) * 0.8); scroll-snap-align: start; }
.tasma-item.is-video { width: calc(var(--tasma-h) * var(--k) * 0.5625); }
.tasma-item.is-video.is-4x5 { width: calc(var(--tasma-h) * var(--k) * 0.8); }   /* pętla w kadrze zdjęć (BASE + SNAP) */
.tasma-item:nth-child(1) { --k: 1; align-self: flex-start; }
.tasma-item:nth-child(2) { --k: .84; align-self: flex-end; }
.tasma-item:nth-child(3) { --k: .7; align-self: center; }
.tasma-item:nth-child(4) { --k: .8; align-self: flex-end; }
.tasma-item:nth-child(5) { --k: .92; align-self: flex-start; }
.tasma-item:nth-child(6) { --k: .86; align-self: center; }
.tasma-frame { position: relative; display: block; width: 100%; height: calc(var(--tasma-h) * var(--k)); overflow: hidden; border-radius: 20px; background: #101010; transform: translate3d(0,0,0) scale(var(--s, 1)); transition: transform .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1); filter: brightness(var(--b, 1)); will-change: transform; }
/* zanurzenie za kursorem: obraz w ramce przesuwa się i lekko powiększa (tasma.js liczy --mx/--my), ramka pod kursorem rośnie, reszta przygasa */
.tasma-frame img, .tasma-frame video { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1.08); transition: transform .9s cubic-bezier(.16,1,.3,1); }
.tasma-frame img, .tasma-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tasma-frame .field-film-poster { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.has-video-frame .field-film-poster { visibility: hidden; }
.tasma-item figcaption { margin: 14px 2px 0; font-size: 13px; font-weight: 400; letter-spacing: .01em; color: var(--text-secondary); }
/* Home: podpis kafla to link do product page, a jego ::after rozciąga klik na cały kafel (obraz + podpis).
   Nie owijamy figure w <a>: kafel z filmem ma w sobie <button> (Odtwórz/Pauza), a przycisk w linku to niepoprawny HTML.
   Ramka leży NAD nakładką, ale przepuszcza klik (pointer-events: none), więc klik w obraz/film trafia w link,
   a przycisk filmu łapie klik sam. :has = tylko kafle z linkiem (product pages bez zmian). */
.tasma-link { color: inherit; text-decoration: none; -webkit-user-drag: none; }
.tasma-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 20px; cursor: pointer; }
.tasma-item:has(.tasma-link) .tasma-frame { z-index: 2; pointer-events: none; }
.tasma-item:has(.tasma-link) .tasma-frame button { pointer-events: auto; }
.tasma-item:hover .tasma-link, .tasma-link:focus-visible { color: var(--text-primary); }
.tasma-link:focus-visible { outline: none; }
.tasma-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 4px; }
.tasma-item button { position: absolute; z-index: 2; right: 12px; bottom: 12px; min-height: 40px; padding: 8px 14px; border: 1px solid #fff5; border-radius: 999px; color: #fff; background: #171a19c0; font: inherit; font-size: 12px; cursor: pointer; opacity: 0; transition: opacity .25s; }
.tasma-item button[hidden] { display: none; }
.tasma-item:hover button, .tasma-item button:focus-visible { opacity: 1; }
.tasma-strip:focus-visible, .tasma-item button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@supports (corner-shape: superellipse(0.585)) { .tasma-frame { corner-shape: superellipse(0.585); } }
/* jeden autorski moment: kadry wjeżdżają z prawej, każdy z opóźnieniem; fade-in.visible dokłada JS strony */
.tasma.fade-in { transform: none; }
.tasma .tasma-item { opacity: 0; transform: translateX(56px); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.tasma.visible .tasma-item { opacity: 1; transform: none; }
.tasma.visible .tasma-item:nth-child(2) { transition-delay: .08s; }
.tasma.visible .tasma-item:nth-child(3) { transition-delay: .16s; }
.tasma.visible .tasma-item:nth-child(4) { transition-delay: .24s; }
.tasma.visible .tasma-item:nth-child(5) { transition-delay: .32s; }
.tasma.visible .tasma-item:nth-child(6) { transition-delay: .40s; }
/* snap tylko dla dotyku: na kółku myszy w Safari szarpie */
@media (pointer: coarse) { .tasma-strip { scroll-snap-type: x mandatory; } }
@media (prefers-reduced-motion: reduce) { .tasma .tasma-item { opacity: 1; transform: none; transition: none; } }
@media (max-width: 900px) {
  .tasma { --tasma-h: clamp(340px, 48vh, 420px); --tasma-pad: 24px; --tasma-gap: 10px; padding-bottom: 80px; }
  .tasma-title { margin-bottom: 28px; }
  .tasma-strip { cursor: auto; min-height: 0; }
  .tasma-item, .tasma-item:nth-child(n) { --k: 1; align-self: flex-start; }
  .tasma-frame img, .tasma-frame video { transform: none; }
  .tasma-item button { opacity: 1; }
}

/* ── Kafle /modules/ (kadr z tasma.json, 4:5) i /sets/: to samo zanurzenie co taśma ── */
.module-card-media.has-tasma, .module-card-tile.has-tasma { aspect-ratio: 4 / 5; background: #101010; }
.module-card-media.has-tasma picture, .module-card-tile.has-tasma picture { display: block; width: 100%; height: 100%; }
.module-card .module-card-media.has-tasma img, .module-card .module-card-tile.has-tasma img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1.08); transition: transform .9s cubic-bezier(.16,1,.3,1); }
.module-card-media.has-tasma, .module-card-tile.has-tasma, .zb-tile.has-photo .zb-media, .ritual-col { transition: filter .9s cubic-bezier(.16,1,.3,1); filter: brightness(var(--b, 1)); }
.zb-tile.has-photo .zb-media img, .zb-active:hover .zb-media img { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1.08); transition: transform .9s cubic-bezier(.16,1,.3,1); }
/* homepage Ritual: dwie kolumny zdjęć, ta sama fala */
.ritual-col img { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1.08); transition: transform .9s cubic-bezier(.16,1,.3,1); }
/* taśma na homepage: ścieżki bez ../, sekcja w rytmie strony */
.tasma.section-dark { padding-top: 96px; }
@media (pointer: coarse) { .ritual-col img, .module-card .module-card-tile.has-tasma img, .module-card .module-card-media.has-tasma img, .zb-tile.has-photo .zb-media img { transform: none; } }