/* =============================================================================
   Proteiner — site-wide motion + polish layer
   ============================================================================= */

:root {
    --pm-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --pm-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --pm-ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
    --pm-nav-dur: 0.38s;
}

/* Cross-document tab transitions (Chrome / Edge) — header kept as its own layer */
@view-transition {
    navigation: auto;
}

@keyframes pmBarGrow {
    from { transform: scaleX(0.35); opacity: 0.35; }
    to { transform: scaleX(1); opacity: 0.9; }
}

@keyframes pmSoftPulse {
    0%, 100% { box-shadow: var(--btn-calc-shadow); }
    50% { box-shadow: 0 12px 34px rgba(30, 58, 138, 0.32), 0 6px 16px var(--primary-glow); }
}

@keyframes pmVtRootOut {
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.992);
        filter: blur(2px);
    }
}

@keyframes pmVtRootIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.992);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes pmNavContentIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pmNavContentOut {
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

::view-transition-group(root) {
    animation-duration: var(--pm-nav-dur);
    animation-timing-function: var(--pm-ease-out);
}

::view-transition-old(root) {
    animation: pmVtRootOut 0.28s var(--pm-ease-soft) both;
}

::view-transition-new(root) {
    animation: pmVtRootIn var(--pm-nav-dur) var(--pm-ease-out) both;
}

/* Header as its own layer — instant swap (no fade: fading made the active tab look gray) */
.site-header:has(.nav-links) {
    view-transition-name: pm-header;
}

/* Right utilities (Dodaj produkt / Zaloguj) — same treatment, outside .site-header */
.header-utilities--actions,
#pm-header-utilities {
    view-transition-name: pm-header-utilities;
}

.header-utilities--theme {
    view-transition-name: pm-header-theme;
}

::view-transition-group(pm-header) {
    animation: none;
    z-index: 10000;
}

::view-transition-group(pm-header-utilities) {
    animation: none;
    z-index: 10001;
}

::view-transition-group(pm-header-theme) {
    animation: none;
    z-index: 10001;
}

::view-transition-old(pm-header) {
    /* Drop old header immediately — don't fade white-on-pill through gray */
    animation: none;
    opacity: 0;
}

::view-transition-new(pm-header) {
    animation: none;
    opacity: 1;
}

::view-transition-old(pm-header-utilities),
::view-transition-old(pm-header-theme) {
    animation: none;
    opacity: 0;
}

::view-transition-new(pm-header-utilities),
::view-transition-new(pm-header-theme) {
    animation: none;
    opacity: 1;
}

/* Nav labels themselves must not participate in root morph snapshots */
.site-header .nav-links a.nav-link,
.site-header .nav-links button {
    view-transition-name: none;
}

/* Fallback leave / enter when MPA view transitions are unavailable */
html.pm-motion body.pm-nav-leaving .page-container,
html.pm-motion body.pm-nav-leaving main.main-content,
html.pm-motion body.pm-nav-leaving main.product-page,
html.pm-motion body.pm-nav-leaving .err-wrap {
    animation: pmNavContentOut 0.2s var(--pm-ease-soft) forwards;
    pointer-events: none;
}

html.pm-motion body.pm-nav-entered:not(.compare-body) .page-container,
html.pm-motion body.pm-nav-entered:not(.compare-body) main.main-content,
html.pm-motion body.pm-nav-entered main.product-page {
    animation: pmNavContentIn 0.42s var(--pm-ease-out) both;
}


/* Hero underline can still grow — does not shift layout */
html.pm-motion body.pm-motion-ready:not(.compare-body) .page-hero::after {
    transform-origin: center;
    animation: pmBarGrow 0.7s var(--pm-ease-out) 0.12s forwards;
}

/* Scroll reveals */
html.pm-motion .pm-reveal:not(.pm-revealed) {
    opacity: 0;
    transform: translateY(18px);
}

html.pm-motion .pm-reveal.pm-revealed {
    opacity: 1;
    transform: none;
    transition:
        opacity 0.5s var(--pm-ease-out),
        transform 0.5s var(--pm-ease-out),
        box-shadow 0.35s var(--pm-ease-soft);
    transition-delay: var(--pm-stagger, 0ms);
}

/* Header: keep sticky + high z-index; no motion that can twitch on tab switch */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

html.pm-scrolled .site-header {
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08);
}

[data-theme='dark'] html.pm-scrolled .site-header {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

/* Nav: hover pill only on inactive tabs — never animate .active color (avoids gray flash on leave) */
.nav-links button,
.nav-links a.nav-link {
    -webkit-tap-highlight-color: transparent;
    transition: none !important;
}

.nav-links button:not(.active),
.nav-links a.nav-link:not(.active) {
    transition: color 0.18s var(--pm-ease-soft) !important;
}

.nav-links button:not(.active)::before,
.nav-links a.nav-link:not(.active)::before {
    transition:
        opacity 0.2s var(--pm-ease-soft),
        background 0.2s var(--pm-ease-soft) !important;
}

.nav-links button.active,
.nav-links a.nav-link.active,
.nav-links button.active::before,
.nav-links a.nav-link.active::before {
    transition: none !important;
}

/* Don't restyle the destination tab as "active" on mousedown — that dulled the leaving tab */
.nav-links button:active:not(.active),
.nav-links a.nav-link:active:not(.active) {
    color: var(--text-muted);
    transform: none;
}

.nav-links button:active:not(.active)::before,
.nav-links a.nav-link:active:not(.active)::before {
    opacity: 0.35;
    background: rgba(128, 0, 0, 0.1);
    box-shadow: none;
}

/* Buttons */
.btn-calc,
.btn-pdf,
.btn-show-more,
.compare-copy-link-btn,
.compare-swap-btn,
.add-product-submit {
    transition:
        transform 0.28s var(--pm-ease-spring),
        box-shadow 0.28s var(--pm-ease-soft),
        filter 0.28s var(--pm-ease-soft),
        border-color 0.28s var(--pm-ease-soft),
        background 0.28s var(--pm-ease-soft),
        color 0.28s var(--pm-ease-soft) !important;
}

.btn-calc:hover,
.btn-pdf:hover,
.btn-show-more:hover {
    transform: translateY(-3px);
}

.btn-calc:active,
.btn-pdf:active,
.btn-show-more:active {
    transform: translateY(0) scale(0.985);
}

html.pm-motion body.pm-motion-ready .btn-calc {
    animation: pmSoftPulse 3.8s var(--pm-ease-soft) 1.2s 2;
}

/* Cards & tiles */
.product-card,
.macro-card,
.bmi-card,
.water-card,
.poradnik-nutrient-tile,
.poradnik-hub-tile,
a.shop-item,
.home-info-tile,
.compare-kpi-card,
.pm-podium-card {
    transition:
        transform 0.32s var(--pm-ease-spring),
        box-shadow 0.32s var(--pm-ease-soft),
        border-color 0.32s var(--pm-ease-soft),
        background 0.32s var(--pm-ease-soft) !important;
}

.product-card-link:hover .product-card,
.product-card:hover {
    transform: translateY(-5px);
}

.macro-card:hover,
.bmi-card:hover,
.water-card:hover,
.poradnik-nutrient-tile:hover,
.poradnik-hub-tile:hover,
a.shop-item:hover,
.compare-kpi-card:hover,
.home-info-tile:hover {
    transform: translateY(-3px);
}

.product-card-cta {
    transition: letter-spacing 0.28s var(--pm-ease-soft), color 0.28s var(--pm-ease-soft);
}

.product-card-link:hover .product-card-cta {
    letter-spacing: 0.02em;
}

/* Inputs */
input:not([type='radio']):not([type='checkbox']),
select,
textarea {
    transition:
        border-color 0.22s var(--pm-ease-soft),
        box-shadow 0.22s var(--pm-ease-soft),
        background 0.22s var(--pm-ease-soft),
        transform 0.22s var(--pm-ease-soft) !important;
}

input:not([type='radio']):not([type='checkbox']):focus,
select:focus,
textarea:focus {
    transform: translateY(-1px);
}

/* Footer links */
.site-footer-nav a {
    transition: color 0.22s var(--pm-ease-soft), opacity 0.22s var(--pm-ease-soft), transform 0.22s var(--pm-ease-spring);
    display: inline-block;
}

.site-footer-nav a:hover {
    transform: translateY(-1px);
    text-decoration: none;
    opacity: 0.92;
}

/* Main content presence */
.main-content {
    transition: box-shadow 0.35s var(--pm-ease-soft), border-color 0.35s var(--pm-ease-soft);
}

.main-content::before {
    transition: filter 0.4s var(--pm-ease-soft);
}

html.pm-scrolled .main-content {
    box-shadow: var(--shadow-lg);
}

/* Selection */
::selection {
    background: rgba(22, 101, 52, 0.16);
    color: var(--ink);
}

[data-theme='dark'] ::selection {
    background: rgba(110, 231, 183, 0.28);
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Shared ambient atmosphere (blobs + rings) for all tabs except compare
   --------------------------------------------------------------------------- */

@keyframes pmAtmosphereDriftA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(4%, -3%) scale(1.05); }
    66% { transform: translate(-3%, 4%) scale(0.97); }
}

@keyframes pmAtmosphereDriftB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40% { transform: translate(-4%, 3%) scale(1.04); }
    70% { transform: translate(3%, -2%) scale(0.98); }
}

@keyframes pmAtmosphereRingPulse {
    0% { transform: scale(0.86); opacity: 0.45; }
    55% { opacity: 0.18; }
    100% { transform: scale(1.18); opacity: 0; }
}

@keyframes pmAtmosphereDotFall {
    0% {
        top: -5%;
        transform: translate3d(0, 0, 0) scale(0.55);
        opacity: 0;
        filter: blur(1.4px);
    }
    10% {
        opacity: 0.26;
        transform: translate3d(calc(var(--fall-drift, 24px) * 0.25), 0, 0) scale(1);
        filter: blur(0.5px);
    }
    32% {
        opacity: 0.18;
        transform: translate3d(calc(var(--fall-drift, 24px) * -0.7), 0, 0) scale(1.2);
        filter: blur(0.8px);
    }
    55% {
        opacity: 0.14;
        transform: translate3d(calc(var(--fall-drift, 24px) * 0.95), 0, 0) scale(0.85);
        filter: blur(0.4px);
    }
    78% {
        opacity: 0.1;
        transform: translate3d(calc(var(--fall-drift, 24px) * -0.4), 0, 0) scale(1.08);
        filter: blur(0.9px);
    }
    100% {
        top: 102%;
        opacity: 0;
        transform: translate3d(var(--fall-drift, 24px), 0, 0) scale(0.5);
        filter: blur(1.6px);
    }
}

.pm-atmosphere-host {
    position: relative;
}

.page-container,
.site-footer,
main.product-page,
main.main-content,
.err-wrap {
    position: relative;
    z-index: 1;
}

.pm-atmosphere {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    min-height: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Start ambient motion only after first paint — avoids header blur flicker */
.pm-atmosphere:not(.is-live) .pm-atmosphere-blob,
.pm-atmosphere:not(.is-live) .pm-atmosphere-ring,
.pm-atmosphere:not(.is-live) .pm-atmosphere-dot {
    animation: none !important;
}

/* Inner uses inset:0 — keep top aligned to host */
.pm-atmosphere.pm-atmosphere--inner {
    top: 0;
    bottom: 0;
}

.pm-atmosphere-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(74px);
    will-change: transform;
}

.pm-atmosphere-blob--a {
    width: min(48vw, 380px);
    height: min(48vw, 380px);
    top: 4%;
    left: -10%;
    background: radial-gradient(circle, rgba(128, 0, 0, 0.16) 0%, rgba(102, 0, 0, 0.04) 68%, transparent 100%);
    animation: pmAtmosphereDriftA 16s ease-in-out infinite;
}

.pm-atmosphere-blob--b {
    width: min(52vw, 420px);
    height: min(52vw, 420px);
    top: 18%;
    right: -12%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.14) 0%, rgba(30, 58, 95, 0.04) 68%, transparent 100%);
    animation: pmAtmosphereDriftB 19s ease-in-out infinite;
}

.pm-atmosphere-blob--c {
    width: min(42vw, 340px);
    height: min(42vw, 340px);
    top: 42%;
    left: 22%;
    background: radial-gradient(circle, rgba(128, 0, 0, 0.08) 0%, rgba(37, 99, 235, 0.08) 48%, transparent 72%);
    animation: pmAtmosphereDriftA 22s ease-in-out infinite reverse;
    filter: blur(82px);
}

.pm-atmosphere-blob--d {
    width: min(44vw, 360px);
    height: min(44vw, 360px);
    top: 64%;
    right: -8%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.11) 0%, rgba(128, 0, 0, 0.05) 55%, transparent 100%);
    animation: pmAtmosphereDriftB 20s ease-in-out infinite reverse;
}

.pm-atmosphere-blob--e {
    width: min(40vw, 300px);
    height: min(40vw, 300px);
    top: 82%;
    left: -6%;
    background: radial-gradient(circle, rgba(128, 0, 0, 0.1) 0%, rgba(37, 99, 235, 0.06) 50%, transparent 100%);
    animation: pmAtmosphereDriftA 18s ease-in-out infinite;
}

.pm-atmosphere-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid transparent;
    pointer-events: none;
}

.pm-atmosphere-ring--a {
    width: min(46vw, 400px);
    height: min(46vw, 400px);
    top: 8%;
    left: 10%;
    border-color: rgba(128, 0, 0, 0.12);
    animation: pmAtmosphereRingPulse 4.4s ease-out infinite;
}

.pm-atmosphere-ring--b {
    width: min(40vw, 340px);
    height: min(40vw, 340px);
    top: 48%;
    right: 8%;
    border-color: rgba(37, 99, 235, 0.14);
    animation: pmAtmosphereRingPulse 4.8s ease-out 1.1s infinite;
}

.pm-atmosphere-ring--c {
    width: min(36vw, 300px);
    height: min(36vw, 300px);
    top: 78%;
    left: 18%;
    border-color: rgba(128, 0, 0, 0.1);
    animation: pmAtmosphereRingPulse 5s ease-out 0.6s infinite;
}

.pm-atmosphere-dot {
    position: absolute;
    top: -5%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(96, 165, 250, 0.55), rgba(128, 0, 0, 0.28) 55%, transparent 78%);
    box-shadow: 0 0 10px rgba(128, 0, 0, 0.12);
    animation: pmAtmosphereDotFall var(--fall-dur, 28s) cubic-bezier(0.4, 0.05, 0.55, 1) infinite;
    animation-delay: var(--fall-delay, 0s);
    will-change: top, transform, opacity, filter;
}

.pm-atmosphere-dot--1 { left: 10%; --fall-dur: 24s; --fall-delay: 0s; --fall-drift: 36px; }
.pm-atmosphere-dot--2 { left: 22%; --fall-dur: 32s; --fall-delay: 3.5s; --fall-drift: -42px; width: 4px; height: 4px; }
.pm-atmosphere-dot--3 { left: 36%; --fall-dur: 27s; --fall-delay: 7s; --fall-drift: 48px; width: 7px; height: 7px; }
.pm-atmosphere-dot--4 { left: 48%; --fall-dur: 36s; --fall-delay: 2s; --fall-drift: -38px; }
.pm-atmosphere-dot--5 { left: 61%; --fall-dur: 25s; --fall-delay: 10s; --fall-drift: 28px; width: 3px; height: 3px; }
.pm-atmosphere-dot--6 { left: 73%; --fall-dur: 33s; --fall-delay: 5.5s; --fall-drift: -44px; }
.pm-atmosphere-dot--7 { left: 84%; --fall-dur: 29s; --fall-delay: 13s; --fall-drift: 52px; width: 5px; height: 5px; }
.pm-atmosphere-dot--8 { left: 15%; --fall-dur: 38s; --fall-delay: 16s; --fall-drift: -30px; width: 3px; height: 3px; }
.pm-atmosphere-dot--9 { left: 55%; --fall-dur: 22s; --fall-delay: 8.5s; --fall-drift: 40px; width: 6px; height: 6px; }
.pm-atmosphere-dot--10 { left: 91%; --fall-dur: 31s; --fall-delay: 11.5s; --fall-drift: -46px; width: 4px; height: 4px; }

[data-theme='dark'] .pm-atmosphere-blob--a {
    background: radial-gradient(circle, rgba(176, 64, 64, 0.2) 0%, rgba(102, 0, 0, 0.05) 68%, transparent 100%);
}

[data-theme='dark'] .pm-atmosphere-blob--b {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, rgba(30, 58, 95, 0.05) 68%, transparent 100%);
}

[data-theme='dark'] .pm-atmosphere-ring--a { border-color: rgba(224, 122, 122, 0.18); }
[data-theme='dark'] .pm-atmosphere-ring--b { border-color: rgba(96, 165, 250, 0.2); }

/* Inner atmosphere — inside the content card, same burgundy/blue family */
.pm-atmosphere-inner-host {
    position: relative;
    isolation: isolate;
}

.pm-atmosphere-inner-host > :not(.pm-atmosphere--inner) {
    position: relative;
    z-index: 1;
}

.pm-atmosphere--inner {
    position: absolute;
    inset: 0;
    top: 0;
    width: auto;
    height: auto;
    min-height: 0;
    border-radius: inherit;
    z-index: 0;
}

.pm-atmosphere--inner .pm-atmosphere-blob--a {
    background: radial-gradient(circle, rgba(128, 0, 0, 0.12) 0%, rgba(102, 0, 0, 0.03) 68%, transparent 100%);
}

.pm-atmosphere--inner .pm-atmosphere-blob--b {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.11) 0%, rgba(30, 58, 95, 0.03) 68%, transparent 100%);
}

.pm-atmosphere--inner .pm-atmosphere-blob--c {
    background: radial-gradient(circle, rgba(128, 0, 0, 0.07) 0%, rgba(37, 99, 235, 0.07) 48%, transparent 72%);
}

.pm-atmosphere--inner .pm-atmosphere-blob--d {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.09) 0%, rgba(128, 0, 0, 0.04) 55%, transparent 100%);
}

.pm-atmosphere--inner .pm-atmosphere-blob--e {
    background: radial-gradient(circle, rgba(128, 0, 0, 0.08) 0%, rgba(37, 99, 235, 0.05) 50%, transparent 100%);
}

.pm-atmosphere--inner .pm-atmosphere-ring--a {
    border-color: rgba(128, 0, 0, 0.1);
}

.pm-atmosphere--inner .pm-atmosphere-ring--b {
    border-color: rgba(37, 99, 235, 0.12);
}

.pm-atmosphere--inner .pm-atmosphere-ring--c {
    border-color: rgba(128, 0, 0, 0.09);
}

.pm-atmosphere--inner .pm-atmosphere-dot {
    background: radial-gradient(circle at 35% 30%, rgba(96, 165, 250, 0.42), rgba(128, 0, 0, 0.2) 55%, transparent 78%);
    box-shadow: 0 0 8px rgba(128, 0, 0, 0.08);
}

[data-theme='dark'] .pm-atmosphere--inner .pm-atmosphere-blob--a {
    background: radial-gradient(circle, rgba(176, 64, 64, 0.14) 0%, rgba(102, 0, 0, 0.04) 68%, transparent 100%);
}

[data-theme='dark'] .pm-atmosphere--inner .pm-atmosphere-blob--b {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.13) 0%, rgba(30, 58, 95, 0.04) 68%, transparent 100%);
}

[data-theme='dark'] .pm-atmosphere--inner .pm-atmosphere-ring--a { border-color: rgba(224, 122, 122, 0.16); }
[data-theme='dark'] .pm-atmosphere--inner .pm-atmosphere-ring--b { border-color: rgba(96, 165, 250, 0.18); }

@media (prefers-reduced-motion: reduce) {
    .pm-atmosphere-blob,
    .pm-atmosphere-ring,
    .pm-atmosphere-dot {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }

    html.pm-motion .pm-reveal:not(.pm-revealed),
    html.pm-motion .pm-reveal.pm-revealed,
    html.pm-motion body.pm-motion-ready .page-hero,
    html.pm-motion body.pm-motion-ready .page-hero::after,
    html.pm-motion body.pm-motion-ready .main-content,
    html.pm-motion body.pm-motion-ready .main-content > .sub-nav,
    html.pm-motion body.pm-motion-ready .product-page > .product-hero-card,
    html.pm-motion body.pm-motion-ready .compare-stage,
    html.pm-motion body.pm-motion-ready .btn-calc,
    html.pm-motion body.pm-nav-leaving .page-container,
    html.pm-motion body.pm-nav-leaving main.main-content,
    html.pm-motion body.pm-nav-leaving main.product-page,
    html.pm-motion body.pm-nav-entered .page-container,
    html.pm-motion body.pm-nav-entered main.main-content,
    html.pm-motion body.pm-nav-entered main.product-page {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .btn-calc:hover,
    .btn-pdf:hover,
    .btn-show-more:hover,
    .product-card-link:hover .product-card,
    .product-card:hover,
    .macro-card:hover,
    .bmi-card:hover,
    .water-card:hover,
    .poradnik-nutrient-tile:hover,
    .poradnik-hub-tile:hover,
    a.shop-item:hover,
    .compare-kpi-card:hover,
    .home-info-tile:hover,
    .nav-links button:hover:not(.active),
    .nav-links a.nav-link:hover:not(.active),
    .site-footer-nav a:hover,
    input:not([type='radio']):not([type='checkbox']):focus,
    select:focus,
    textarea:focus {
        transform: none !important;
    }
}