/* ─── Reset & Tokens ──────────────────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-color: #000000;
    --text-color: #ffffff;
    --font-main: 'Outfit', sans-serif;
    /* Shared logo width — intro stable logo and main scroll logo use the same value */
    --adart-logo-w:        clamp(210px, 21vw, 320px);
    --adart-logo-w-mobile: clamp(130px, 44vw, 230px);
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

html,
body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

html {
    overflow-y: scroll;
}

/* ─── Interaction Lock ────────────────────────────────────────────────────── */
.lock-interaction {
    overflow: hidden !important;
    touch-action: none;
    pointer-events: none;
    user-select: none;
}

/* ─── Intro Sequence ──────────────────────────────────────────────────────── */
#intro-sequence {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    background: #000;
    z-index: 9000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.intro-images-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.intro-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
}

.intro-device-img {
    position: absolute;
    max-width: 95vw;
    max-height: 90vh;
    max-height: 90svh;
    width: auto;
    height: auto;
    object-fit: contain;
    z-index: 1;
    backface-visibility: hidden;
}

/* ─── Stable intro logo: one logo, above all slides, never animated ───── */
#intro-stable-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--adart-logo-w);
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
    image-rendering: auto;
    object-fit: contain;
    z-index: 5;
    opacity: 1;
    visibility: visible;
    filter: none;
    pointer-events: none;
    backface-visibility: visible;
    transform-style: flat;
}

@media (max-width: 768px) {
    #intro-stable-logo {
        width: var(--adart-logo-w-mobile);
    }
}

/* ─── Full Logo Stage (final intro frame + cinematic start) ───────────────── */
#full-logo-stage {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
}

#main-logo-image {
    position: relative;
    z-index: 3;
    width: var(--adart-logo-w);
    max-width: none;
    height: auto;
    display: block;
    image-rendering: auto;
    object-fit: contain;
    transform-origin: center center;
    filter: none;
    backface-visibility: visible;
    transform-style: flat;
}

/* ─── Cinematic vignette ───────────────────────────────────────────────────── */
#full-logo-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 768px) {
    #main-logo-image {
        width: var(--adart-logo-w-mobile);
    }
}

/* ─── Scene Reveal Layers ─────────────────────────────────────────────────── */
.scene-reveal-layer {
    position: fixed;
    inset: 0;
    z-index: 120;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Black backing — frames never expose raw browser bg, must be fully opaque */
.scene-reveal-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #000000;
    opacity: 1;
    z-index: 0;
}

.frame-container {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 2;
}

/* Cinematic vignette on every frame (above img, below nothing) */
.frame-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.38) 100%);
    pointer-events: none;
    z-index: 1;
}

.frame-container img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center bottom;
    display: block;
    background: #000;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* ─── Mobile: portrait-safe fit with tuned scaling ──── */
@media (max-width: 768px) {
    .scene-reveal-layer,
    .frame-container {
        width: 100vw;
        height: 100svh;
        overflow: hidden;
        background: #000;
    }

    .frame-container img {
        width: 100vw;
        height: 100svh;
        object-fit: cover;
        object-position: center center;
        background: #000;
        transform-origin: 50% 50%;
    }
}

/* Fallback if mobile images do not exist / fail to load */
@media (max-width: 768px) {
    body:not(.has-mobile-frames) .frame-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body:not(.has-mobile-frames) .frame-container img {
        object-fit: contain;
        object-position: center center;
    }
}

/* Fallback for browsers that don't support svh */
@media (max-width: 768px) {
    @supports not (height: 100svh) {
        .scene-reveal-layer,
        .frame-container,
        .frame-container img {
            height: 100vh;
        }
    }
}

@supports not (height: 100svh) {
    #intro-sequence {
        height: 100vh;
    }
}



/* ─── Film grain overlay (CSS-only, static noise) ───────────────────────── */
#full-logo-stage::before,
.scene-reveal-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255,255,255,0.012) 2px,
            rgba(255,255,255,0.012) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 3px,
            rgba(255,255,255,0.008) 3px,
            rgba(255,255,255,0.008) 6px
        );
    opacity: 0.045;
    pointer-events: none;
    z-index: 5;
    animation: grainPulse 4s ease-in-out infinite alternate;
}

@keyframes grainPulse {
    from { opacity: 0.03; }
    to   { opacity: 0.06; }
}

/* ─── Scroll Spacer ───────────────────────────────────────────────────────── */
.scroll-height {
    width: 100%;
    /* height set dynamically via JS */
}

/* ─── JS Load Failure Fallback ───────────────────────────────────────────── */
.js-failed #intro-sequence {
    display: none !important;
}

.js-failed #full-logo-stage {
    opacity: 1 !important;
    visibility: visible !important;
}

.js-failed #main-logo-image {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.js-failed .scene-reveal-layer {
    display: none !important;
}