/* ============================================
   iOS 26 — LIQUID GLASS · DESIGN SYSTEM
   Adaptive light / dark via prefers-color-scheme
   ============================================ */
:root {
    color-scheme: light dark;

    --bar-height: 60px;

    /* Radii — concentric squircle scale */
    --r-card: 28px;
    --r-tile: 20px;
    --r-pill: 999px;

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

    /* ---- LIGHT THEME (default) ---- */
    --bg-base: #eceef4;
    --bg-deep: #e2e6ef;
    --tint-a: rgba(10, 132, 255, 0.20);
    --tint-b: rgba(255, 159, 122, 0.16);
    --tint-c: rgba(120, 200, 180, 0.14);

    /* Liquid glass material — light: frosted white */
    --glass-thin:  rgba(255, 255, 255, 0.42);
    --glass:       rgba(255, 255, 255, 0.58);
    --glass-thick: rgba(255, 255, 255, 0.74);
    --glass-frost: rgba(245, 247, 252, 0.66);

    /* Edges: bright specular top, soft dark base */
    --edge-light: rgba(255, 255, 255, 0.95);
    --edge-dim:   rgba(255, 255, 255, 0.5);
    --hairline:        rgba(0, 0, 0, 0.08);
    --hairline-strong: rgba(0, 0, 0, 0.14);

    /* Text */
    --text-1: rgba(0, 0, 0, 0.92);
    --text-2: rgba(0, 0, 0, 0.58);
    --text-3: rgba(0, 0, 0, 0.40);
    --text-4: rgba(0, 0, 0, 0.26);

    /* Accent — iOS system blue + warm secondary */
    --accent:      #007aff;
    --accent-2:    #34aadc;
    --accent-warm: #ff8e62;
    --accent-soft: rgba(0, 122, 255, 0.14);
    --accent-glow: rgba(0, 122, 255, 0.30);

    /* Destructive */
    --danger:      #ff3b30;
    --danger-soft: rgba(255, 59, 48, 0.12);

    /* Glass blur recipe */
    --blur: 24px;
    --sat: 180%;

    /* Floating shadows */
    --shadow-1: 0 6px 18px -6px rgba(20, 30, 60, 0.18),
                0 2px 6px -2px rgba(20, 30, 60, 0.12);
    --shadow-float: 0 24px 60px -18px rgba(20, 30, 60, 0.28),
                    0 8px 24px -10px rgba(20, 30, 60, 0.18);
    --shadow-float-hover: 0 34px 80px -18px rgba(20, 30, 60, 0.36),
                          0 14px 36px -12px rgba(20, 30, 60, 0.24),
                          0 0 50px -16px var(--accent-glow);

    /* Specular sheen used inside glass surfaces */
    --inset-sheen: inset 0 1px 0 var(--edge-light),
                   inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

/* ---- DARK THEME ---- */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-base: #07080d;
        --bg-deep: #030409;
        --tint-a: rgba(80, 140, 255, 0.30);
        --tint-b: rgba(255, 120, 180, 0.18);
        --tint-c: rgba(90, 200, 250, 0.16);

        --glass-thin:  rgba(255, 255, 255, 0.05);
        --glass:       rgba(255, 255, 255, 0.085);
        --glass-thick: rgba(255, 255, 255, 0.14);
        --glass-frost: rgba(20, 22, 32, 0.55);

        --edge-light: rgba(255, 255, 255, 0.22);
        --edge-dim:   rgba(255, 255, 255, 0.10);
        --hairline:        rgba(255, 255, 255, 0.10);
        --hairline-strong: rgba(255, 255, 255, 0.20);

        --text-1: rgba(255, 255, 255, 0.96);
        --text-2: rgba(255, 255, 255, 0.66);
        --text-3: rgba(255, 255, 255, 0.44);
        --text-4: rgba(255, 255, 255, 0.26);

        --accent:      #0a84ff;
        --accent-2:    #64d2ff;
        --accent-warm: #ff9f6b;
        --accent-soft: rgba(10, 132, 255, 0.20);
        --accent-glow: rgba(10, 132, 255, 0.45);

        --danger:      #ff453a;
        --danger-soft: rgba(255, 69, 58, 0.16);

        --shadow-1: 0 8px 22px -6px rgba(0, 0, 0, 0.6),
                    0 2px 8px -2px rgba(0, 0, 0, 0.45);
        --shadow-float: 0 30px 70px -20px rgba(0, 0, 0, 0.75),
                        0 12px 30px -10px rgba(0, 0, 0, 0.5);
        --shadow-float-hover: 0 40px 90px -20px rgba(0, 0, 0, 0.85),
                              0 18px 44px -12px rgba(0, 0, 0, 0.55),
                              0 0 60px -14px var(--accent-glow);

        --inset-sheen: inset 0 1px 0 var(--edge-light),
                       inset 0 -1px 0 rgba(0, 0, 0, 0.25);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    background: var(--bg-base);
    color: var(--text-1);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
                 'Helvetica Neue', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-weight: 400;
    letter-spacing: -0.01em;
    overscroll-behavior: contain;
}

/* Disable double-tap zoom + tap highlights on interactive glass */
a, button, .outer, .card, .card-link, .back-button,
.menu-button, .close, .modal, .marquee-bar, .lang-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* iOS won't zoom inputs on focus if font-size >= 16px */
input, textarea, select, button {
    font-size: 16px;
    font-family: inherit;
}

/* ============================================
   AMBIENT BACKGROUND — soft drifting light
   ============================================ */
.container {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse 120% 80% at 50% -10%, var(--bg-base) 0%, var(--bg-deep) 100%);
}

/* Анимированный WebGL-фон поверх базовой заливки */
#bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}

/* Когда есть WebGL-фон — прячем старые «аврора»-пятна, чтобы не мешали */
.container:has(#bg-canvas)::before,
.container:has(#bg-canvas)::after {
    display: none;
}

.container::before,
.container::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(130px);
    will-change: transform;
    pointer-events: none;
}

.container::before {
    width: 75vmax;
    height: 75vmax;
    top: -22%;
    left: -18%;
    background:
        radial-gradient(circle at 32% 32%, var(--tint-a) 0%, transparent 62%),
        radial-gradient(circle at 70% 62%, var(--tint-b) 0%, transparent 62%);
    opacity: 0.9;
    animation: drift1 42s ease-in-out infinite;
}

.container::after {
    width: 62vmax;
    height: 62vmax;
    bottom: -26%;
    right: -14%;
    background:
        radial-gradient(circle at 58% 40%, var(--tint-c) 0%, transparent 62%),
        radial-gradient(circle at 32% 70%, var(--tint-b) 0%, transparent 62%);
    opacity: 0.85;
    animation: drift2 52s ease-in-out infinite;
}

@keyframes drift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(7vw, 6vh) scale(1.08); }
    66%      { transform: translate(-6vw, 9vh) scale(0.95); }
}
@keyframes drift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-9vw, -7vh) scale(1.12); }
}

/* Fine film grain */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.02;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/></svg>");
}

@media (prefers-color-scheme: dark) {
    body::after { opacity: 0.03; }
}

/* ============================================
   MODAL — fullscreen liquid-glass viewer
   ============================================ */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10500;
    background: color-mix(in srgb, var(--bg-deep) 60%, transparent);
    backdrop-filter: blur(40px) saturate(140%);
    -webkit-backdrop-filter: blur(40px) saturate(140%);
    align-items: center;
    justify-content: center;
    padding: 5vh 5vw;
    animation: modalFade 0.4s var(--ease-out);
}

@keyframes modalFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-content {
    max-width: min(92vw, 1100px);
    max-height: 86vh;
    border-radius: var(--r-card);
    object-fit: contain;
    box-shadow:
        0 40px 100px -10px rgba(0, 0, 0, 0.55),
        0 0 0 1px var(--hairline);
    animation: modalRise 0.5s var(--ease-out);
}

@keyframes modalRise {
    from { opacity: 0; transform: scale(0.96) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Открытое фото: жесты зума (пинч/перетаскивание/двойной тап) обрабатываем сами,
   поэтому отключаем стандартные тач-действия браузера именно на фото. */
#modal-img {
    touch-action: none;
    will-change: transform;
    cursor: zoom-in;
}

.close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-1);
    background: var(--glass-thick);
    backdrop-filter: blur(20px) saturate(var(--sat));
    -webkit-backdrop-filter: blur(20px) saturate(var(--sat));
    border: 1px solid var(--hairline-strong);
    border-radius: 50%;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.4s var(--ease-spring), background 0.35s var(--ease-out);
    z-index: 10600;
    box-shadow: var(--shadow-1), var(--inset-sheen);
}

.close:hover {
    background: var(--glass-frost);
    transform: scale(1.08) rotate(90deg);
}

/* Стрелки листания медиа в полноэкранном просмотре */
.modal-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: none;             /* показываются из JS, когда в галерее >1 файла */
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--glass-thick);
    backdrop-filter: blur(20px) saturate(var(--sat));
    -webkit-backdrop-filter: blur(20px) saturate(var(--sat));
    border: 1px solid var(--hairline-strong);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10600;
    box-shadow: var(--shadow-1), var(--inset-sheen);
    transition: transform 0.35s var(--ease-spring), background 0.35s var(--ease-out);
}

.modal-prev { left: 20px; }
.modal-next { right: 20px; }

/* Счётчик позиции «3 / 10» */
.modal-counter {
    position: fixed;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: none;             /* показывается из JS */
    padding: 7px 16px;
    background: var(--glass-thick);
    backdrop-filter: blur(20px) saturate(var(--sat));
    -webkit-backdrop-filter: blur(20px) saturate(var(--sat));
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-pill);
    color: var(--text-1);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    z-index: 10600;
    box-shadow: var(--shadow-1), var(--inset-sheen);
}

.modal-nav svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--text-1);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.modal-prev:hover { background: var(--glass-frost); transform: translateY(-50%) scale(1.08) translateX(-3px); }
.modal-next:hover { background: var(--glass-frost); transform: translateY(-50%) scale(1.08) translateX(3px); }

@media (max-width: 768px) {
    .modal-nav { width: 44px; height: 44px; }
    .modal-prev { left: 10px; }
    .modal-next { right: 10px; }
    .modal-nav svg { width: 20px; height: 20px; }
}

/* ============================================
   UTILS
   ============================================ */
.hide { display: none !important; }

.page-content {
    position: relative;
    z-index: 5;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    :root { --bar-height: 56px; }
    .close {
        top: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
        font-size: 24px;
    }
}