/* ============================================
   bada.moe - Ocean Depth Immersive Experience
   ============================================ */

/* === CSS Custom Properties === */
:root {
    /* Ocean-Deep Palette */
    --abyssal-ink: #020810;
    --deep-trench: #0B1D3A;
    --twilight-blue: #122B52;
    --current-blue: #1A4B7A;
    --seafoam-glow: #4ECDC4;
    --pale-seafoam: #D4F1EC;
    --coral-blush: #F7A9A8;
    --warm-gold: #C9A96E;
    --marble-white: #F2EDE8;
    --pressed-petal: #E8C4D0;
    --kelp-shadow: #1A3A2A;
    --pearl-nacre: #F5F0E8;

    /* Depth tracking (0 = surface, 1 = abyss) */
    --depth: 0;

    /* Marble vein defaults */
    --vein-angle: 32deg;
    --vein-color: #C9A96E33;
    --vein-density: 1;
    --vein-opacity: 0.3;
}

/* === Reset & Base === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.72;
    color: var(--pale-seafoam);
    background-color: var(--deep-trench);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === Typography === */
h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--marble-white);
}

h1 {
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 900;
}

h2 {
    font-size: clamp(2.4rem, 6vw, 5rem);
}

.heading-large {
    font-size: clamp(3rem, 8vw, 7rem);
}

blockquote {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.4rem, 3vw, 2.8rem);
    letter-spacing: 0.06em;
    line-height: 1.4;
    color: var(--pale-seafoam);
}

cite {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    color: var(--warm-gold);
    display: block;
    margin-top: 1.5rem;
}

.panel-caption {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--warm-gold);
    margin-top: 1.5rem;
    opacity: 0.8;
}

.specimen-label {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--warm-gold);
    display: block;
    text-align: center;
    margin-top: 4px;
}

.surface-subtitle {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    letter-spacing: 0.15em;
    color: var(--warm-gold);
    margin-top: 1rem;
}

.surface-tagline {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1rem, 2vw, 1.6rem);
    letter-spacing: 0.08em;
    color: var(--coral-blush);
    margin-top: 0.5rem;
    opacity: 0.8;
}

/* === Korean Watermark Text === */
.korean-watermark {
    position: absolute;
    font-family: 'Noto Sans KR', 'Playfair Display', serif;
    font-size: clamp(15vw, 25vw, 40vw);
    font-weight: 500;
    opacity: 0.05;
    color: var(--seafoam-glow);
    pointer-events: none;
    user-select: none;
    will-change: transform;
    z-index: 0;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* === Depth Indicator (Coral Branch Navigation) === */
#depth-indicator {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    height: 60vh;
    width: 30px;
    cursor: pointer;
}

#depth-track {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(201, 169, 110, 0.3) 0%,
        rgba(201, 169, 110, 0.15) 30%,
        rgba(78, 205, 196, 0.15) 70%,
        rgba(247, 169, 168, 0.2) 100%
    );
    border-radius: 15px;
    overflow: visible;
}

/* Coral branch texture on depth track */
#depth-track::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        var(--warm-gold),
        var(--coral-blush),
        var(--seafoam-glow),
        var(--coral-blush)
    );
    opacity: 0.6;
}

#depth-track::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 50% 15%, var(--warm-gold) 1px, transparent 1px),
        radial-gradient(circle at 30% 30%, var(--coral-blush) 1px, transparent 1px),
        radial-gradient(circle at 70% 45%, var(--warm-gold) 1px, transparent 1px),
        radial-gradient(circle at 40% 60%, var(--seafoam-glow) 1px, transparent 1px),
        radial-gradient(circle at 60% 75%, var(--coral-blush) 1px, transparent 1px),
        radial-gradient(circle at 50% 90%, var(--seafoam-glow) 1px, transparent 1px);
    opacity: 0.5;
}

#depth-marker {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--warm-gold);
    box-shadow: 0 0 12px rgba(201, 169, 110, 0.6), 0 0 24px rgba(201, 169, 110, 0.3);
    transition: top 0.3s ease-out;
    z-index: 2;
}

.depth-label {
    position: absolute;
    right: 35px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: var(--warm-gold);
    opacity: 0.5;
    white-space: nowrap;
    transform: translateY(-50%);
}

.depth-label-surface { top: 0%; }
.depth-label-sunlight { top: 18%; }
.depth-label-twilight { top: 42%; }
.depth-label-midnight { top: 70%; }
.depth-label-abyss { top: 95%; }

/* === Depth Zones === */
.depth-zone {
    position: relative;
    overflow: hidden;
}

#zone-surface {
    min-height: 100vh;
    background: var(--marble-white);
}

#zone-sunlight {
    min-height: 200vh;
    padding: 10vh 0;
    background: linear-gradient(
        180deg,
        var(--deep-trench) 0%,
        var(--twilight-blue) 50%,
        var(--deep-trench) 100%
    );
    animation: sunlightShift 20s ease-in-out infinite alternate;
}

@keyframes sunlightShift {
    0% {
        background: linear-gradient(180deg, var(--deep-trench) 0%, var(--twilight-blue) 50%, var(--deep-trench) 100%);
    }
    100% {
        background: linear-gradient(180deg, var(--twilight-blue) 0%, #061224 50%, var(--twilight-blue) 100%);
    }
}

#zone-twilight {
    min-height: 200vh;
    padding: 10vh 0;
    background: linear-gradient(
        180deg,
        var(--deep-trench) 0%,
        #061224 50%,
        var(--abyssal-ink) 100%
    );
}

#zone-midnight {
    min-height: 200vh;
    padding: 10vh 0;
    background: #040D1A;
}

#zone-abyss {
    min-height: 150vh;
    background: var(--abyssal-ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* === Marble Surface System === */
.marble-surface {
    background:
        linear-gradient(var(--vein-angle, 32deg),
            transparent 49.5%, var(--vein-color, #C9A96E33) 49.5%,
            var(--vein-color, #C9A96E33) 50.5%, transparent 50.5%),
        linear-gradient(calc(var(--vein-angle, 32deg) + 47deg),
            transparent 48%, rgba(201, 169, 110, 0.13) 48%,
            rgba(201, 169, 110, 0.13) 49%, transparent 49%),
        linear-gradient(calc(var(--vein-angle, 32deg) + 95deg),
            transparent 49%, rgba(201, 169, 110, 0.08) 49%,
            rgba(201, 169, 110, 0.08) 49.5%, transparent 49.5%),
        radial-gradient(ellipse at 30% 50%,
            var(--pearl-nacre) 0%, var(--marble-white) 40%, #E8E0D8 100%);
}

/* Dark marble variant */
.marble-dark {
    background:
        linear-gradient(var(--vein-angle, 32deg),
            transparent 49.5%, rgba(78, 205, 196, 0.15) 49.5%,
            rgba(78, 205, 196, 0.15) 50.5%, transparent 50.5%),
        linear-gradient(calc(var(--vein-angle, 32deg) + 47deg),
            transparent 48%, rgba(78, 205, 196, 0.08) 48%,
            rgba(78, 205, 196, 0.08) 49%, transparent 49%),
        radial-gradient(ellipse at 30% 50%,
            #0E2240 0%, var(--deep-trench) 40%, #061224 100%);
}

/* === Surface Zone Styles === */
.surface-header {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    --vein-angle: 25deg;
}

.surface-title-container {
    text-align: center;
    z-index: 10;
    position: relative;
}

.surface-title-container h1 {
    color: var(--deep-trench);
    text-shadow: 2px 2px 0 rgba(201, 169, 110, 0.2);
}

/* Marble veins decorative */
.marble-vein {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0.2;
}

.marble-vein-1 {
    background: linear-gradient(25deg, transparent 48%, rgba(201, 169, 110, 0.4) 49%, rgba(201, 169, 110, 0.4) 49.5%, transparent 50%);
}

.marble-vein-2 {
    background: linear-gradient(67deg, transparent 47%, rgba(201, 169, 110, 0.25) 48%, rgba(201, 169, 110, 0.25) 48.8%, transparent 49%);
}

.marble-vein-3 {
    background: linear-gradient(140deg, transparent 49%, rgba(201, 169, 110, 0.15) 49.3%, rgba(201, 169, 110, 0.15) 49.6%, transparent 50%);
}

/* Waterline */
.waterline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    line-height: 0;
}

.waterline-svg {
    width: 100%;
    height: 120px;
    display: block;
}

.wave {
    animation: waveMotion 6s ease-in-out infinite;
}

.wave-1 { animation-delay: 0s; animation-duration: 7s; }
.wave-2 { animation-delay: -1.5s; animation-duration: 5s; }
.wave-3 { animation-delay: -3s; animation-duration: 6s; }

@keyframes waveMotion {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-20px); }
}

/* Pressed flowers on marble */
.pressed-flower {
    position: absolute;
    z-index: 5;
    opacity: 0.6;
}

.pressed-flower svg {
    width: 60px;
    height: 80px;
}

.pressed-flower-1 {
    top: 15%;
    left: 10%;
    transform: rotate(-12deg);
}

.pressed-flower-2 {
    top: 25%;
    right: 12%;
    transform: rotate(8deg);
}

.pressed-flower-3 {
    bottom: 30%;
    left: 20%;
    transform: rotate(-5deg);
}

/* Coral silhouette */
.coral-silhouette {
    position: absolute;
    z-index: 2;
    opacity: 0.25;
}

.coral-left {
    left: 0;
    bottom: 0;
    width: 150px;
    height: 300px;
}

/* Peony surface */
.peony-surface {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 10%;
    right: 5%;
    z-index: 2;
    opacity: 0.4;
}

/* Botanical overlay */
.botanical-overlay {
    position: absolute;
    pointer-events: none;
}

/* === Sunlight Zone Styles === */
.specimen-panel {
    position: relative;
    max-width: 55%;
    padding: 3rem 3.5rem;
    margin: 8vh 0;
    background: rgba(11, 29, 58, 0.6);
    border: 1px solid rgba(201, 169, 110, 0.4);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    z-index: 5;
}

.specimen-panel h2 {
    margin-bottom: 1.5rem;
}

.panel-body {
    color: var(--pale-seafoam);
    max-width: 60ch;
}

.panel-left {
    margin-left: 8%;
    margin-right: auto;
}

.panel-right {
    margin-left: auto;
    margin-right: 8%;
}

.panel-wide {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
}

/* Overlapping effect */
.specimen-panel + .specimen-panel {
    margin-top: -5vh;
}

/* Sea lavender corner ornaments */
.sea-lavender-corner {
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 10;
}

.corner-tl {
    top: -10px;
    left: -10px;
}

.corner-tr {
    top: -10px;
    right: -10px;
}

/* Kelp fronds */
.kelp-frond {
    position: absolute;
    z-index: 1;
    width: 80px;
    height: 500px;
}

.kelp-left {
    left: 0;
    top: 10%;
    animation: kelpSway 8s ease-in-out infinite;
}

.kelp-right {
    right: 0;
    top: 30%;
    animation: kelpSway 8s ease-in-out infinite reverse;
    animation-delay: -2s;
}

@keyframes kelpSway {
    0%, 100% { transform: skewX(0deg); }
    25% { transform: skewX(2deg); }
    75% { transform: skewX(-2deg); }
}

/* === Marble Medallions === */
.marble-medallion {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 6vh auto;
    position: relative;
    z-index: 5;
    border: 2px solid var(--warm-gold);
    box-shadow: 0 0 40px rgba(201, 169, 110, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.medallion-surface {
    background:
        radial-gradient(ellipse at 40% 40%, var(--pearl-nacre) 0%, var(--marble-white) 60%, #E8E0D8 100%);
}

.medallion-twilight {
    background:
        radial-gradient(ellipse at 40% 40%, var(--twilight-blue) 0%, var(--deep-trench) 60%, #061224 100%);
}

.medallion-botanical {
    width: 160px;
    height: 160px;
}

/* === Twilight Zone Styles === */
.pull-quote-block {
    max-width: 65%;
    margin: 10vh auto;
    padding: 3rem 4rem;
    position: relative;
    z-index: 5;
    background: rgba(11, 29, 58, 0.4);
    border-radius: 12px;
}

.marble-border {
    border: 2px solid transparent;
    border-image: linear-gradient(
        135deg,
        var(--warm-gold) 0%,
        rgba(201, 169, 110, 0.3) 30%,
        var(--warm-gold) 50%,
        rgba(201, 169, 110, 0.3) 70%,
        var(--warm-gold) 100%
    ) 1;
}

.botanical-dense {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.anemone-cluster {
    width: 60%;
    height: auto;
    top: 5%;
    right: 5%;
}

/* === Midnight Zone Styles === */
#zone-midnight {
    position: relative;
}

.ghost-botanical {
    position: absolute;
    width: 100%;
    pointer-events: none;
    z-index: 1;
}

.ghost-botanical-1 {
    top: 5%;
}

.ghost-botanical-2 {
    bottom: 10%;
}

/* Rotating marble fragments */
.marble-fragment {
    position: absolute;
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    animation: marbleRotate 90s linear infinite;
}

.marble-fragment-1 {
    width: 120px;
    height: 120px;
    top: 15%;
    right: 10%;
    background:
        linear-gradient(45deg, transparent 49%, rgba(201, 169, 110, 0.2) 49.5%, rgba(201, 169, 110, 0.2) 50.5%, transparent 51%),
        linear-gradient(92deg, transparent 48%, rgba(201, 169, 110, 0.12) 48.5%, rgba(201, 169, 110, 0.12) 49%, transparent 49.5%),
        radial-gradient(ellipse at 40% 40%, #0E2240 0%, var(--deep-trench) 60%, #061224 100%);
    opacity: 0.6;
}

.marble-fragment-2 {
    width: 80px;
    height: 80px;
    top: 45%;
    left: 8%;
    background:
        linear-gradient(130deg, transparent 49%, rgba(78, 205, 196, 0.15) 49.5%, rgba(78, 205, 196, 0.15) 50.5%, transparent 51%),
        radial-gradient(ellipse at 50% 50%, #0E2240 0%, var(--deep-trench) 70%, #061224 100%);
    opacity: 0.4;
    animation-duration: 120s;
    animation-direction: reverse;
}

.marble-fragment-3 {
    width: 60px;
    height: 60px;
    bottom: 20%;
    right: 25%;
    background:
        linear-gradient(70deg, transparent 48%, rgba(247, 169, 168, 0.12) 49%, rgba(247, 169, 168, 0.12) 50%, transparent 51%),
        radial-gradient(ellipse at 50% 50%, #0E2240 0%, #040D1A 80%);
    opacity: 0.35;
    animation-duration: 105s;
}

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

/* Bioluminescent panels */
.bioluminescent-panel {
    position: relative;
    max-width: 55%;
    padding: 3rem 3.5rem;
    margin: 8vh auto;
    border-radius: 12px;
    z-index: 5;
    background: rgba(4, 13, 26, 0.8);
}

.panel-glow-seafoam {
    box-shadow: 0 0 40px rgba(78, 205, 196, 0.12), 0 0 80px rgba(78, 205, 196, 0.06);
    border: 1px solid rgba(78, 205, 196, 0.2);
}

.panel-glow-seafoam h2 {
    color: var(--seafoam-glow);
}

.panel-glow-coral {
    box-shadow: 0 0 40px rgba(247, 169, 168, 0.12), 0 0 80px rgba(247, 169, 168, 0.06);
    border: 1px solid rgba(247, 169, 168, 0.2);
}

.panel-glow-coral h2 {
    color: var(--coral-blush);
}

.panel-glow-mixed {
    box-shadow: 0 0 40px rgba(78, 205, 196, 0.08), 0 0 80px rgba(247, 169, 168, 0.06);
    border: 1px solid rgba(201, 169, 110, 0.15);
}

.panel-glow-mixed h2 {
    color: var(--pressed-petal);
}

.bioluminescent-panel h2 {
    margin-bottom: 1.5rem;
}

.bioluminescent-panel .panel-body {
    color: var(--pale-seafoam);
    max-width: 60ch;
}

/* === The Abyss === */
.abyss-statement {
    text-align: center;
    padding: 0 5vw;
    position: relative;
    z-index: 5;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#abyss-text {
    font-size: clamp(3rem, 10vw, 8rem);
    color: var(--pale-seafoam);
    letter-spacing: 2em;
    transition: letter-spacing 0.1s ease-out;
    opacity: 0.8;
    text-align: center;
    line-height: 1.2;
}

/* The Pearl */
.pearl-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10vh 0 20vh;
    position: relative;
    z-index: 5;
}

.pearl {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pearl-core {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    --vein-angle: 45deg;
    --vein-color: rgba(201, 169, 110, 0.25);
    z-index: 2;
    box-shadow: 0 0 30px rgba(201, 169, 110, 0.2);
}

.pearl-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(201, 169, 110, 0.15);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pearl-ring-1 { width: 100px; height: 100px; }
.pearl-ring-2 { width: 130px; height: 130px; opacity: 0.7; }
.pearl-ring-3 { width: 160px; height: 160px; opacity: 0.5; }
.pearl-ring-4 { width: 190px; height: 190px; opacity: 0.3; }
.pearl-ring-5 { width: 220px; height: 220px; opacity: 0.15; }

/* Surfacing fade */
.surfacing-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40vh;
    background: linear-gradient(to bottom, transparent, var(--marble-white));
    opacity: 0;
    transition: opacity 1.5s ease;
    z-index: 10;
    pointer-events: none;
}

.surfacing-fade.active {
    opacity: 1;
}

/* === Shake-Error Animation (Signature Interaction) === */
@keyframes gentle-scold {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

.shake {
    animation: gentle-scold 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* === Heading Animation States === */
.heading-animate {
    opacity: 0.3;
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.heading-animate[data-direction="surface"] {
    transform: scale(1.2);
}

.heading-animate[data-direction="midnight"] {
    transform: scale(0.8);
}

.heading-animate.visible {
    opacity: 1;
    transform: scale(1);
}

/* === Draw-on-Scroll SVG Animation === */
.draw-on-scroll path,
.draw-on-scroll circle,
.draw-on-scroll ellipse {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.5s ease-out;
}

.draw-on-scroll.drawn path,
.draw-on-scroll.drawn circle,
.draw-on-scroll.drawn ellipse {
    stroke-dashoffset: 0;
}

/* === Responsive === */
@media (max-width: 768px) {
    .specimen-panel,
    .bioluminescent-panel {
        max-width: 90%;
        padding: 2rem 2rem;
        margin-left: 5%;
        margin-right: 5%;
    }

    .panel-left,
    .panel-right {
        margin-left: 5%;
        margin-right: 5%;
    }

    .panel-wide {
        max-width: 90%;
    }

    .pull-quote-block {
        max-width: 90%;
        padding: 2rem 2.5rem;
    }

    #depth-indicator {
        right: 8px;
    }

    .depth-label {
        display: none;
    }

    .pressed-flower {
        display: none;
    }

    .peony-surface {
        width: 200px;
        height: 200px;
        opacity: 0.25;
    }

    .kelp-frond {
        width: 50px;
        opacity: 0.3;
    }

    .marble-medallion {
        width: 150px;
        height: 150px;
    }

    .anemone-cluster {
        width: 80%;
    }

    #abyss-text {
        letter-spacing: 0.5em;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: clamp(3rem, 15vw, 5rem);
    }

    h2 {
        font-size: clamp(1.8rem, 8vw, 3rem);
    }

    .heading-large {
        font-size: clamp(2rem, 10vw, 4rem);
    }

    .specimen-panel,
    .bioluminescent-panel {
        padding: 1.5rem;
    }
}

/* === Selection === */
::selection {
    background: rgba(201, 169, 110, 0.3);
    color: var(--marble-white);
}

/* === Scrollbar === */
::-webkit-scrollbar {
    width: 0px;
}

body {
    scrollbar-width: none;
}