/* ============================================
   PixelScale.de – Fullpage Slide System
   Mobile-First: Natürlicher Scrollflow auf Mobile & Tablet (< 1024px)
   Volles Slide-Snap & Apple Liquid Glass auf Desktop (>= 1024px)
   Nur auf der Startseite aktiv (body.is-home)
   ============================================ */

/* ── Base (Mobile & Tablet < 1024px): Natürlicher Scrollflow ── */
html:has(body.is-home) {
    scroll-snap-type: none;
    scroll-behavior: smooth;
}

/* Slides: Fließen auf Mobilgeräten natürlich mit eigenem Inhalt */
.slide {
    min-height: auto;
    scroll-snap-align: none;
    display: flex;
    align-items: center;
    position: relative;
}

/* Hero behält auf allen Viewports volle Höhe */
.hero.slide {
    min-height: calc(100dvh - var(--header-height));
}

body.is-home .footer {
    scroll-snap-align: none;
}

/* Slide Dot-Navigation auf Mobile & Tablet vollständig ausgeblendet */
.slide-nav {
    display: none !important;
}

/* ── Dynamischer Header-Hintergrund ── */
.header--theme-alt:not(.header--scrolled) {
    background: rgba(247, 247, 251, 0.4);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.header--theme-alt.header--scrolled {
    background: rgba(247, 247, 251, 0.9);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* Header-Schatten auf der Startseite komplett entfernen */
body.is-home .header,
body.is-home .header.header--scrolled,
body.is-home .header.header--theme-alt,
body.is-home .header.header--theme-alt.header--scrolled {
    box-shadow: none;
}

/* ── Referenzen-Slide: 4:3 Cards passend zum 1256x942px Format ── */
.slide .project-card {
    aspect-ratio: 4 / 3;
    background: #FFFFFF;
    border: none;
    box-shadow: none;
}

.slide .project-card:hover {
    border: none;
    box-shadow: none;
}

.slide .grid--3,
.slide .grid--2 {
    gap: var(--space-lg);
}

/* ── Kontakt Slide ── */
.kontakt-slide__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.kontakt-slide__text {
    color: var(--color-text-secondary);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-xl);
}

.kontakt-slide__email {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    text-decoration: none;
    transition: all var(--transition-base);
}

.kontakt-slide__email svg {
    flex-shrink: 0;
}

.kontakt-slide__email:hover {
    color: var(--color-primary-dark);
    gap: var(--space-md);
}

.kontakt-slide__form .form-group {
    margin-bottom: var(--space-md);
}

/* ── Tablet Anpassungen ── */
@media (min-width: 768px) {
    .kontakt-slide__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Desktop (>= 1024px): Fullpage Slide-Snap & Apple Liquid Glass ── */
@media (min-width: 1024px) {
    /* Scroll-Snap Container */
    html:has(body.is-home) {
        scroll-snap-type: y mandatory;
        scroll-padding-top: var(--header-height);
    }

    /* Einzelner Slide mit vollem Viewport-Snap */
    .slide {
        scroll-snap-align: start;
        min-height: calc(100dvh - var(--header-height));
    }

    /* Footer als letzter Snap-Punkt */
    body.is-home .footer {
        scroll-snap-align: end;
    }

    /* ── Apple Liquid Glass Dot-Navigation (Pille) ── */
    .slide-nav {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        position: fixed;
        left: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: var(--z-sticky);
        padding: 1.125rem 0.625rem;
        border-radius: 9999px;
        overflow: hidden;

        /* VisionOS Glass Shader: Sichtbare Lichtbrechung & Glanz auch auf weißem Hintergrund */
        background: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.65) 0%,
            rgba(255, 255, 255, 0.25) 40%,
            rgba(255, 255, 255, 0.12) 65%,
            rgba(255, 255, 255, 0.45) 100%
        );
        backdrop-filter: blur(24px) saturate(190%) contrast(104%);
        -webkit-backdrop-filter: blur(24px) saturate(190%) contrast(104%);
        border: 1px solid rgba(255, 255, 255, 0.85);
        box-shadow:
            /* Sanfter Schwebeschatten auf den hellen Hintergrund */
            0 20px 40px -8px rgba(0, 0, 0, 0.10),
            0 4px 12px -2px rgba(0, 0, 0, 0.04),
            /* Scharfe obere Glaskante (Specular Rim) */
            inset 0 1.5px 1px 0 #ffffff,
            /* Untere Umgebungsreflexion */
            inset 0 -1.5px 1px 0 rgba(255, 255, 255, 0.6),
            /* Seitliche Glanzkanten */
            inset 1px 0 1px 0 rgba(255, 255, 255, 0.8),
            inset -1px 0 1px 0 rgba(255, 255, 255, 0.8),
            /* Optische Refraktions-Tiefe (verleiht dem Glas physische Dicke auf weiß) */
            inset 0 0 10px 1.5px rgba(0, 0, 0, 0.045);

        opacity: 0;
        animation: slideNavFadeIn 0.6s var(--ease-out) 0.8s both;
    }

    /* Echte optische Lichtbrechung via SVG Displacement Map (Chromium) */
    .slide-nav.has-liquid-glass {
        backdrop-filter: blur(20px) saturate(190%) contrast(104%) url(#liquid-glass-pill);
        -webkit-backdrop-filter: blur(20px) saturate(190%) contrast(104%) url(#liquid-glass-pill);
    }

    /* Statischer Apple VisionOS 3D Glanzkanten-Gradient */
    .slide-nav::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.75) 0%,
            rgba(255, 255, 255, 0.2) 28%,
            rgba(255, 255, 255, 0) 50%,
            rgba(255, 255, 255, 0.12) 80%,
            rgba(255, 255, 255, 0.3) 100%
        );
        pointer-events: none;
        z-index: 0;
    }

    /* Feine innere Kaustik-Facette (Doppelkanten-Effekt wie bei Apple Hardware) */
    .slide-nav::after {
        content: '';
        position: absolute;
        inset: 1px;
        border-radius: inherit;
        border: 1px solid rgba(255, 255, 255, 0.45);
        pointer-events: none;
        z-index: 0;
    }

    /* Einzelner Navigations-Dot (Laser-gravierter Look im Glas) */
    .slide-nav__dot {
        position: relative;
        z-index: 1;
        width: 10px;
        height: 10px;
        border-radius: var(--radius-full);
        background: rgba(30, 32, 48, 0.28);
        box-shadow: 
            inset 0 1px 1px rgba(0, 0, 0, 0.2),
            0 1px 1px rgba(255, 255, 255, 0.9);
        border: none;
        cursor: pointer;
        transition: all 0.35s var(--ease-out);
        padding: 0;
        outline: none;
    }

    /* Vergrößerter Klick- / Touchbereich */
    .slide-nav__dot::before {
        content: '';
        position: absolute;
        inset: -6px;
        border-radius: var(--radius-full);
    }

    .slide-nav__dot:hover {
        background: rgba(30, 32, 48, 0.55);
        transform: scale(1.3);
        box-shadow: 
            inset 0 1px 1.5px rgba(0, 0, 0, 0.3),
            0 1px 2px #ffffff;
    }

    /* Aktiver Dot als leuchtender Rubin-Kristall */
    .slide-nav__dot.is-active {
        width: 12px;
        height: 12px;
        background: var(--color-primary);
        box-shadow: 
            0 0 0 3.5px rgba(var(--color-primary-rgb), 0.22),
            0 2px 10px rgba(var(--color-primary-rgb), 0.5),
            inset 0 1px 1px rgba(255, 255, 255, 0.6);
    }

    .slide-nav__dot.is-active:hover {
        transform: scale(1.15);
    }

    /* Tooltip-Label (VisionOS Frosted Glass) */
    .slide-nav__label {
        position: absolute;
        left: calc(100% + 0.75rem);
        top: 50%;
        transform: translateY(-50%) translateX(-0.5rem);
        white-space: nowrap;
        font-size: var(--fs-xs);
        font-weight: var(--fw-medium);
        color: var(--color-text);
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 0.375rem 0.75rem;
        border-radius: var(--radius-md);
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: var(--shadow-md);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.3s var(--ease-out);
    }

    .slide-nav__dot:hover .slide-nav__label {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(0);
    }
}

/* Einblendungsanimation */
@keyframes slideNavFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-1rem);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

/* ── Barrierefreiheit: Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    html:has(body.is-home) {
        scroll-snap-type: none !important;
    }

    .slide-nav {
        animation: none !important;
        opacity: 1 !important;
    }
}