/* ========================= */
/* FONTS */
/* ========================= */

@font-face{
    font-family:'Aya';
    src:url('../assets/fonts/alight.ttf');
    font-weight:300;
}

@font-face{
    font-family:'Aya';
    src:url('../assets/fonts/aregular.ttf');
    font-weight:400;
}

@font-face{
    font-family:'Aya';
    src:url('../assets/fonts/amedium.ttf');
    font-weight:500;
}

@font-face{
    font-family:'Aya';
    src:url('../assets/fonts/abold.ttf');
    font-weight:700;
}

/* ========================= */
/* ROOT */
/* ========================= */

:root{

    --bg:#050505;

    --bg2:#111111;

    --gold:#d8c9a3;

    --text:#ffffff;

    --muted:#9b9b9b;

    --glass:
    rgba(255,255,255,.03);

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

    --shadow:
    0 20px 60px rgba(0,0,0,.45);

}

/* ========================= */
/* RESET */
/* ========================= */

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

html{
    scroll-behavior:smooth;
}

html,
body{

    width:100%;

    overflow-x:hidden;

    background:var(--bg);

}

body{

    font-family:'Aya';

    color:var(--text);

    min-height:100vh;

    position:relative;

    background:
    radial-gradient(
    circle at top,
    #161616,
    #050505 60%
    );

}

/* ========================= */
/* VHS EFFECT */
/* ========================= */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
    repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.02),
    rgba(255,255,255,.02) 1px,
    transparent 1px,
    transparent 4px
    );

    pointer-events:none;

    z-index:9999;

}

/* ========================= */
/* GLOBAL */
/* ========================= */

.glitch{
    animation:non;
}

.glow{
    text-shadow:
    0 0 20px rgba(255,255,255,.15);
}

.reveal{

    opacity:0;

    transform:
    translateY(70px)
    scale(.96);

    filter:blur(8px);

    transition:
    1.2s cubic-bezier(.19,1,.22,1);

}

.revealed{

    opacity:1;

    transform:
    translateY(0)
    scale(1);

    filter:blur(0);

}

@keyframes glitch{

    0%{
        transform:translate(0);
    }

    20%{
        transform:translate(-1px,1px);
    }

    40%{
        transform:translate(1px,-1px);
    }

    60%{
        transform:translate(-1px,0);
    }

    80%{
        transform:translate(1px,1px);
    }

    100%{
        transform:translate(0);
    }

}

/* ========================= */
/* INTRO */
/* ========================= */

#intro{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:28px;

    background:
    radial-gradient(circle,#111,#000 70%);

    z-index:99999;

    transition:1s;

}

.loading-cassette{

    width:220px;

    height:130px;

    border-radius:18px;

    background:#181818;

    position:relative;

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

    animation:
    cassetteFloat 4s ease-in-out infinite;

}

.loading-cassette::before,
.loading-cassette::after{

    content:'';

    position:absolute;

    width:42px;
    height:42px;

    border-radius:50%;

    border:5px solid #777;

    top:50%;

    transform:translateY(-50%);

    animation:
    spin 4s linear infinite;

}

.loading-cassette::before{
    left:35px;
}

.loading-cassette::after{
    right:35px;
}

.intro-text{

    color:var(--gold);

    letter-spacing:3px;

}

.loading-box{

    width:280px;

    height:8px;

    overflow:hidden;

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

}

.loading-fill{

    width:0;

    height:100%;

    background:var(--gold);

    animation:
    load 3.5s forwards;

}

@keyframes load{

    to{
        width:100%;
    }

}

@keyframes cassetteFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }

}

/* ========================= */
/* PASSWORD */
/* ========================= */

#password-screen{

    position:fixed;

    inset:0;

    background:black;

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

    opacity:0;

    transition:1s;

}

.password-card{

    width:420px;

    max-width:90%;

    padding:40px;

    border-radius:30px;

    background:
    rgba(15,15,15,.75);

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

    backdrop-filter:blur(14px);

    position:relative;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.password-card::before{

    content:'PRIVATE ARCHIVE';

    position:absolute;

    top:18px;
    left:22px;

    font-size:11px;

    letter-spacing:3px;

    color:rgba(255,255,255,.15);

}

.password-card h2{

    font-size:34px;

    margin-bottom:18px;

    color:#f5f1e8;

}

.password-card p{

    color:var(--muted);

    line-height:2;

    margin-bottom:25px;

}

.password-input{

    width:100%;

    padding:16px;

    border-radius:16px;

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

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

    color:white;

    outline:none;

    margin-bottom:18px;

    font-family:'Aya';

    transition:.4s;

}

.password-input:focus{

    border-color:var(--gold);

    box-shadow:
    0 0 20px rgba(216,201,163,.12);

}

.password-btn{

    width:100%;

    padding:16px;

    border:none;

    border-radius:16px;

    background:var(--gold);

    color:black;

    font-family:'Aya';

    font-weight:700;

    cursor:pointer;

    transition:.4s;

}

.password-btn:hover{

    transform:
    translateY(-3px);

}

/* ========================= */
/* SITE */
/* ========================= */

#site{
    display:none;
}

/* ========================= */
/* SECTIONS */
/* ========================= */

.hero,
.section,
.final{

    min-height:100vh;

    padding:60px 20px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    text-align:center;

    position:relative;

}

.hero h1,
.final h2{

    font-size:72px;

    font-weight:900;

}

.section h2{

    font-size:50px;

    margin-bottom:20px;

}

.hero p,
.section p,
.final p{

    max-width:700px;

    line-height:2.2;

    color:#bdbdbd;

}

/* ========================= */
/* CASSETTE */
/* ========================= */

.cassette{

    width:420px;

    max-width:95%;

    height:250px;

    border-radius:24px;

    background:#161616;

    margin-top:40px;

    position:relative;

    overflow:hidden;

    box-shadow:
    0 30px 80px rgba(0,0,0,.45);

    animation:
    cassetteMove 6s ease-in-out infinite;

}

@keyframes cassetteMove{

    0%{
        transform:
        translateY(0px)
        rotate(-.4deg);
    }

    50%{
        transform:
        translateY(-8px)
        rotate(.4deg);
    }

    100%{
        transform:
        translateY(0px)
        rotate(-.4deg);
    }

}

.label{

    position:absolute;

    top:25px;
    left:25px;
    right:25px;

    height:90px;

    background:var(--gold);

    color:black;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

}

.reels{

    position:absolute;

    width:100%;

    bottom:35px;

    display:flex;

    justify-content:space-around;

}

.reel{

    width:80px;

    height:80px;

    border-radius:50%;

    border:7px solid #888;

    animation:
    spin 5s linear infinite;

}

@keyframes spin{

    to{
        transform:rotate(360deg);
    }

}

/* ========================= */
/* TIMER */
/* ========================= */

.love-timer{

    margin-top:45px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:24px;

}

.timer-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:16px;

}

.time-box{

    width:95px;

    height:95px;

    border-radius:20px;

    background:var(--glass);

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

    backdrop-filter:blur(10px);

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    transition:.4s;

}

.time-box:hover{

    transform:
    translateY(-6px);

}

.time-box span{

    font-size:24px;

    font-weight:700;

}

.time-box small{

    color:#999;

    margin-top:6px;

}

/* ========================= */
/* BUTTONS */
/* ========================= */

.controls{

    margin-top:40px;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:14px;

}

.control-btn,
.stop-timer-btn{

    padding:14px 22px;

    border:none;

    border-radius:14px;

    background:#1a1a1a;

    color:white;

    cursor:pointer;

    font-family:'Aya';

    transition:.4s;

}

.control-btn:hover,
.stop-timer-btn:hover{

    transform:
    translateY(-4px);

}

/* ========================= */
/* MEMORY WALL */
/* ========================= */

.memory-wall{

    min-height:100vh;

    padding:120px 20px;

    position:relative;

}

.memory-wall-title{

    font-size:48px;

    text-align:center;

    margin-bottom:70px;

}

.flip-cards-container{

    width:100%;

    max-width:600px;

    margin:70px auto;

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:22px;

    justify-items:center;

}

/* ========================= */
/* FLIP CARD */
/* ========================= */

.flip-card{

    width:110px;

    height:110px;

    perspective:1000px;

    cursor:pointer;

    position:relative;

}

.card-number{

    position:absolute;

    top:-8px;
    right:-8px;

    width:28px;
    height:28px;

    border-radius:50%;

    background:var(--gold);

    color:black;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:10px;

    font-weight:700;

    z-index:5;

}

.flip-card-inner{

    width:100%;
    height:100%;

    position:relative;

    transform-style:preserve-3d;

    transition:1s;

}

.flip-card.active .flip-card-inner{

    transform:rotateY(180deg);

}

.flip-card-front,
.flip-card-back{

    position:absolute;

    inset:0;

    border-radius:24px;

    display:flex;

    justify-content:center;

    align-items:center;

    backface-visibility:hidden;

}

.flip-card-front{

    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,.05),
    rgba(255,255,255,.02)
    );

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

    color:var(--gold);

    font-size:28px;

}

.flip-card-back{

    background:var(--gold);

    color:black;

    transform:rotateY(180deg);

    padding:12px;

    text-align:center;

    font-size:11px;

    line-height:1.5;

}

/* ========================= */
/* POSTER */
/* ========================= */

.memory-poster{

    width:100%;

    max-width:1200px;

    margin:100px auto 0;

    border-radius:32px;


    position:relative;

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

    background:var(--glass);

    box-shadow:var(--shadow);

}

.memory-poster img{

    width:100%;

    height:auto;

    display:block;

    object-fit:contain;

}

.memory-poster:hover img{

    transform:scale(1);

}

/* ========================= */
/* FINAL */
/* ========================= */

.end-line{

    margin-top:40px;

    letter-spacing:5px;

    color:#666;

}

/* ========================= */
/* PARTICLES */
/* ========================= */

.particle{

    position:fixed;

    width:2px;
    height:2px;

    background:white;

    border-radius:50%;

    opacity:.3;

    pointer-events:none;

    animation:
    float linear infinite;

}

@keyframes float{

    from{
        transform:translateY(100vh);
    }

    to{
        transform:translateY(-100vh);
    }

}

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

@media(max-width:768px){

.hero h1,
.final h2{

    font-size:44px;

}

.section h2{

    font-size:34px;

}

.memory-wall-title{

    font-size:34px;

}

.timer-grid{

    grid-template-columns:
    repeat(3,1fr);

}

.time-box{

    width:82px;
    height:82px;

}

.flip-cards-container{

    grid-template-columns:
    repeat(2,1fr);

}

r{

    border-radius:24px;

    margin-top:70px;

}

}
/* ========================= */
/* PASSWORD WRAPPER */
/* ========================= */

.password-wrapper{

    position:relative;

    width:100%;

}

/* INPUT */

.password-input{

    padding-left:55px;

    letter-spacing:3px;

}

/* PASSWORD HEART STYLE */

.heart-password{

    -webkit-text-security: disc;

}

/* TOGGLE BUTTON */

.toggle-password{

    position:absolute;

    top:50%;

    left:15px;

    transform:translateY(-50%);

    width:34px;

    height:34px;

    border:none;

    background:transparent;

    color:#d8c9a3;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}

.toggle-password:hover{

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

}

/* ========================= */
/* MEMORY LOADING */
/* ========================= */

.memory-loading{

    position:fixed;

    inset:0;

    background:black;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:28px;

    z-index:999999;

    opacity:0;

    pointer-events:none;

    transition:1s;

}

.memory-loading.active{

    opacity:1;

    pointer-events:auto;

}

/* LOADER */

.memory-loader{

    width:90px;

    height:90px;

    border-radius:50%;

    border:
    3px solid rgba(255,255,255,.08);

    border-top:
    3px solid #d8c9a3;

    animation:
    spin 1s linear infinite;

    position:relative;

}

.memory-loader::before,
.memory-loader::after{

    content:'';

    position:absolute;

    border-radius:50%;

    inset:10px;

    border:
    2px dashed rgba(255,255,255,.12);

    animation:
    spinReverse 3s linear infinite;

}

.memory-loader::after{

    inset:22px;

    border:
    2px solid rgba(216,201,163,.18);

}

@keyframes spinReverse{

    to{
        transform:rotate(-360deg);
    }

}

/* TEXT */

.memory-loading p{

    color:#d8c9a3;

    font-size:18px;

    letter-spacing:2px;

    animation:
    fadeText 2s ease-in-out infinite;

}

@keyframes fadeText{

    0%{
        opacity:.5;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:.5;
    }

}
/* ========================= */
/* MEMORY PLACES */
/* ========================= */

.memory-places{

    margin-top:140px;

}

.places-title{

    text-align:center;

    font-size:42px;

    margin-bottom:60px;

}

.places-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

    gap:28px;

}

.place-card{

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

    border:
    1px solid rgba(255,255,255,.08);

    border-radius:28px;

    overflow:hidden;

    transition:.5s;

    backdrop-filter:blur(10px);

}

.place-card:hover{

    transform:
    translateY(-10px)
    scale(1.02);

}

.place-card img{

    width:100%;

    height:240px;

    object-fit:cover;

}

.place-content{

    padding:22px;

}

.place-content h3{

    margin-bottom:10px;

    font-size:20px;

}

.place-content p{

    color:#999;

    line-height:1.8;

}

.sad-place{

    opacity:.8;

}

/* ========================= */
/* CUTE GALLERY */
/* ========================= */

.cute-gallery{

    margin-top:140px;

}

.gallery-title{

    text-align:center;

    font-size:40px;

    margin-bottom:55px;

}

.gallery-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(160px,1fr));

    gap:18px;

}

.gallery-grid img{

    width:100%;

    border-radius:24px;

    aspect-ratio:1/1;

    object-fit:cover;

    transition:.5s;

    border:
    1px solid rgba(255,255,255,.08);

}

.gallery-grid img:hover{

    transform:
    scale(1.04)
    rotate(1deg);

}

/* ========================= */
/* MUSIC BAR */
/* ========================= */

.music-bar{
  
  opacity:0;

pointer-events:none;

transition:.6s;

    position:fixed;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    width:340px;

    max-width:90%;

    height:68px;

    background:
    rgba(10,10,10,.65);

    border:
    1px solid rgba(255,255,255,.08);

    border-radius:22px;

    backdrop-filter:blur(18px);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 20px;

    z-index:99999;

    box-shadow:
    0 10px 40px rgba(0,0,0,.35);

}

.music-info{

    display:flex;

    align-items:center;

    gap:12px;

    color:white;

}

.music-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#d8c9a3;

    animation:pulseMusic 1.2s infinite;

}

@keyframes pulseMusic{

    0%{
        transform:scale(1);
        opacity:1;
    }

    50%{
        transform:scale(1.5);
        opacity:.5;
    }

    100%{
        transform:scale(1);
        opacity:1;
    }

}

.music-bar button{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#d8c9a3;

    color:black;

    cursor:pointer;

    font-size:18px;

}
/* ========================= */
/* POLAROID GALLERY */
/* ========================= */

.polaroid-section{

    margin-top:160px;

    position:relative;

}

.polaroid-title{

    text-align:center;

    font-size:42px;

    margin-bottom:80px;

    color:#f5f1e8;

    text-shadow:
    0 0 25px rgba(255,255,255,.08);

}

.polaroid-gallery{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    flex-wrap:wrap;

    gap:40px;

}

/* CARD */

.polaroid-card{

    width:260px;

    background:#f5f5f5;

    padding:14px 14px 26px;

    border-radius:6px;

    position:relative;

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

    transition:.5s;

    overflow:hidden;

}

.polaroid-card:hover{

    transform:
    translateY(-12px)
    scale(1.03)
    rotate(0deg) !important;

}

/* IMAGE */

.polaroid-card img{

    width:100%;

    height:300px;

    object-fit:cover;

    display:block;

    filter:
    contrast(1.04)
    brightness(.96);

    transition:1s;

}

.polaroid-card:hover img{

    transform:scale(1.04);

}

/* CAPTION */

.polaroid-caption{

    text-align:center;

    margin-top:18px;

    color:#111;

    font-size:18px;

    line-height:1.8;

}

/* ROTATION */

.rotate-left{

    transform:rotate(-4deg);

}

.rotate-right{

    transform:rotate(4deg);

}

/* TAPE */

.tape{

    position:absolute;

    top:-10px;

    left:50%;

    transform:translateX(-50%);

    width:90px;

    height:28px;

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

    backdrop-filter:blur(4px);

    border:
    1px solid rgba(255,255,255,.15);

    z-index:5;

    rotate:-3deg;

}

/* LIGHT EFFECT */

.polaroid-card::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.18),
    transparent
    );

    transform:translateX(-120%);

    transition:1s;

}

.polaroid-card:hover::before{

    transform:translateX(120%);

}

/* MOBILE */

@media(max-width:768px){

.polaroid-title{

    font-size:32px;

}

.polaroid-gallery{

    gap:28px;

}

.polaroid-card{

    width:88%;

    max-width:280px;

}

}
/* ========================= */
/* TYPING EFFECT */
/* ========================= */

.typing-text{

    position:relative;

    min-height:1em;

}

/* CURSOR */

.typing-text::after{

    content:'|';

    position:relative;

    margin-right:6px;

    animation:
    blink .7s infinite;

    color:#d8c9a3;

}

@keyframes blink{

    0%{
        opacity:1;
    }

    50%{
        opacity:0;
    }

    100%{
        opacity:1;
    }

}

/* DELAYS */

.delay-1{

    animation-delay:1s;

}

.delay-2{

    animation-delay:2s;

}
/* ========================= */
/* HIDDEN TAPE */
/* ========================= */

.hidden-tape{
    animation:
tapePulse 3s ease-in-out infinite;

    position:fixed;

    bottom:26px;

    right:24px;

    width:44px;

    height:44px;

    border-radius:12px;

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

    border:
    1px solid rgba(255,255,255,.08);

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    backdrop-filter:blur(8px);

    z-index:9999;

    opacity:.55;

    transition:.4s;

    @keyframes tapePulse{

    0%{
        transform:scale(1);
        box-shadow:0 0 0 rgba(255,255,255,0);
    }

    50%{
        transform:scale(1.08);
        box-shadow:0 0 20px rgba(255,255,255,.08);
    }

    100%{
        transform:scale(1);
        box-shadow:0 0 0 rgba(255,255,255,0);
    }

}
    

}

.hidden-tape:hover{

    opacity:1;

    transform:
    scale(1.08)
    rotate(-6deg);

}

/* ========================= */
/* SECRET OVERLAY */
/* ========================= */

.secret-overlay{

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,.72);

    backdrop-filter:blur(12px);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    opacity:0;

    pointer-events:none;

    transition:.5s;

}

.secret-overlay.active{

    opacity:1;

    pointer-events:auto;

}

.secret-box{

    width:500px;

    max-width:90%;

    padding:50px;

    border-radius:28px;

    background:
    rgba(20,20,20,.92);

    border:
    1px solid rgba(255,255,255,.08);

    text-align:center;

    animation:
    secretAppear .6s ease;

    box-shadow:
    0 30px 80px rgba(0,0,0,.45);

}

@keyframes secretAppear{

    from{

        opacity:0;

        transform:
        translateY(40px)
        scale(.96);

    }

    to{

        opacity:1;

        transform:
        translateY(0)
        scale(1);

    }

}

.secret-label{

    display:block;

    margin-bottom:18px;

    color:#d8c9a3;

    letter-spacing:3px;

    font-size:12px;

}

.secret-box h2{

    margin-bottom:18px;

    font-size:36px;

}

.secret-box p{

    line-height:2.2;

    color:#bbb;

    margin-bottom:28px;

}

.secret-box button{

    padding:14px 24px;

    border:none;

    border-radius:14px;

    background:#d8c9a3;

    color:black;

    cursor:pointer;

    font-family:'Aya';

}

/* ========================= */
/* SYSTEM MESSAGE */
/* ========================= */

.system-message{

    position:fixed;

    top:30px;

    left:50%;

    transform:translateX(-50%);

    padding:14px 22px;

    border-radius:14px;

    background:
    rgba(0,0,0,.55);

    border:
    1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    color:#d8c9a3;

    font-size:14px;

    letter-spacing:2px;

    z-index:99999;

    opacity:0;

    transition:.5s;

    pointer-events:none;

}
/* ========================= */
/* FLOATING HEARTS */
/* ========================= */

.floating-heart{

    position:fixed;

    bottom:-20px;

    color:
    rgba(255,255,255,.12);

    font-size:14px;

    pointer-events:none;

    z-index:2;

    animation:
    floatHeart linear forwards;

}

@keyframes floatHeart{

    from{

        transform:
        translateY(0)
        scale(.8);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    to{

        transform:
        translateY(-110vh)
        translateX(40px)
        scale(1.4);

        opacity:0;

    }

}
/* ========================= */
/* MUSIC BAR */
/* ========================= */

.music-bar{

    position:fixed;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    width:340px;

    max-width:90%;

    padding:14px 18px;

    border-radius:22px;

    background:
    rgba(15,15,15,.7);

    border:
    1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(14px);

    display:flex;

    align-items:center;

    gap:16px;

    z-index:99999;

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

}

/* BUTTON */

.music-bar button{

    width:44px;

    height:44px;

    border:none;

    border-radius:50%;

    background:#d8c9a3;

    color:black;

    cursor:pointer;

    font-size:18px;

}

/* INFO */

.music-info{

    flex:1;

}

.music-title{

    font-size:14px;

    margin-bottom:8px;

    color:#f5f1e8;

}

/* PROGRESS */

.music-progress{

    width:100%;

    height:4px;

    border-radius:10px;

    overflow:hidden;

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

}

.music-progress-fill{

    width:0%;

    height:100%;

    border-radius:20px;

    background:
    linear-gradient(
    90deg,
    #d8c9a3,
    white
    );

    transition:
    width .15s linear;

}

@keyframes musicProgress{

    from{
        width:0%;
    }

    to{
        width:100%;
    }

}

/* WAVES */

.music-wave{

    width:70px;

    height:34px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:4px;

    flex-shrink:0;

}


    display:block;

    width:4px;

    border-radius:10px;

    background:#d8c9a3;

    transform-origin:bottom;

}

/* HEIGHTS */

.music-wave span:nth-child(1){

    height:10px;

}

.music-wave span:nth-child(2){

    height:22px;

}

.music-wave span:nth-child(3){

    height:14px;

}

.music-wave span:nth-child(4){

    height:26px;

}

@keyframes waveBounce{

    0%,100%{

        transform:scaleY(.6);

    }

    50%{

        transform:scaleY(1.2);

    }

}
/* ========================= */
/* TAPE HINT */
/* ========================= */

.tape-hint{

    position:absolute;

    bottom:62px;

    right:50%;

    transform:translateX(50%);

    background:
    rgba(15,15,15,.82);

    border:
    1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    color:#f5f1e8;

    padding:10px 14px;

    border-radius:14px;

    font-size:12px;

    white-space:nowrap;

    opacity:0;

    pointer-events:none;

    transition:.4s;

    box-shadow:
    0 10px 30px rgba(0,0,0,.35);

}

/* SMALL ARROW */

.tape-hint::after{

    content:'';

    position:absolute;

    bottom:-6px;

    right:50%;

    transform:translateX(50%) rotate(45deg);

    width:12px;

    height:12px;

    background:
    rgba(15,15,15,.82);

    border-right:
    1px solid rgba(255,255,255,.08);

    border-bottom:
    1px solid rgba(255,255,255,.08);

}

/* SHOW */

.tape-hint{

    position:absolute;

    bottom:72px;

    right:50%;

    transform:translateX(50%);

    background:
    rgba(15,15,15,.82);

    border:
    1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    color:#f5f1e8;

    padding:10px 14px;

    border-radius:14px;

    font-size:12px;

    white-space:nowrap;

    opacity:1;

    pointer-events:none;

    box-shadow:
    0 10px 30px rgba(0,0,0,.35);

    animation:
    hintFloat 3s ease-in-out infinite;

}
@keyframes hintFloat{

    0%{
        transform:
        translateX(50%)
        translateY(0px);
    }

    50%{
        transform:
        translateX(50%)
        translateY(-6px);
    }

    100%{
        transform:
        translateX(50%)
        translateY(0px);
    }

}
/* ========================= */
/* VHS OVERLAY */
/* ========================= */

.vhs-overlay{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:9998;

    overflow:hidden;

}

/* SCANLINES */

.vhs-overlay::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.025),
    rgba(255,255,255,.025) 1px,
    transparent 1px,
    transparent 4px
    );

    opacity:.35;

    animation:
    scanMove 8s linear infinite;

}

/* STATIC */

.vhs-overlay::after{

    content:'';

    position:absolute;

    inset:0;

    background-image:
    radial-gradient(
    rgba(255,255,255,.04) 1px,
    transparent 1px
    );

    background-size:3px 3px;

    opacity:.08;

    mix-blend-mode:screen;

    animation:
    staticFlicker .25s infinite;

}

@keyframes scanMove{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(6px);
    }

}

@keyframes staticFlicker{

    0%{
        opacity:.05;
    }

    50%{
        opacity:.09;
    }

    100%{
        opacity:.04;
    }

}
/* ========================= */
/* CINEMATIC ENDING */
/* ========================= */

.cinematic-ending{

    position:relative;

    overflow:hidden;

}

/* DARK OVERLAY */

.ending-overlay{

    position:absolute;

    inset:0;

    background:
    radial-gradient(
    circle at center,
    transparent,
    rgba(0,0,0,.55)
    );

    pointer-events:none;

}

/* TITLE */

.ending-title{

    font-size:64px;

    margin-bottom:24px;

    position:relative;

    z-index:2;

}

/* TEXT */

.ending-text{

    max-width:700px;

    line-height:2.4;

    color:#cfcfcf;

    position:relative;

    z-index:2;

}

/* END LINE */

.end-line{

    margin-top:50px;

    font-size:22px;

    letter-spacing:6px;

    color:#d8c9a3;

    position:relative;

    z-index:2;

    opacity:.85;

}

/* CINEMATIC FADE */

.cinematic-ending::after{

    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to bottom,
    transparent,
    rgba(0,0,0,.5)
    );

    pointer-events:none;

}
/* ========================= */
/* FIXES */
/* ========================= */

html,
body{

    overflow-x:hidden;

    background:#050505;

}

/* ========================= */
/* LIVE TYPING */
/* ========================= */

.typing-text{

    position:relative;

    display:inline-block;

    min-height:1em;

}

.typing-text::after{

    content:'';

    position:absolute;

    left:-8px;

    top:50%;

    transform:translateY(-50%);

    width:2px;

    height:1em;

    background:#d8c9a3;

    animation:
    cursorBlink .7s infinite;

}

@keyframes cursorBlink{

    0%{
        opacity:1;
    }

    50%{
        opacity:0;
    }

    100%{
        opacity:1;
    }

}

/* ========================= */
/* REVEAL */
/* ========================= */

.reveal{

    opacity:0;

    transform:
    translateY(70px)
    scale(.96);

    filter:blur(10px);

    transition:
    opacity 1.2s cubic-bezier(.19,1,.22,1),
    transform 1.2s cubic-bezier(.19,1,.22,1),
    filter 1.2s cubic-bezier(.19,1,.22,1);

}

.revealed{

    opacity:1;

    transform:
    translateY(0)
    scale(1);

    filter:blur(0);

}

/* ========================= */
/* VHS OVERLAY */
/* ========================= */

.vhs-overlay{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:9998;

    overflow:hidden;

}

.vhs-overlay::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.025),
    rgba(255,255,255,.025) 1px,
    transparent 1px,
    transparent 4px
    );

    opacity:.3;

    animation:
    scanMove 8s linear infinite;

}

.vhs-overlay::after{

    content:'';

    position:absolute;

    inset:0;

    background-image:
    radial-gradient(
    rgba(255,255,255,.04) 1px,
    transparent 1px
    );

    background-size:3px 3px;

    opacity:.05;

    mix-blend-mode:screen;

    animation:
    staticFlicker .25s infinite;

}

@keyframes scanMove{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(6px);
    }

}

@keyframes staticFlicker{

    0%{
        opacity:.03;
    }

    50%{
        opacity:.07;
    }

    100%{
        opacity:.04;
    }

}

/* ========================= */
/* FLOATING HEARTS */
/* ========================= */

.floating-heart{

    position:fixed;

    bottom:-20px;

    color:
    rgba(255,255,255,.12);

    font-size:14px;

    pointer-events:none;

    z-index:2;

    animation:
    floatHeart linear forwards;

}

@keyframes floatHeart{

    from{

        transform:
        translateY(0)
        scale(.8);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    to{

        transform:
        translateY(-110vh)
        translateX(40px)
        scale(1.4);

        opacity:0;

    }

}

/* ========================= */
/* HIDDEN TAPE */
/* ========================= */

.hidden-tape{

    position:fixed;

    bottom:95px;

    right:22px;

    width:54px;

    height:54px;

    border-radius:50%;

    background:
    rgba(15,15,15,.7);

    border:
    1px solid rgba(255,255,255,.08);

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    backdrop-filter:blur(10px);

    z-index:9999;

    font-size:22px;

    opacity:.6;

    transition:.4s;

    animation:
    tapePulse 3s ease-in-out infinite;

}

.hidden-tape:hover{

    transform:
    scale(1.08);

    opacity:1;

}

@keyframes tapePulse{

    0%{

        transform:scale(1);

        box-shadow:
        0 0 0 rgba(255,255,255,0);

    }

    50%{

        transform:scale(1.08);

        box-shadow:
        0 0 20px rgba(255,255,255,.08);

    }

    100%{

        transform:scale(1);

        box-shadow:
        0 0 0 rgba(255,255,255,0);

    }

}

/* ========================= */
/* TAPE HINT */
/* ========================= */

.tape-hint{

    position:absolute;

    bottom:72px;

    right:50%;

    transform:translateX(50%);

    background:
    rgba(15,15,15,.82);

    border:
    1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    color:#f5f1e8;

    padding:10px 14px;

    border-radius:14px;

    font-size:12px;

    white-space:nowrap;

    pointer-events:none;

    box-shadow:
    0 10px 30px rgba(0,0,0,.35);

    animation:
    hintFloat 3s ease-in-out infinite;

}

.tape-hint::after{

    content:'';

    position:absolute;

    bottom:-6px;

    right:50%;

    transform:
    translateX(50%)
    rotate(45deg);

    width:12px;

    height:12px;

    background:
    rgba(15,15,15,.82);

    border-right:
    1px solid rgba(255,255,255,.08);

    border-bottom:
    1px solid rgba(255,255,255,.08);

}

@keyframes hintFloat{

    0%{

        transform:
        translateX(50%)
        translateY(0px);

    }

    50%{

        transform:
        translateX(50%)
        translateY(-6px);

    }

    100%{

        transform:
        translateX(50%)
        translateY(0px);

    }

}

/* ========================= */
/* SYSTEM MESSAGE */
/* ========================= */

.system-message{

    position:fixed;

    top:22px;

    left:50%;

    transform:translateX(-50%);

    background:
    rgba(0,0,0,.55);

    border:
    1px solid rgba(255,255,255,.08);

    padding:12px 18px;

    border-radius:16px;

    backdrop-filter:blur(10px);

    color:#d8c9a3;

    font-size:13px;

    z-index:99999;

    opacity:0;

    transition:.5s;

    pointer-events:none;

}

/* ========================= */
/* CINEMATIC ENDING */
/* ========================= */

.cinematic-ending{

    position:relative;

    overflow:hidden;

}

.ending-overlay{

    position:absolute;

    inset:0;

    background:
    radial-gradient(
    circle at center,
    transparent,
    rgba(0,0,0,.55)
    );

    pointer-events:none;

}

.ending-title{

    font-size:64px;

    margin-bottom:24px;

    position:relative;

    z-index:2;

}

.ending-text{

    max-width:700px;

    line-height:2.4;

    color:#cfcfcf;

    position:relative;

    z-index:2;

}

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

@media(max-width:768px){

    .hidden-tape{

        width:50px;
        height:50px;

        bottom:90px;

    }

    .ending-title{

        font-size:42px;

    }

    .typing-text{

        font-size:18px;

    }

}


/* PLAYER GLOW */

.music-bar.playing{

    box-shadow:
    0 0 35px rgba(216,201,163,.12);

}

/* PROGRESS GLOW */

.music-bar.playing .music-progress-fill{

    box-shadow:
    0 0 18px rgba(216,201,163,.35);

}
/* ACTIVE MUSIC */

.music-bar.playing .music-wave span{

    animation:
    waveBounce 1s infinite ease-in-out;

}

.music-bar.playing .music-wave span:nth-child(1){

    animation-delay:.1s;

}

.music-bar.playing .music-wave span:nth-child(2){

    animation-delay:.3s;

}

.music-bar.playing .music-wave span:nth-child(3){

    animation-delay:.5s;

}

.music-bar.playing .music-wave span:nth-child(4){

    animation-delay:.7s;

}

@keyframes waveBounce{

    0%{

        transform:
        scaleY(.5);

        opacity:.5;

    }

    50%{

        transform:
        scaleY(1.5);

        opacity:1;

    }

    100%{

        transform:
        scaleY(.5);

        opacity:.5;

    }

}
/* ========================= */
/* FLOATING PLAYER */
/* ========================= */

.floating-player{

    position:fixed;

    bottom:20px;

    left:20px;

    width:72px;

    height:72px;

    z-index:99999;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* BUTTON */

.player-btn{

    width:58px;

    height:58px;

    border-radius:50%;

    border:none;

    background:
    rgba(15,15,15,.82);

    backdrop-filter:blur(10px);

    color:white;

    font-size:20px;

    cursor:pointer;

    position:absolute;

    z-index:3;

    box-shadow:
    0 10px 30px rgba(0,0,0,.35);

}

/* SVG */

.player-ring{

    position:absolute;

    inset:0;

}

.player-ring svg{

    width:100%;

    height:100%;

    transform:rotate(-90deg);

}

.ring-bg{

    fill:none;

    stroke:
    rgba(255,255,255,.08);

    stroke-width:4;

}

.ring-progress{

    fill:none;

    stroke:#d8c9a3;

    stroke-width:4;

    stroke-linecap:round;

    transition:.15s linear;

}

/* WAVE */

.player-wave{

    position:absolute;

    display:flex;

    align-items:flex-end;

    gap:3px;

    height:24px;

}

.player-wave span{

    width:4px;

    border-radius:10px;

    background:#d8c9a3;

    opacity:0;

}

/* PLAYING */

.floating-player.playing .player-wave span{

    animation:
    waveBounce .9s infinite ease-in-out;

    opacity:1;

}

.floating-player.playing .player-wave span:nth-child(2){

    animation-delay:.2s;

}

.floating-player.playing .player-wave span:nth-child(3){

    animation-delay:.4s;

}

@keyframes waveBounce{

    0%{

        height:8px;

    }

    50%{

        height:22px;

    }

    100%{

        height:8px;

    }

}
/* ========================= */
/* REAL PLAYER */
/* ========================= */

.music-btn{

    cursor:pointer;

    transition:.3s;

}

.music-btn:hover{

    transform:
    scale(1.06);

}

/* ACTIVE */

.music-bar.playing{

    box-shadow:
    0 0 35px rgba(216,201,163,.14);

}

/* WAVES */

.music-wave span{

    transform-origin:bottom;

}

/* MOVE */

.music-bar.playing .music-wave span{

    animation:
    musicWave .9s infinite ease-in-out;

}

.music-bar.playing .music-wave span:nth-child(1){

    animation-delay:.1s;

}

.music-bar.playing .music-wave span:nth-child(2){

    animation-delay:.3s;

}

.music-bar.playing .music-wave span:nth-child(3){

    animation-delay:.5s;

}

.music-bar.playing .music-wave span:nth-child(4){

    animation-delay:.7s;

}

/* PROGRESS */

.music-progress-fill{

    transition:
    width .15s linear;

}

/* ========================= */
/* REAL AUDIO VISUALIZER */
/* ========================= */

.music-wave{

    display:flex;

    align-items:center;

    gap:4px;

    height:32px;

}
.music-wave span{

    width:4px;

    min-height:8px;

    max-height:26px;

    height:10px;

    border-radius:20px;

    background:#d8c9a3;

    transition:
height .06s linear;
    opacity:.9;

}
/* ========================= */
/* CINEMATIC FLOAT REVEAL */
/* ========================= */

.place-card,
.gallery-grid img{

    opacity:0;

    will-change:
    opacity,
    filter;

}

/* SHOW */

.place-card.reveal-show,
.gallery-grid img.reveal-show{

    animation:
    cinematicReveal 1.4s
    cubic-bezier(.19,1,.22,1)
    forwards;

}

/* KEYFRAMES */

@keyframes cinematicReveal{

    0%{

        opacity:0;

        filter:
        blur(12px)
        brightness(.7);

    }

    40%{

        opacity:.6;

        filter:
        blur(4px)
        brightness(.9);

    }

    100%{

        opacity:1;

        filter:
        blur(0)
        brightness(1);

    }

}
/* ========================= */
/* SECRET BOX FIX */
/* ========================= */

.secret-box{

    width:90%;

    max-width:420px;

    height:70vh;

    padding:30px 22px;

    overflow-y:auto;

    overflow-x:hidden;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}
/* ========================= */
/* SECRET CONTENT SCROLL */
/* ========================= */

.secret-box{

    width:90%;

    max-width:420px;

    height:70vh;

    padding:30px 22px;

    display:flex;

    flex-direction:column;

}

/* CONTENT */

.secret-content{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    padding-left:4px;

}

/* SCROLLBAR */

.secret-content::-webkit-scrollbar{

    width:4px;

}

.secret-content::-webkit-scrollbar-thumb{

    background:
    rgba(216,201,163,.35);

    border-radius:20px;

}

/* SCROLL HINT */

.scroll-hint{

    font-size:22px;

    color:#d8c9a3;

    text-align:center;

    margin:10px 0;

    animation:
    hintBounce 1.5s infinite;

    opacity:.7;

}

/* ANIMATION */

@keyframes hintBounce{

    0%{

        transform:
        translateY(0);

    }

    50%{

        transform:
        translateY(6px);

    }

    100%{

        transform:
        translateY(0);

    }

}
/* ========================= */
/* MEMORY POSTER FIX */
/* ========================= */

.memory-poster{

    width:100% !important;

    height:auto !important;

    min-height:unset !important;

    overflow:visible !important;

}

.memory-poster img{

    width:100% !important;

    height:auto !important;

    max-width:100% !important;

    object-fit:contain !important;

    display:block;

}