/* bada.studio - Tidal Forge Kinetic Type */

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

:root{
    --abyss:#080B10;
    --pressure:#0D1926;
    --steel:#1A2A3D;
    --chrome:#C8D6E5;
    --abalone:#5EEAD4;
    --forge-orange:#F97316;
    --salt:#4A5568;
    --coral:#F43F5E;
    --ease-mag:cubic-bezier(0.23,1.0,0.32,1.12);
    --ease-spring:cubic-bezier(0.34,1.56,0.64,1.0);
}

html{scroll-behavior:smooth}

body{
    background:var(--abyss);
    color:var(--chrome);
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.9rem,1.1vw,1.1rem);
    line-height:1.65;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Depth progress bar */
.depth-bar{
    position:fixed;
    top:0;
    left:0;
    width:0%;
    height:2px;
    background:linear-gradient(90deg,var(--abalone),var(--forge-orange));
    z-index:100;
    transition:width 50ms linear;
}

/* Navigation rail */
.nav-rail{
    position:fixed;
    top:0;
    left:0;
    width:48px;
    height:100vh;
    z-index:50;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:32px;
}

.rail-label{
    writing-mode:vertical-rl;
    text-orientation:mixed;
    font-family:'Syne',sans-serif;
    font-weight:600;
    font-size:clamp(0.65rem,0.8vw,0.75rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--salt);
    text-decoration:none;
    transition:color 300ms ease,transform 300ms ease;
    cursor:pointer;
}

.rail-label:hover,
.rail-label.rail-active{
    color:var(--chrome);
}

.rail-indicator{
    position:absolute;
    left:0;
    width:2px;
    height:20px;
    background:var(--forge-orange);
    transition:all 400ms var(--ease-spring);
}

/* Abyss background layer */
.abyss-layer{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(ellipse at 40% 50%,rgba(94,234,212,0.03),transparent 50%),
        radial-gradient(ellipse at 70% 30%,rgba(94,234,212,0.02),transparent 40%);
    transition:filter 2s ease;
}

/* Hero */
.hero{
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:5;
    padding-left:48px;
}

.hero-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(4rem,12vw,14rem);
    letter-spacing:-0.03em;
    line-height:0.9;
    text-transform:lowercase;
    display:flex;
    overflow:hidden;
}

.hero-char{
    display:inline-block;
    opacity:0;
    transform:translateY(100%);
    animation:charEnter 800ms var(--ease-mag) forwards;
    animation-delay:calc(var(--i)*80ms + 300ms);
}

@keyframes charEnter{
    from{opacity:0;transform:translateY(100%)}
    to{opacity:1;transform:translateY(0)}
}

.hero-dot{
    color:var(--abalone);
    animation:charEnter 800ms var(--ease-mag) forwards,dotPulse 2s ease-in-out 1.5s infinite;
}

@keyframes dotPulse{
    0%,100%{opacity:1}
    50%{opacity:0.4}
}

/* After all chars loaded, breathe animation */
.hero-title.breathing{
    animation:heroBreathe 6s ease-in-out infinite;
}

@keyframes heroBreathe{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-3px)}
}

/* Bento Grid */
.bento-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    margin-left:calc(48px + 8vw);
    margin-right:0;
    position:relative;
    z-index:5;
    background:rgba(200,214,229,0.08);
}

/* Chrome grid wireframe effect via gap + bg color */
.bento-cell{
    background:var(--abyss);
    padding:clamp(24px,4vw,48px);
    position:relative;
    overflow:hidden;
    clip-path:inset(50%);
    transition:clip-path 600ms var(--ease-mag);
}

.bento-cell.revealed{
    clip-path:inset(0%);
}

/* Grid intersection diamonds */
.bento-cell::before{
    content:'';
    position:absolute;
    top:-2px;
    left:-2px;
    width:4px;
    height:4px;
    background:var(--chrome);
    transform:rotate(45deg);
    opacity:0.15;
    animation:diamondPulse 3s ease-in-out infinite;
    z-index:10;
}

@keyframes diamondPulse{
    0%,100%{opacity:0.1}
    50%{opacity:0.3}
}

/* Cell sizes */
.cell-1x1{grid-column:span 1}
.cell-2x1{grid-column:span 2}
.cell-3x1{grid-column:span 3}
.cell-full{grid-column:1/-1}

/* Cell headings */
.cell-heading{
    font-family:'Syne',sans-serif;
    font-weight:700;
    font-size:clamp(1.1rem,2.5vw,2rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--chrome);
    margin-bottom:1rem;
}

/* Cell body */
.cell-body{
    max-width:55ch;
    color:rgba(200,214,229,0.8);
}

/* Cell single word */
.cell-word{
    font-family:'Syne',sans-serif;
    font-weight:700;
    font-size:clamp(2rem,5vw,4rem);
    letter-spacing:0.08em;
    color:var(--salt);
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
}

/* Letter fragments */
.letter-fragment{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(15rem,35vw,30rem);
    line-height:0.7;
    color:var(--salt);
    opacity:0.08;
    display:block;
    overflow:hidden;
    pointer-events:none;
}

.frag-2{
    transform:rotate(15deg);
}

.frag-3{
    color:var(--abalone);
    opacity:0.06;
    font-size:clamp(20rem,40vw,35rem);
}

/* Closing statement */
.closing-statement{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,3rem);
    letter-spacing:-0.03em;
    line-height:1.1;
    color:var(--chrome);
    text-align:center;
    padding:clamp(40px,8vh,80px) 0;
}

/* Hover tilt will be handled by JS transform */
.bento-cell{
    transition:clip-path 600ms var(--ease-mag),transform 300ms ease,border-color 300ms ease;
    border:1px solid transparent;
}

.bento-cell:hover{
    border-color:rgba(94,234,212,0.2);
}

/* Responsive */
@media(max-width:768px){
    .nav-rail{
        display:none;
    }

    .hero{
        padding-left:16px;
    }

    .bento-grid{
        grid-template-columns:1fr;
        margin-left:0;
        margin-right:0;
        padding:0 16px;
    }

    .cell-2x1,.cell-3x1,.cell-full{
        grid-column:1/-1;
    }

    .letter-fragment{
        font-size:clamp(10rem,30vw,15rem);
    }
}