/* ════════════════════════════════════════════════════════════
   Pointech od środka — warstwa strony
   Link „Od środka" w nagłówku, kafelki rozbicia i blokada strony
   w trybie 3D. Sama scena ma własny arkusz (od-srodka-world.css),
   ładowany w Shadow DOM. Ładowane tylko na stronie głównej.
   ════════════════════════════════════════════════════════════ */

/* Stała rynna paska przewijania: blokada scrolla w trybie 3D
   nie zmienia szerokości strony, więc kafelki pasują 1:1. */
html { scrollbar-gutter: stable; }
html.pt-od-3d { overflow: hidden; }
html.pt-od-3d body > *:not(#pt-od-host):not(.pt-od-shatter) { visibility: hidden !important; }

/* ── link w nagłówku ─────────────────────────────────────────
   Ukryty, dopóki skrypt nie potwierdzi, że scena zadziała
   (html.pt-od-ready) — bez JS nikt nie widzi martwego przycisku. */
.pt-nav-3d { display: none; }
html.pt-od-ready .pt-nav-3d { display: inline-flex; }
.pt-nav-3d {
	align-items: center; gap: 9px;
	padding: 8px 12px 8px 10px;
	font-family: var(--font-mono); font-size: 11px; font-weight: 500;
	letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
	color: var(--pt-blue-700); background: transparent;
	border: 1px solid currentColor; border-radius: var(--r-1);
	text-decoration: none;
	scale: var(--press, 1);
	transition: background var(--dur-base) var(--ease-out),
	            border-color var(--dur-base) var(--ease-out),
	            scale 140ms var(--ease-out);
	-webkit-tap-highlight-color: transparent;
}
.pt-nav-3d:active { --press: .97; }
.pt-nav-3d__icon { display: block; width: 18px; height: 18px; flex: none; perspective: 200px; }
.pt-nav-3d__icon svg { display: block; width: 100%; height: 100%; transition: transform 520ms cubic-bezier(.2,1.06,.3,1); }
.pt-nav-3d__dot { width: 6px; height: 6px; flex: none; background: var(--pt-scan); animation: pt-od-live 2.6s var(--ease-out) infinite; }
@keyframes pt-od-live {
	0%   { box-shadow: 0 0 0 0 rgba(0,194,168,.55); }
	60%  { box-shadow: 0 0 0 7px rgba(0,194,168,0); }
	100% { box-shadow: 0 0 0 0 rgba(0,194,168,0); }
}
@media (hover: hover) and (pointer: fine) {
	.pt-nav-3d:hover { border-color: var(--pt-scan); background: rgba(0,194,168,.08); color: var(--pt-blue-700); }
	.pt-nav-3d:hover .pt-nav-3d__icon svg { transform: rotateY(180deg) rotateX(8deg); }
}
@media (max-width: 600px) {
	.pt-nav-3d { padding: 8px 10px; }
	.pt-nav-3d__label { display: none; }
}

/* ── rozbicie: kafelki ze zrzutem widocznego ekranu ──────────
   Kafelek = okno na klon widocznych bloków strony. Zawias na dolnej
   krawędzi: fala od linku przewraca kafelki do przodu. */
.pt-od-shatter {
	position: fixed; inset: 0; z-index: 100001; pointer-events: none;
	perspective: 900px; overflow: hidden;
}
.pt-od-plane { position: absolute; inset: 0; transform-style: preserve-3d; }
.pt-od-tile {
	position: absolute; overflow: hidden; transform-origin: 50% 100%;
	will-change: transform, opacity; backface-visibility: hidden;
}
.pt-od-snap { position: absolute; left: 0; top: 0; pointer-events: none; }
/* klony mają być tanie: bez własnych warstw kompozytora, bez ruchu */
.pt-od-snap * {
	animation: none !important; transition: none !important;
	will-change: auto !important;
	backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.pt-nav-3d__dot { animation: none; }
	.pt-nav-3d__icon svg { transition: none; }
}