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

html, body {
    overflow-x: hidden;
    background: #1a1410;
    color: #6b4e3d;
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.85;
}

main {
    position: relative;
}

/* === ZONES === */
.zone {
    width: 100vw;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.zone-floor {
    min-height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === WATERCOLOR BACKGROUNDS === */
.watercolor-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.surface-bg {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(46, 36, 64, 0.6) 0%, transparent 70%),
        radial-gradient(ellipse at 70% 80%, rgba(212, 165, 74, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 50%, rgba(194, 113, 79, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #2e2440 0%, #1a1410 60%, #1a1410 100%);
}

.descent-bg {
    background:
        radial-gradient(ellipse at 20% 30%, rgba(212, 165, 74, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 60%, rgba(46, 36, 64, 0.4) 0%, transparent 70%),
        radial-gradient(ellipse at 50% 90%, rgba(122, 145, 120, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #1a1410 0%, #1a1410 100%);
}

.archive-bg {
    background:
        radial-gradient(ellipse at 60% 20%, rgba(46, 36, 64, 0.5) 0%, transparent 65%),
        radial-gradient(ellipse at 25% 70%, rgba(194, 113, 79, 0.1) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 85%, rgba(168, 213, 194, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, #1a1410 0%, #1a1410 100%);
}

.deep-bg {
    background:
        radial-gradient(ellipse at 40% 40%, rgba(46, 36, 64, 0.6) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 70%, rgba(168, 213, 194, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(122, 145, 120, 0.1) 0%, transparent 55%),
        linear-gradient(180deg, #1a1410 0%, #1a1410 100%);
}

.floor-bg {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(46, 36, 64, 0.3) 0%, transparent 70%),
        linear-gradient(180deg, #1a1410 0%, #0f0d09 100%);
}

/* === HERO / SURFACE === */
#surface {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

.logo-text {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(4rem, 12vw, 10rem);
    letter-spacing: 0.08em;
    color: #d4a54a;
    text-shadow:
        0 0 40px rgba(212, 165, 74, 0.3),
        0 0 80px rgba(212, 165, 74, 0.15);
    line-height: 1;
}

.subtitle {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 2vw, 1.3rem);
    color: #f0e6d3;
    opacity: 0.7;
    margin-top: 0.5em;
    letter-spacing: 0.15em;
}

/* === FISH ANIMATIONS === */
.fish {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.fish svg {
    width: 100%;
    height: 100%;
}

.fish-1 { width: 120px; top: 15%; left: 10%; opacity: 0.25; animation: swim-1 25s ease-in-out infinite; }
.fish-2 { width: 80px; top: 60%; left: 75%; opacity: 0.12; animation: swim-2 35s ease-in-out infinite; }
.fish-3 { width: 140px; top: 30%; left: 55%; opacity: 0.2; animation: swim-3 20s ease-in-out infinite; }
.fish-4 { width: 65px; top: 75%; left: 25%; opacity: 0.08; animation: swim-4 40s ease-in-out infinite; }
.fish-5 { width: 100px; top: 45%; left: 85%; opacity: 0.18; animation: swim-5 28s ease-in-out infinite; }
.fish-6 { width: 55px; top: 20%; left: 40%; opacity: 0.1; animation: swim-6 38s ease-in-out infinite; }
.fish-7 { width: 110px; top: 80%; left: 60%; opacity: 0.15; animation: swim-7 22s ease-in-out infinite; }
.fish-8 { width: 70px; top: 10%; left: 70%; opacity: 0.09; animation: swim-8 42s ease-in-out infinite; }
.fish-9 { width: 90px; top: 55%; left: 5%; opacity: 0.22; animation: swim-9 30s ease-in-out infinite; }
.fish-10 { width: 75px; top: 40%; left: 30%; opacity: 0.13; animation: swim-10 33s ease-in-out infinite; }

.fish-archive-1 { width: 90px; top: 20%; left: 80%; opacity: 0.1; animation: swim-2 32s ease-in-out infinite; }
.fish-archive-2 { width: 60px; top: 70%; left: 10%; opacity: 0.08; animation: swim-5 45s ease-in-out infinite; }

@keyframes swim-1 {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(15vw, -5vh) rotate(3deg); }
    50% { transform: translate(30vw, 2vh) rotate(-2deg); }
    75% { transform: translate(15vw, 8vh) rotate(1deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes swim-2 {
    0% { transform: translate(0, 0) rotate(0deg) scaleX(1); }
    30% { transform: translate(-12vw, 4vh) rotate(-2deg) scaleX(1); }
    50% { transform: translate(-20vw, -2vh) rotate(1deg) scaleX(-1); }
    80% { transform: translate(-8vw, 6vh) rotate(-1deg) scaleX(-1); }
    100% { transform: translate(0, 0) rotate(0deg) scaleX(1); }
}

@keyframes swim-3 {
    0% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(-10vw, 3vh) rotate(-3deg); }
    50% { transform: translate(-18vw, -4vh) rotate(2deg); }
    80% { transform: translate(-5vw, 5vh) rotate(-1deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes swim-4 {
    0% { transform: translate(0, 0) rotate(0deg); }
    35% { transform: translate(8vw, -3vh) rotate(2deg); }
    65% { transform: translate(16vw, 2vh) rotate(-1deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes swim-5 {
    0% { transform: translate(0, 0) rotate(0deg) scaleX(1); }
    40% { transform: translate(-15vw, 5vh) rotate(-2deg) scaleX(1); }
    60% { transform: translate(-10vw, -3vh) rotate(3deg) scaleX(-1); }
    100% { transform: translate(0, 0) rotate(0deg) scaleX(1); }
}

@keyframes swim-6 {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(12vw, 6vh) rotate(2deg); }
    50% { transform: translate(20vw, -2vh) rotate(-3deg); }
    75% { transform: translate(8vw, 4vh) rotate(1deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes swim-7 {
    0% { transform: translate(0, 0) rotate(0deg); }
    30% { transform: translate(-8vw, -4vh) rotate(-2deg); }
    60% { transform: translate(-15vw, 3vh) rotate(2deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes swim-8 {
    0% { transform: translate(0, 0) rotate(0deg) scaleX(1); }
    50% { transform: translate(-10vw, 5vh) rotate(-1deg) scaleX(-1); }
    100% { transform: translate(0, 0) rotate(0deg) scaleX(1); }
}

@keyframes swim-9 {
    0% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(18vw, -3vh) rotate(3deg); }
    50% { transform: translate(25vw, 4vh) rotate(-2deg); }
    80% { transform: translate(10vw, -2vh) rotate(1deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes swim-10 {
    0% { transform: translate(0, 0) rotate(0deg); }
    40% { transform: translate(-6vw, 7vh) rotate(-2deg); }
    70% { transform: translate(5vw, -3vh) rotate(3deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* === DESCENT / MANIFESTO === */
#descent {
    padding: 10vh 5vw 15vh;
}

.manifesto-block {
    position: relative;
    z-index: 5;
    max-width: 520px;
    padding: 2.5rem 2rem;
    margin-bottom: 8vh;
    background: rgba(240, 230, 211, 0.06);
    border: 1px solid rgba(212, 165, 74, 0.1);
}

.manifesto-left {
    margin-left: 20%;
    clip-path: polygon(2% 0%, 98% 1%, 100% 3%, 99% 97%, 97% 100%, 3% 99%, 0% 96%, 1% 2%);
}

.manifesto-right {
    margin-left: 55%;
    clip-path: polygon(1% 1%, 97% 0%, 100% 4%, 99% 98%, 96% 100%, 2% 99%, 0% 95%, 1.5% 3%);
}

.manifesto-left-alt {
    margin-left: 15%;
    clip-path: polygon(3% 0%, 99% 2%, 100% 5%, 98% 97%, 95% 100%, 1% 98%, 0% 94%, 2% 1%);
}

.manifesto-text {
    color: #f0e6d3;
    margin-bottom: 1em;
}

.manifesto-text:last-child {
    margin-bottom: 0;
}

.manifesto-text em {
    font-style: italic;
    color: #d4a54a;
    display: block;
    margin-bottom: 0.5em;
}

/* === INK DRIPS === */
.ink-drip {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 60px;
    margin: 4vh 0;
}

.ink-drip path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 2s ease-in-out;
}

.ink-drip.visible path {
    stroke-dashoffset: 0;
}

/* === SECTION LABELS === */
.section-label {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 500;
    font-size: clamp(1.2rem, 3vw, 2rem);
    color: #d4a54a;
    opacity: 0.7;
    position: relative;
    z-index: 5;
    margin-left: 10%;
    margin-bottom: 6vh;
    padding-top: 8vh;
    letter-spacing: 0.1em;
}

.section-label-deep {
    margin-left: 0;
    text-align: center;
}

/* === ARCHIVE / CARDS === */
#archive {
    padding: 5vh 0 15vh;
    min-height: 120vh;
}

.cards-scatter {
    position: relative;
    z-index: 5;
    padding: 0 5vw;
}

.card {
    position: relative;
    width: clamp(260px, 30vw, 340px);
    height: clamp(340px, 40vw, 440px);
    perspective: 1000px;
    margin-bottom: 6vh;
    margin-left: var(--x-offset, 10%);
    transform: rotate(var(--rotation, 0deg));
    cursor: pointer;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.card:hover .card-inner,
.card.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
}

.card-front {
    background: #f0e6d3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    clip-path: polygon(2% 0%, 98% 1%, 100% 3%, 99% 97%, 97% 100%, 3% 99%, 0% 96%, 1% 2%);
}

.card-art {
    width: 85%;
    height: auto;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.card-title {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: #2e2440;
    line-height: 1.2;
}

.card-title-en {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    color: #6b4e3d;
    opacity: 0.7;
    margin-top: 0.25em;
}

.card-back {
    background: #2e2440;
    transform: rotateY(180deg);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    clip-path: polygon(1% 1%, 97% 0%, 100% 4%, 99% 98%, 96% 100%, 2% 99%, 0% 95%, 1.5% 3%);
}

.card-back-title {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 500;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: #d4a54a;
    margin-bottom: 1rem;
}

.card-description {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: clamp(0.85rem, 1.5vw, 1.05rem);
    color: #f0e6d3;
    line-height: 1.7;
    margin-bottom: 1.2rem;
}

.card-meta {
    font-family: 'Karla', sans-serif;
    font-weight: 700;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    color: #c2714f;
    letter-spacing: 0.05em;
}

/* === DEEP / CONTACT === */
#deep {
    padding: 10vh 5vw 15vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.orbs-container {
    position: relative;
    z-index: 5;
    display: flex;
    gap: clamp(2rem, 5vw, 4rem);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4vh;
}

.orb {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(46, 36, 64, 0.5);
    border: 1px solid rgba(168, 213, 194, 0.2);
    box-shadow:
        0 0 20px rgba(168, 213, 194, 0.3),
        0 0 60px rgba(168, 213, 194, 0.1),
        inset 0 0 15px rgba(168, 213, 194, 0.2);
    text-decoration: none;
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.orb:hover {
    box-shadow:
        0 0 30px rgba(168, 213, 194, 0.5),
        0 0 80px rgba(168, 213, 194, 0.2),
        inset 0 0 20px rgba(168, 213, 194, 0.3);
    transform: scale(1.1);
}

.orb svg {
    width: 28px;
    height: 28px;
}

.orb-label {
    font-family: 'Karla', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: #a8d5c2;
    margin-top: 0.4em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.orb-1 { animation: bob-1 4s ease-in-out infinite; }
.orb-2 { animation: bob-2 5s ease-in-out infinite; }
.orb-3 { animation: bob-3 4.5s ease-in-out infinite; }
.orb-4 { animation: bob-4 5.5s ease-in-out infinite; }

@keyframes bob-1 {
    0%, 100% { transform: translateY(0); opacity: 0.8; }
    50% { transform: translateY(-12px); opacity: 1; }
}

@keyframes bob-2 {
    0%, 100% { transform: translateY(0); opacity: 0.85; }
    50% { transform: translateY(-10px); opacity: 1; }
}

@keyframes bob-3 {
    0%, 100% { transform: translateY(0); opacity: 0.8; }
    50% { transform: translateY(-14px); opacity: 1; }
}

@keyframes bob-4 {
    0%, 100% { transform: translateY(0); opacity: 0.9; }
    50% { transform: translateY(-8px); opacity: 1; }
}

/* === FLOOR === */
/* Color reference: #7a9178 sage used in fish SVGs and accents */
.floor-text {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 400;
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
    color: #6b4e3d;
    letter-spacing: 0.15em;
    position: relative;
    z-index: 5;
    animation: pulse-floor 6s ease-in-out infinite;
}

@keyframes pulse-floor {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .manifesto-left,
    .manifesto-right,
    .manifesto-left-alt {
        margin-left: 5%;
        margin-right: 5%;
        max-width: none;
    }

    .card {
        margin-left: auto !important;
        margin-right: auto;
        transform: rotate(calc(var(--rotation, 0deg) * 0.5));
    }

    .cards-scatter {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .section-label {
        margin-left: 5%;
    }

    .orb {
        width: 75px;
        height: 75px;
    }

    .orb svg {
        width: 22px;
        height: 22px;
    }
}