/* Medatech – efekty „tech” (tylko body.shop-medatech). Wyłącznie transform/opacity/background-position (lekkie dla GPU).
   Efekty kursora ustawia tech.js tylko na urządzeniach z myszą; wszystko wyłączane przy prefers-reduced-motion. */

@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root { --tech: #3ddc6b; --tech-dark: #0f6619; }

/* Pasek postępu przewijania */
.scroll-progress { position: fixed; left: 0; top: 0; z-index: 1000; width: 100%; height: 3px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #0f6619, #3ddc6b, #9cf5b5); box-shadow: 0 0 12px rgba(61, 220, 107, .8); pointer-events: none; }

/* Nagłówek: „skan” po dolnej krawędzi */
.shop-medatech .site-header { position: sticky; }
.shop-medatech .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--tech), transparent) no-repeat; background-size: 28% 100%; animation: scan-line 6s linear infinite; pointer-events: none; }
@keyframes scan-line { from { background-position: -30% 0; } to { background-position: 130% 0; } }

/* HERO: siatka, zorza, reflektor za kursorem */
.shop-medatech .hero-premium .slide {
	background-image:
		radial-gradient(420px circle at var(--mx, 72%) var(--my, 40%), rgba(61, 220, 107, .22), rgba(61, 220, 107, 0) 62%),
		radial-gradient(60% 80% at 78% 38%, #d4f5dc 0%, rgba(212, 245, 220, 0) 62%),
		radial-gradient(40% 50% at 8% 0%, #e7efe9 0%, rgba(231, 239, 233, 0) 70%);
	background-color: var(--bg);
}
.shop-medatech .hero-premium .slide::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(15, 102, 25, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 102, 25, .10) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(75% 85% at 72% 45%, #000 15%, transparent 78%); mask-image: radial-gradient(75% 85% at 72% 45%, #000 15%, transparent 78%); animation: grid-drift 24s linear infinite; }
.shop-medatech .hero-premium .slide::after { content: ""; position: absolute; z-index: -1; right: -8%; top: -22%; width: min(60vw, 760px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(61, 220, 107, .38), rgba(61, 220, 107, 0) 65%); filter: blur(28px); animation: aurora 14s ease-in-out infinite alternate; }
@keyframes grid-drift { to { background-position: 56px 56px, 56px 56px; } }
@keyframes aurora { from { transform: translate(0, 0) scale(1); } to { transform: translate(-10%, 14%) scale(1.3); } }

/* EKG rysujące się w tle hero */
.ecg { position: absolute; left: 0; right: 0; bottom: 10%; z-index: -1; width: 100%; height: 90px; opacity: .55; pointer-events: none; }
.ecg path { fill: none; stroke: var(--tech-dark); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(61, 220, 107, .9)); animation: ecg-draw 6s ease-in-out infinite; }
@keyframes ecg-draw { 0% { stroke-dashoffset: 1000; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1000; } }

/* Produkt: tilt 3D i „radar” */
/* Przechył stosujemy na samym zdjęciu (nie na kontenerze): transform na rodzicu izolowałby zdjęcie od tła i wyłączył mix-blend-mode. */
.shop-medatech .hero-premium .slide-img { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; will-change: transform, translate; animation: float-t 8s ease-in-out infinite; }
@keyframes float-t { 0%, 100% { translate: 0 0; rotate: -1deg; } 50% { translate: 0 -14px; rotate: 1deg; } }
.shop-medatech .slide-visual::before, .shop-medatech .slide-visual::after { content: ""; position: absolute; inset: 0; margin: auto; width: 62%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(15, 102, 25, .5); pointer-events: none; animation: radar 4.8s ease-out infinite; }
.shop-medatech .slide-visual::after { animation-delay: 2.4s; }
.shop-medatech .hero-premium .slide-img { z-index: 1; }
@keyframes radar { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.75); opacity: 0; } }

/* Przycisk pauzy slajdera */
.slider-pause .pause-bars { position: relative; display: block; width: 14px; height: 16px; }
.slider-pause .pause-bars::before, .slider-pause .pause-bars::after { content: ""; position: absolute; top: 0; width: 4px; height: 16px; background: currentColor; border-radius: 1px; }
.slider-pause .pause-bars::before { left: 1px; } .slider-pause .pause-bars::after { right: 1px; }
.slider-pause.is-paused .pause-bars::before { left: 2px; width: 0; height: 0; background: none; border-left: 12px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-radius: 0; top: 0; }
.slider-pause.is-paused .pause-bars::after { display: none; }

/* Karty: reflektor pod kursorem + obracająca się ramka */
.shop-medatech .bento-tile::after, .shop-medatech ul.products li.product::after, .shop-medatech .why-grid li::after, .shop-medatech .trust li::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(61, 220, 107, .2), rgba(61, 220, 107, 0) 62%); }
.shop-medatech .bento-tile:hover::after, .shop-medatech ul.products li.product:hover::after, .shop-medatech .why-grid li:hover::after, .shop-medatech .trust li:hover::after { opacity: 1; }
.shop-medatech ul.products li.product::before, .shop-medatech .bento-tile::before { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: 2px; pointer-events: none; opacity: 0; transition: opacity .35s; background: conic-gradient(from var(--a), transparent 0 62%, rgba(61, 220, 107, .95) 82%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: ring-spin 3.2s linear infinite; }
.shop-medatech ul.products li.product:hover::before, .shop-medatech .bento-tile:hover::before { opacity: 1; }
@keyframes ring-spin { to { --a: 360deg; } }

/* Ciemna sekcja: „podłoga” z siatki płynąca na widza */
.shop-medatech .why-dark { position: relative; overflow: hidden; }
/* Po obrocie o 62° widoczna wysokość ≈ 0,47 × height, więc height 760px daje ok. 360 px podłogi u dołu sekcji. */
.shop-medatech .why-dark::before { content: ""; position: absolute; left: -30%; right: -30%; bottom: -40px; height: 760px; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(61, 220, 107, .55) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 220, 107, .55) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(520px) rotateX(62deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 92%); mask-image: linear-gradient(to top, #000 0%, transparent 92%); animation: grid-fly 5s linear infinite; }
.shop-medatech .why-dark .container { position: relative; z-index: 1; }
@keyframes grid-fly { to { background-position: 0 64px, 64px 0; } }
.shop-medatech .why-dark .why-grid li::before { box-shadow: 0 0 0 0 rgba(61, 220, 107, .6); animation: pulse-dot 2.4s ease-out infinite; }
@keyframes pulse-dot { to { box-shadow: 0 0 0 14px rgba(61, 220, 107, 0); } }

/* Marquee: poświata ikon */
.shop-medatech .marquee-set .icon { filter: drop-shadow(0 0 6px rgba(61, 220, 107, .85)); }

/* Przyciski: „błysk” przy najechaniu, magnetyczny ruch ustawia JS */
.shop-medatech .btn-lg { position: relative; overflow: hidden; }
.shop-medatech .btn-lg::before { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); transition: left .6s; pointer-events: none; }
.shop-medatech .btn-lg:hover::before { left: 130%; }
.shop-medatech .btn-outline::before { display: none; }

/* Nagłówki „odszyfrowywane” (tech.js) */
.is-scrambling { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
	.scroll-progress { display: none; }
	.shop-medatech .site-header::after, .shop-medatech .hero-premium .slide::before, .shop-medatech .hero-premium .slide::after, .ecg path, .shop-medatech .slide-visual::before, .shop-medatech .slide-visual::after, .shop-medatech ul.products li.product::before, .shop-medatech .bento-tile::before, .shop-medatech .why-dark::before, .shop-medatech .why-dark .why-grid li::before { animation: none !important; }
	.ecg path { stroke-dashoffset: 0; }
	.shop-medatech .hero-premium .slide-img { transform: none !important; animation: none !important; }
}
@media (hover: none), (pointer: coarse) {
	.shop-medatech .hero-premium .slide-img { transform: none; }
}
@media (max-width: 700px) {
	.shop-medatech .why-dark::before { height: 520px; }
	.ecg { bottom: 4%; height: 60px; }
}