/* Trial page photo backgrounds (swap sets via data-page-bg) */

body[data-page-bg] {
    --page-bg-image: none;
    --page-fg: #fff;
    --page-fg-muted: rgba(255, 255, 255, 0.5);
    --page-fg-soft: rgba(255, 255, 255, 0.7);
    --page-line: rgba(255, 255, 255, 0.2);
    background-color: #0a0a0a !important;
}

body[data-page-bg]::before {
    content: '';
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-image: var(--page-bg-image);
    background-position: center center;
    /* Fill the viewport edge-to-edge; crop overflow, keep aspect */
    background-size: cover;
    background-repeat: no-repeat;
}

body[data-page-bg="1"] {
    --page-bg-image: url('/img/bg/page-01.jpg?v=20260723d');
}

body[data-page-bg="2"] {
    --page-bg-image: url('/img/bg/page-02.jpg?v=20260723a');
}

body[data-page-bg="3"] {
    --page-bg-image: url('/img/bg/page-03.jpg?v=20260723b');
}

body[data-page-bg="4"] {
    --page-bg-image: url('/img/bg/page-04.jpg?v=20260723a');
}

body[data-page-bg="5"] {
    --page-bg-image: url('/img/bg/page-05.jpg?v=20260723a');
}

body[data-page-bg] #site-main,
body[data-page-bg] .layout-wrapper,
body[data-page-bg] .layout-content,
body[data-page-bg] .footer {
    position: relative;
    z-index: 1;
    background: transparent !important;
    background-color: transparent !important;
}

body[data-page-bg] .header {
    position: relative;
    z-index: 30;
    pointer-events: auto;
    background: transparent !important;
    background-color: transparent !important;
}

body[data-page-bg] .header a,
body[data-page-bg] .header button {
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

body[data-page-bg] #starfield-root,
body[data-page-bg] #starfield-canvas {
    display: none !important;
}

/* Light paper/textures: dark type + inverted white logo */
body[data-bg-theme="light"] {
    --page-fg: #111;
    --page-fg-muted: rgba(0, 0, 0, 0.48);
    --page-fg-soft: rgba(0, 0, 0, 0.72);
    --page-line: rgba(0, 0, 0, 0.18);
    color: var(--page-fg);
    background-color: #e8e8e8 !important;
}

body[data-bg-theme="light"] .header__logo {
    filter: invert(1);
}

body[data-bg-theme="light"] .header__control.mod-link,
body[data-bg-theme="light"] .header__control.header__sort-btn,
body[data-bg-theme="light"] .header a {
    color: #111 !important;
    text-shadow: none !important;
}

body[data-bg-theme="light"] .gl-caption,
body[data-bg-theme="light"] .gl-value,
body[data-bg-theme="light"] .gl-value a,
body[data-bg-theme="light"] .contacts-page .gl-caption,
body[data-bg-theme="light"] .contacts-page .gl-value,
body[data-bg-theme="light"] .contacts-page .gl-value a,
body[data-bg-theme="light"] .contacts-team .talents__title,
body[data-bg-theme="light"] .contacts-team .talents__item-link,
body[data-bg-theme="light"] .contacts-team .contacts-team__role,
body[data-bg-theme="light"] .contacts-intro__label,
body[data-bg-theme="light"] .contacts-intro__heading,
body[data-bg-theme="light"] .contacts-intro__text,
body[data-bg-theme="light"] .contacts-intro__toggle,
body[data-bg-theme="light"] .contacts-intro__panel,
body[data-bg-theme="light"] .contacts-intro__panel p,
body[data-bg-theme="light"] .gallery__caption,
body[data-bg-theme="light"] .gallery__empty {
    color: var(--page-fg) !important;
}

body[data-bg-theme="light"] .gl-caption,
body[data-bg-theme="light"] .contacts-page .gl-caption,
body[data-bg-theme="light"] .contacts-team .talents__title,
body[data-bg-theme="light"] .contacts-intro__label,
body[data-bg-theme="light"] .contacts-team .contacts-team__role {
    color: var(--page-fg-muted) !important;
}

/* Soft dark halo instead of solid black square behind active/hover nav */
body[data-bg-theme="light"] .header__control.mod-link::before,
body[data-bg-theme="light"] .header__control.header__sort-btn::before {
    background: radial-gradient(
        ellipse 58% 52% at 50% 50%,
        rgba(0, 0, 0, 0.21),
        rgba(0, 0, 0, 0.09) 45%,
        transparent 72%
    ) !important;
}

body[data-bg-theme="light"] .header__control.mod-link:hover,
body[data-bg-theme="light"] .header__control.header__sort-btn:hover,
body[data-bg-theme="light"] .header__control.mod-link.mod-active,
body[data-bg-theme="light"] .header__control.header__sort-btn.mod-active {
    color: #111 !important;
    text-shadow:
        0 0 8px rgba(0, 0, 0, 0.27),
        0 0 18px rgba(0, 0, 0, 0.15) !important;
}

/* Cases + Gallery: black header nav + soft active halo (no solid plate) */
body[data-nav="cases"] .header__logo,
body[data-nav="gallery"] .header__logo {
    filter: invert(1);
}

body[data-nav="cases"] .header__control.mod-link,
body[data-nav="cases"] .header__control.header__sort-btn,
body[data-nav="cases"] .header a,
body[data-nav="gallery"] .header__control.mod-link,
body[data-nav="gallery"] .header__control.header__sort-btn,
body[data-nav="gallery"] .header a {
    color: #111 !important;
    text-shadow: none !important;
}

body[data-nav="cases"] .header__control.mod-link::before,
body[data-nav="cases"] .header__control.header__sort-btn::before,
body[data-nav="gallery"] .header__control.mod-link::before,
body[data-nav="gallery"] .header__control.header__sort-btn::before {
    display: block !important;
    background: radial-gradient(
        ellipse 62% 56% at 50% 50%,
        rgba(0, 0, 0, 0.28),
        rgba(0, 0, 0, 0.12) 44%,
        transparent 72%
    ) !important;
}

body[data-nav="cases"] .header__control.mod-link.mod-active::before,
body[data-nav="cases"] .header__control.header__sort-btn.mod-active::before,
body[data-nav="gallery"] .header__control.mod-link.mod-active::before,
body[data-nav="gallery"] .header__control.header__sort-btn.mod-active::before {
    background: radial-gradient(
        ellipse 68% 60% at 50% 50%,
        rgba(0, 0, 0, 0.385),
        rgba(0, 0, 0, 0.196) 40%,
        rgba(0, 0, 0, 0.07) 62%,
        transparent 78%
    ) !important;
}

body[data-nav="cases"] .header__control.mod-link:hover,
body[data-nav="cases"] .header__control.header__sort-btn:hover,
body[data-nav="gallery"] .header__control.mod-link:hover,
body[data-nav="gallery"] .header__control.header__sort-btn:hover {
    color: #111 !important;
    text-shadow:
        0 0 8px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(0, 0, 0, 0.14) !important;
}

body[data-nav="cases"] .header__control.mod-link.mod-active,
body[data-nav="cases"] .header__control.header__sort-btn.mod-active,
body[data-nav="gallery"] .header__control.mod-link.mod-active,
body[data-nav="gallery"] .header__control.header__sort-btn.mod-active {
    color: #000 !important;
    text-shadow:
        0 0 6px rgba(0, 0, 0, 0.315),
        0 0 14px rgba(0, 0, 0, 0.196),
        0 0 26px rgba(255, 255, 255, 0.55) !important;
}

body[data-nav="cases"] .header__burger,
body[data-nav="gallery"] .header__burger {
    filter: invert(1);
}

body[data-bg-theme="light"] .header__burger {
    filter: invert(1);
}

body[data-bg-theme="light"] .contacts-page .contacts__map,
body[data-bg-theme="light"] .contacts-intro__item,
body[data-bg-theme="light"] .gallery__list {
    border-color: var(--page-line) !important;
}

body[data-bg-theme="light"] .logo-return-btn {
    color: #111;
    border-color: rgba(0, 0, 0, 0.35);
    background: rgba(255, 255, 255, 0.72);
}

body[data-bg-theme="light"] .logo-return-btn:hover,
body[data-bg-theme="light"] .logo-return-btn:focus-visible {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.55);
}

/* Keep page background stable after cross-page logo return (no dim flash) */
html.mod-handoff-bridge body[data-page-bg]::before {
    opacity: 1 !important;
    filter: none !important;
    animation: none !important;
}