/* bada.quest - Seapunk Immersive Descent */

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

:root{
    --abyss:#070B12;
    --trench:#0D1B2E;
    --teal:#00FFCC;
    --violet:#7B2FBE;
    --foam:#C8E6F0;
    --coral:#FF3366;
    --gold:#D4A017;
    --ease:cubic-bezier(0.25,0.1,0.25,1.0);
    --ease-burst:cubic-bezier(0.16,1,0.3,1);
}

html{scroll-behavior:auto}

body{
    background:var(--abyss);
    color:var(--foam);
    font-family:'Lexend',sans-serif;
    font-weight:300;
    font-size:clamp(0.95rem,1.2vw,1.15rem);
    line-height:1.75;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Aurora background */
.aurora-bg{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(ellipse at 30% 40%,rgba(0,255,204,0.08),transparent 50%),
        radial-gradient(ellipse at 70% 60%,rgba(123,47,190,0.06),transparent 50%),
        radial-gradient(ellipse at 50% 80%,rgba(255,51,102,0.04),transparent 45%);
    background-size:200% 200%;
    animation:auroraDrift 23s ease-in-out infinite;
    transition:opacity 1s ease;
}

@keyframes auroraDrift{
    0%,100%{background-position:0% 0%}
    33%{background-position:50% 30%}
    66%{background-position:20% 60%}
}

/* Sonar ping layer */
.sonar-layer{
    position:fixed;
    inset:0;
    z-index:2;
    pointer-events:none;
}

.sonar-ping{
    position:absolute;
    border-radius:50%;
    border:1px solid var(--teal);
    animation:pingExpand 4s ease-out forwards;
}

@keyframes pingExpand{
    0%{width:0;height:0;opacity:0.15;transform:translate(-50%,-50%)}
    100%{width:400px;height:400px;opacity:0;transform:translate(-50%,-50%)}
}

/* Pressure gauge */
.pressure-gauge{
    position:fixed;
    top:0;
    right:0;
    width:3vw;
    min-width:32px;
    height:100vh;
    z-index:30;
    background:rgba(13,27,46,0.6);
    border-left:1px solid rgba(0,255,204,0.15);
}

.gauge-fill{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:0%;
    background:linear-gradient(180deg,var(--teal),var(--violet));
    transition:height 100ms linear;
    opacity:0.5;
}

.gauge-ticks{
    position:absolute;
    inset:0;
}

.gauge-tick{
    position:absolute;
    left:0;
    width:50%;
    height:1px;
    background:rgba(0,255,204,0.2);
}

.gauge-readout{
    position:absolute;
    bottom:16px;
    left:50%;
    transform:translateX(-50%) rotate(-90deg);
    font-family:'Tektur',sans-serif;
    font-weight:700;
    font-size:clamp(0.6rem,0.8vw,0.75rem);
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--teal);
    text-shadow:0 0 12px rgba(0,255,204,0.25);
    white-space:nowrap;
}

/* Zone base */
.zone{
    min-height:100vh;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(40px,8vh,80px) clamp(24px,6vw,80px);
    padding-right:calc(3vw + 24px);
    z-index:5;
}

/* ==============================
   Zone 1: Surface Break
   ============================== */
.zone-surface{
    background:transparent;
}

.hero-title{
    font-family:'Outfit',sans-serif;
    font-size:clamp(3rem,8vw,10rem);
    letter-spacing:-0.02em;
    line-height:0.95;
    text-align:center;
    font-weight:100;
    background:linear-gradient(135deg,var(--teal),var(--violet),var(--coral));
    background-size:400% 400%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:iridShift 8s ease-in-out infinite,weightMaterialize 2s var(--ease) 1.5s forwards;
}

@keyframes iridShift{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
}

@keyframes weightMaterialize{
    from{font-weight:100}
    to{font-weight:900}
}

.hero-sub{
    font-family:'Lexend',sans-serif;
    font-weight:300;
    font-size:clamp(0.85rem,1vw,1rem);
    color:var(--foam);
    opacity:0;
    margin-top:2rem;
    animation:fadeIn 1s ease 3.5s forwards;
}

@keyframes fadeIn{to{opacity:0.6}}

/* ==============================
   Zone 2: The Shallows
   ============================== */
.zone-shallows{
    background:linear-gradient(180deg,transparent,rgba(13,27,46,0.5));
    align-items:flex-start;
    flex-direction:row;
    flex-wrap:wrap;
    gap:0;
    justify-content:center;
}

/* Artifact cards */
.artifact-card{
    background:rgba(13,27,46,0.8);
    clip-path:var(--clip);
    transform:rotate(var(--rot,0deg));
    padding:clamp(24px,4vw,48px);
    max-width:500px;
    position:relative;
    border:1px solid rgba(0,255,204,0.1);
    opacity:0;
    filter:blur(1px);
    transition:opacity 800ms var(--ease),filter 800ms var(--ease),transform 800ms var(--ease);
}

.artifact-card.in-focus{
    opacity:1;
    filter:blur(0);
    transform:rotate(var(--rot,0deg)) scale(1);
}

.card-1{margin-right:-60px;z-index:2}
.card-2{margin-left:-60px;margin-top:80px;z-index:1}

.card-heading{
    font-family:'Outfit',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,3.5vw,3.5rem);
    letter-spacing:-0.02em;
    line-height:0.95;
    color:var(--teal);
    margin-bottom:1rem;
}

.card-body{
    color:rgba(200,230,240,0.85);
    max-width:45ch;
}

.card-label{
    display:block;
    font-family:'Tektur',sans-serif;
    font-weight:700;
    font-size:clamp(0.7rem,1vw,0.9rem);
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--teal);
    text-shadow:0 0 12px rgba(0,255,204,0.25);
    margin-bottom:0.8rem;
}

/* ==============================
   Zone 3: Thermocline
   ============================== */
.zone-thermocline{
    background:linear-gradient(180deg,rgba(13,27,46,0.5),var(--abyss));
}

.thermo-heading{
    font-family:'Outfit',sans-serif;
    font-weight:200;
    font-size:clamp(2rem,6vw,6rem);
    letter-spacing:0.15em;
    line-height:1.1;
    color:var(--teal);
    text-align:center;
    opacity:0;
    transition:opacity 1200ms var(--ease);
}

.thermo-heading.visible{
    opacity:1;
}

.depth-readout{
    font-family:'Tektur',sans-serif;
    font-weight:700;
    font-size:clamp(0.65rem,0.9vw,0.8rem);
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--teal);
    opacity:0.5;
    margin-top:3rem;
    text-shadow:0 0 12px rgba(0,255,204,0.25);
}

/* ==============================
   Zone 4: The Reef
   ============================== */
.zone-reef{
    background:transparent;
    min-height:120vh;
    padding-top:10vh;
}

.reef-cluster{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    max-width:900px;
    width:100%;
}

.reef-card{
    margin:-20px;
}

.rc-1{z-index:4}
.rc-2{z-index:3;margin-top:60px}
.rc-3{z-index:2;margin-top:-40px}
.rc-4{z-index:1;margin-top:20px}

.rc-4{
    border-color:rgba(255,51,102,0.2);
}

/* ==============================
   Zone 5: The Trench
   ============================== */
.zone-trench{
    background:var(--abyss);
}

.trench-text{
    font-family:'Outfit',sans-serif;
    font-weight:900;
    font-size:clamp(4rem,12vw,14rem);
    letter-spacing:-0.02em;
    line-height:0.85;
    color:var(--teal);
    text-align:center;
    text-shadow:0 0 40px rgba(0,255,204,0.4),0 0 80px rgba(0,255,204,0.15);
    opacity:0;
    transition:opacity 2000ms var(--ease);
}

.trench-text.visible{
    opacity:1;
}

/* ==============================
   Zone 6: Discovery
   ============================== */
.zone-discovery{
    background:transparent;
}

.discovery-card{
    max-width:700px;
    width:100%;
    padding:clamp(40px,8vh,80px) clamp(32px,6vw,64px);
    border:3px solid transparent;
    background:
        linear-gradient(var(--abyss),var(--abyss)) padding-box,
        linear-gradient(135deg,var(--teal),var(--violet),var(--coral)) border-box;
    background-size:100% 100%,400% 400%;
    animation:borderShift 12s ease-in-out infinite;
    opacity:0;
    transform:translateY(30px);
    transition:opacity 1500ms var(--ease),transform 1500ms var(--ease);
}

.discovery-card.visible{
    opacity:1;
    transform:translateY(0);
}

@keyframes borderShift{
    0%,100%{background-position:0% 0%,0% 50%}
    50%{background-position:0% 0%,100% 50%}
}

.disc-heading{
    font-family:'Outfit',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,3rem);
    color:var(--teal);
    margin-bottom:1.5rem;
    letter-spacing:-0.02em;
}

.disc-body{
    font-weight:300;
    line-height:2.0;
    margin-bottom:1.5rem;
    color:var(--foam);
}

/* ==============================
   Zone 7: Resurface
   ============================== */
.zone-resurface{
    background:transparent;
    min-height:60vh;
}

.resurface-btn{
    width:clamp(120px,20vw,200px);
    height:clamp(120px,20vw,200px);
    border-radius:50%;
    border:2px solid var(--teal);
    background:transparent;
    color:var(--teal);
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    animation:resurfacePulse 3s ease-in-out infinite;
    transition:background 300ms ease,box-shadow 300ms ease;
}

.resurface-btn:hover{
    background:rgba(0,255,204,0.1);
    box-shadow:0 0 40px rgba(0,255,204,0.3);
}

@keyframes resurfacePulse{
    0%,100%{box-shadow:0 0 20px rgba(0,255,204,0.15)}
    50%{box-shadow:0 0 40px rgba(0,255,204,0.3)}
}

.resurface-label{
    font-family:'Tektur',sans-serif;
    font-weight:700;
    font-size:0.7rem;
    letter-spacing:0.2em;
}

/* Ripple effect */
.ripple{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle,rgba(0,255,204,0.3),transparent 70%);
    pointer-events:none;
    animation:rippleExpand 600ms ease-out forwards;
}

@keyframes rippleExpand{
    from{width:0;height:0;opacity:1}
    to{width:200px;height:200px;opacity:0}
}

/* Responsive */
@media(max-width:768px){
    .zone{
        padding-right:calc(3vw + 16px);
    }

    .zone-shallows{
        flex-direction:column;
        align-items:center;
    }

    .card-1,.card-2{
        margin:0 0 -30px 0;
    }

    .reef-cluster{
        grid-template-columns:1fr;
    }

    .reef-card{
        margin:-10px 0;
    }

    .pressure-gauge{
        width:24px;
        min-width:24px;
    }

    .gauge-readout{
        font-size:0.55rem;
    }
}