/* bada.cafe - Deep-Sea Cafe Horizontal Experience */

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

:root{
    --hadal:#0A0E14;
    --bathyal:#141B26;
    --meso:#1C2A3A;
    --bio-teal:#00E5CC;
    --crema:#D4A76A;
    --phosphor:#FF6B8A;
    --seafoam:#E8F0F2;
    --abyssal-gray:#7A8B99;
}

html,body{
    overflow:hidden;
    height:100vh;
}

body{
    background:var(--hadal);
    color:var(--seafoam);
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.5vw,1.15rem);
    line-height:1.75;
}

/* Aurora light */
.aurora{
    position:fixed;
    top:0;left:0;right:0;
    height:15vh;
    background:linear-gradient(180deg,rgba(0,229,204,0.06),transparent);
    z-index:2;
    pointer-events:none;
}

/* Particle field */
.particle-field{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    overflow:hidden;
}

.bio-particle{
    position:absolute;
    width:2px;height:2px;
    border-radius:50%;
    will-change:transform;
}

.bio-particle.teal{
    background:var(--bio-teal);
    box-shadow:0 0 4px var(--bio-teal);
}

.bio-particle.pink{
    background:var(--phosphor);
    box-shadow:0 0 4px var(--phosphor);
}

/* Coffee beans */
.bean-field{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
}

.coffee-bean{
    position:absolute;
    width:16px;height:22px;
}

.cb-1{top:15%;left:10%;animation:beanFloat 50s linear infinite,beanSpin 45s linear infinite}
.cb-2{top:60%;left:30%;animation:beanFloat 60s linear infinite 5s,beanSpin 55s linear infinite}
.cb-3{top:25%;left:55%;animation:beanFloat 45s linear infinite 10s,beanSpin 60s linear infinite}
.cb-4{top:75%;left:70%;animation:beanFloat 55s linear infinite 15s,beanSpin 50s linear infinite}
.cb-5{top:40%;left:85%;animation:beanFloat 65s linear infinite 8s,beanSpin 48s linear infinite}

@keyframes beanFloat{
    0%{transform:translateY(0)}
    50%{transform:translateY(-40px)}
    100%{transform:translateY(0)}
}

@keyframes beanSpin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

/* Horizontal track */
.h-track{
    display:flex;
    width:500vw;
    height:100vh;
    will-change:transform;
    position:relative;
    z-index:3;
}

/* Chamber base */
.chamber{
    width:100vw;
    height:100vh;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.chamber-inner{
    padding:8vh 8vw;
    max-width:80vw;
    position:relative;
    z-index:2;
}

/* Chamber 1: Descent */
.chamber-descent .chamber-inner{
    text-align:center;
}

.hero-name{
    font-family:'Nunito',sans-serif;
    font-weight:800;
    font-size:clamp(2.5rem,6vw,6rem);
    line-height:1.15;
    letter-spacing:0.03em;
    animation:heroBlur 2s ease-out forwards;
}

.hero-bada{
    display:block;
    color:var(--seafoam);
}

.hero-cafe{
    display:block;
    color:var(--crema);
}

@keyframes heroBlur{
    from{filter:blur(20px);opacity:0}
    to{filter:blur(0);opacity:1}
}

.hero-tagline{
    font-family:'Libre Baskerville',serif;
    font-style:italic;
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    color:var(--abyssal-gray);
    margin-top:2rem;
    opacity:0;
    animation:fadeIn 1s ease 2.2s forwards;
}

@keyframes fadeIn{
    to{opacity:1}
}

/* Chamber 2: Menu */
.f-pattern{
    display:flex;
    flex-direction:column;
    gap:2rem;
    max-width:50vw;
}

.section-heading{
    font-family:'Nunito',sans-serif;
    font-weight:600;
    font-size:clamp(1.2rem,2.5vw,2.2rem);
    color:var(--seafoam);
    letter-spacing:0.03em;
    line-height:1.15;
}

.card-stack{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.neo-card{
    perspective:800px;
    min-height:120px;
    position:relative;
    cursor:pointer;
}

.card-face{
    position:absolute;
    inset:0;
    padding:clamp(16px,2vw,28px);
    border-radius:12px;
    backface-visibility:hidden;
    transition:transform 600ms cubic-bezier(0.34,1.56,0.64,1);
}

.card-front{
    background:var(--meso);
    box-shadow:8px 8px 20px rgba(0,0,0,0.4),-4px -4px 12px rgba(28,42,58,0.6),inset 0 0 0 1px rgba(0,229,204,0.08);
    transition:box-shadow 300ms ease,transform 600ms cubic-bezier(0.34,1.56,0.64,1);
}

.neo-card:hover .card-front{
    box-shadow:8px 8px 20px rgba(0,0,0,0.4),-4px -4px 12px rgba(28,42,58,0.6),inset 0 0 0 1px rgba(0,229,204,0.25);
    transform:rotateY(180deg);
}

.card-back{
    background:var(--bathyal);
    transform:rotateY(-180deg);
    display:flex;align-items:center;justify-content:center;
}

.neo-card:hover .card-back{
    transform:rotateY(0deg);
}

.card-title{
    font-family:'Nunito',sans-serif;
    font-weight:600;
    font-size:clamp(1rem,1.5vw,1.3rem);
    color:var(--crema);
    margin-bottom:8px;
}

.card-body{
    font-family:'Libre Baskerville',serif;
    font-size:clamp(0.85rem,1vw,0.95rem);
    color:var(--seafoam);
    line-height:1.65;
}

.card-tag{
    font-family:'Kode Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--bio-teal);
}

/* Chamber 3: Reading */
.reading-book{
    background:var(--meso);
    border-radius:12px;
    padding:clamp(24px,3vw,48px);
    position:relative;
    max-width:60ch;
    max-height:70vh;
    overflow-y:auto;
    box-shadow:8px 8px 20px rgba(0,0,0,0.4),-4px -4px 12px rgba(28,42,58,0.6);
}

.reading-book::-webkit-scrollbar{
    width:4px;
}

.reading-book::-webkit-scrollbar-track{
    background:var(--bathyal);
}

.reading-book::-webkit-scrollbar-thumb{
    background:rgba(0,229,204,0.4);
    border-radius:2px;
}

.book-crease{
    position:absolute;
    top:0;bottom:0;
    left:50%;
    width:1px;
    background:var(--abyssal-gray);
    opacity:0.3;
}

.body-text{
    font-family:'Libre Baskerville',serif;
    font-size:clamp(0.95rem,1.2vw,1.1rem);
    line-height:1.85;
    color:var(--seafoam);
    margin-bottom:1.2rem;
}

.depth-readout{
    margin-top:20px;
}

.depth-label{
    font-family:'Kode Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--bio-teal);
    opacity:0.6;
}

/* Chamber 4: Observatory */
.chamber-observatory .chamber-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2rem;
}

.porthole{
    width:clamp(200px,50vmin,500px);
    height:clamp(200px,50vmin,500px);
    border-radius:50%;
    border:4px solid var(--meso);
    box-shadow:0 0 40px rgba(0,229,204,0.1),inset 0 0 60px rgba(0,0,0,0.4);
    overflow:hidden;
    position:relative;
}

.porthole-glass{
    position:absolute;
    inset:0;
    border-radius:50%;
    overflow:hidden;
}

.kaleidoscope{
    position:absolute;
    inset:0;
    border-radius:50%;
}

.k1{
    background:conic-gradient(from 0deg,transparent,rgba(0,229,204,0.15),transparent,rgba(0,229,204,0.1),transparent);
    animation:kRot1 12s linear infinite;
}

.k2{
    background:conic-gradient(from 45deg,transparent,rgba(212,167,106,0.1),transparent,rgba(212,167,106,0.08),transparent);
    animation:kRot2 20s linear infinite;
}

.k3{
    background:conic-gradient(from 90deg,transparent,rgba(255,107,138,0.08),transparent,rgba(255,107,138,0.05),transparent);
    animation:kRot3 35s linear infinite;
}

@keyframes kRot1{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes kRot2{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes kRot3{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.observe-label{
    font-family:'Kode Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--abyssal-gray);
    opacity:0;
    transition:opacity 1s ease;
}

.observe-label.visible{
    opacity:0.6;
}

/* Chamber 5: Surface */
.chamber-surface{
    background:var(--crema);
}

.chamber-surface .chamber-inner{
    text-align:center;
}

.surface-title{
    font-family:'Nunito',sans-serif;
    font-weight:800;
    font-size:clamp(2.5rem,6vw,5rem);
    color:var(--hadal);
    letter-spacing:0.03em;
    line-height:1.15;
    margin-bottom:1rem;
}

.surface-text{
    font-family:'Libre Baskerville',serif;
    font-style:italic;
    color:var(--hadal);
    opacity:0.7;
}

.surface-depth-grad{
    position:absolute;
    bottom:0;left:0;right:0;
    height:30vh;
    background:linear-gradient(0deg,rgba(10,14,20,0.3),transparent);
    pointer-events:none;
}

/* Responsive */
@media(max-width:768px){
    .f-pattern{
        max-width:80vw;
    }
    .neo-card{
        min-height:100px;
    }
    .porthole{
        width:60vmin;height:60vmin;
    }
}