/* =====================================================
   PENNA 2026
   Wedding Guide
===================================================== */

:root{
    --bg-dark:#08211c;
    --bg:#0d322a;
    --bg-light:#17463b;

    --gold:#d4af37;
    --gold-light:#ecd98d;

    --white:#ffffff;

    --glass:rgba(255,255,255,.08);
    --glass-border:rgba(255,255,255,.18);

    --shadow:
        0 20px 50px rgba(0,0,0,.35);

    --transition:.35s ease;
}

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:
        "Inter",
        sans-serif;

    background:
        radial-gradient(
            circle at top,
            var(--bg-light),
            var(--bg) 55%,
            var(--bg-dark)
        );

    overflow:hidden;

    color:white;

    user-select:none;

}

/* =====================================================
   SPLASH
===================================================== */

#splash{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
        radial-gradient(
            circle,
            #18493d,
            #0b2f27
        );

    z-index:999;

    transition:
        opacity .8s ease,
        visibility .8s;

}

#splash.fade{

    opacity:0;

    visibility:hidden;

}

.splash-content{

    text-align:center;

    animation:
        splashFade 1.2s ease;

}

.crest{

    font-size:54px;

    color:var(--gold);

    margin-bottom:20px;

}

.splash-content h1{

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:4rem;

    font-weight:500;

    letter-spacing:5px;

    color:var(--gold);

}

.splash-content span{

    color:white;

}

.splash-content p{

    margin-top:12px;

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:.9rem;

    opacity:.9;

}

/* =====================================================
   APP
===================================================== */

.hidden{

    opacity:0;

}

#app{

    width:100vw;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:opacity .6s ease;

}

.viewer{

    position:relative;

    width:92%;

    max-width:760px;

    height:92vh;

}

#app.show{

    opacity:1;

}

/* =====================================================
   SLIDER
===================================================== */

.slider{

    display:flex;

    width:100%;

    height:100%;

    overflow-x:auto;

    scroll-behavior:smooth;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;

}

.slider::-webkit-scrollbar{

    display:none;

}

.slide{

    flex:0 0 100%;

    scroll-snap-align:center;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:0;

}

.slide img{

    width:100%;

    max-width:760px;

    max-height:100%;

    object-fit:contain;

    border-radius:24px;

    transition:transform .35s ease;

    animation:imageFade .8s ease;

}

.slide img:hover{

    transform:translateY(-4px);

}

/* =====================================================
   NAVIGATION
===================================================== */

.nav-button{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:var(--glass);

    backdrop-filter:blur(18px);

    border:1px solid var(--glass-border);

    color:white;

    font-size:22px;

    cursor:pointer;

    transition:var(--transition);

    z-index:50;

}

.nav-button:hover{

    transform:
        translateY(-50%)
        scale(1.08);

    background:
        rgba(255,255,255,.18);

}

.nav-button:disabled{

    opacity:.3;

    cursor:default;

}

.left{

    left:16px;

}

.right{

    right:16px;

}

/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes splashFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes imageFade{

    from{

        opacity:0;

        transform:
            scale(.96);

    }

    to{

        opacity:1;

        transform:
            scale(1);

    }

}

/* =====================================================
   TABLET
===================================================== */

@media (max-width:1024px){

    .slide img{

        max-height:100vh;

    }

}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width:768px){

    .viewer{

        width:100%;

        height:100vh;

    }

    .slide img{

        border-radius:16px;

    }

    .nav-button{

        display:none;

    }

    .splash-content h1{

        font-size:2.8rem;

        letter-spacing:2px;

    }

    .crest{

        font-size:42px;

    }

}