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

html {
    scroll-behavior: smooth;
}

body {
    background: #0a0e1e;
    background: linear-gradient(180deg, #1a2654 0%, #101b3a 30%, #0a0e1e 70%, #060812 100%);
    color: #e8e4dc;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.85;
    min-height: 600vh;
    overflow-x: hidden;
}

/* Parallax background layer */
#bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.caustics {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at 30% 30%, rgba(0,188,212,0.04) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 60%, rgba(0,188,212,0.03) 0%, transparent 40%);
    animation: caustic-move 12s ease-in-out infinite;
}

.caustics-2 {
    animation: caustic-move-2 15s ease-in-out infinite;
    background: radial-gradient(ellipse at 60% 40%, rgba(0,188,212,0.03) 0%, transparent 45%);
}

.caustics-3 {
    animation: caustic-move-3 18s ease-in-out infinite;
    background: radial-gradient(ellipse at 40% 70%, rgba(0,188,212,0.025) 0%, transparent 40%);
}

@keyframes caustic-move {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    50% { transform: translate(5%, 3%) rotate(3deg) scale(1.1); }
}

@keyframes caustic-move-2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-4%, 5%) rotate(-2deg) scale(1.05); }
}

@keyframes caustic-move-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(3%, -4%) scale(0.95); }
}

/* Flames container */
#flames-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.flame {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
}

/* Depth gauge */
#depth-gauge {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 200px;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#depth-gauge.visible {
    opacity: 1;
}

/* Depth zones */
.depth-zone {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    padding: 4rem 2rem;
}

.zone-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Surface zone title */
.site-title {
    font-family: 'Poiret One', cursive;
    font-size: clamp(2.5rem, 7vw, 6rem);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e8e4dc;
    text-shadow: 0.02em 0.02em 0 #00bcd4;
    opacity: 0;
}

.site-title.revealed {
    opacity: 1;
}

.site-title .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.site-title .letter.visible {
    opacity: 1;
    transform: translateY(0);
}

.title-reflection {
    font-family: 'Poiret One', cursive;
    font-size: clamp(2.5rem, 7vw, 6rem);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e8e4dc;
    transform: scaleY(-1);
    filter: blur(2px);
    opacity: 0;
    margin-top: -0.5rem;
    animation: reflection-blur 4s ease-in-out infinite;
}

.title-reflection.visible {
    opacity: 0.3;
}

@keyframes reflection-blur {
    0%, 100% { filter: blur(2px); }
    50% { filter: blur(3px); }
}

.scroll-invite {
    margin-top: 3rem;
    animation: bob 2s ease-in-out infinite;
    opacity: 0;
    transition: opacity 1s ease 3s;
}

.scroll-invite.visible {
    opacity: 0.6;
}

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* Surface zone background */
.surface-zone {
    background: linear-gradient(180deg, #2a4080 0%, #1a2654 100%);
}

.shallows-zone {
    background: transparent;
}

.twilight-zone {
    background: transparent;
}

.midnight-zone {
    background: transparent;
}

.abyss-zone {
    background: transparent;
    min-height: 120vh;
}

.deep-zone {
    background: transparent;
    min-height: 80vh;
}

/* Depth cards */
.depth-card {
    position: relative;
    max-width: 650px;
    width: 100%;
    padding: 3rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.depth-card.in-view {
    opacity: 1;
    transform: translateY(0);
}

.depth-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(ellipse at center, rgba(212,167,66,0.0) 0%, transparent 70%);
    transition: background 0.8s ease;
    pointer-events: none;
}

.depth-card.in-view::before {
    background: radial-gradient(ellipse at center, rgba(212,167,66,0.1) 0%, transparent 70%);
}

/* Deco frames */
.deco-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.frame-svg {
    width: 100%;
    height: 100%;
}

.frame-path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    opacity: 0.15;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}

.depth-card.in-view .frame-path {
    stroke-dashoffset: 0;
    opacity: 0.4;
}

/* Card content */
.card-content {
    position: relative;
    z-index: 1;
}

.zone-label {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 200;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #8ca8b8;
    margin-bottom: 1.5rem;
}

.card-content p {
    margin-bottom: 1.2rem;
    color: #e8e4dc;
}

.first-letter-wrap {
    font-family: 'Poiret One', cursive;
    font-size: 2.5em;
    float: left;
    line-height: 0.8;
    margin-right: 0.1em;
    color: #d4a742;
}

/* Bioluminescent dots */
#bio-dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.bio-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #00bcd4;
    opacity: 0.25;
    animation: pulse-dot 4s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
}

/* Deep zone */
.deep-title {
    font-family: 'Poiret One', cursive;
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 400;
    letter-spacing: 0.12em;
    color: #e8e4dc;
    text-shadow: 0 0 8px #00bcd4;
}

.deep-title .char {
    display: inline-block;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.deep-subtitle {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 200;
    font-size: 0.85rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #8ca8b8;
    margin-top: 1rem;
}

/* Geometric tile pattern overlay */
.depth-zone::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L55 20 L55 40 L30 55 L5 40 L5 20 Z' fill='none' stroke='%23d4a742' stroke-width='0.5' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.5;
}

.surface-zone::after {
    display: none;
}

/* Color references: #0097a7 #c4792a #c97b7b */
.flame path {
    fill: #d4a742;
}

.flame.alt path {
    fill: #c4792a;
}

.coral-accent {
    color: #c97b7b;
}

.deep-aqua {
    color: #0097a7;
}