/* 1. Global & Typography */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    /* The 3D scene will handle the background */
    background-color: #000814;
    color: white;
    overflow-x: hidden;
    cursor: none; /* Hide default cursor */
}

/* Show normal cursor in navigation area */
.site-header,
.site-header * {
    cursor: pointer !important;
}

/* Custom Fish Cursor */
.fish-cursor {
    position: fixed;
    width: 40px;
    height: 40px;
    pointer-events: none;
    z-index: 10000;
    /* No CSS transition - all animation handled by JavaScript for smooth control */
    will-change: transform, left, top, opacity;
    /* Center the cursor on the fish */
    transform-origin: center center;
    margin-left: -20px; /* Half of width */
    margin-top: -20px; /* Half of height */
    transition: opacity 0.2s ease; /* Smooth fade in/out */
}

/* Subtle floating animation when idle - removed to prevent transform conflicts */
/* The fish cursor rotation is handled by JavaScript */

.fish-cursor svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Cursor ripple trail effect */
.ripple {
    position: fixed;
    border: 2px solid rgba(135, 206, 235, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    animation: rippleEffect 1.5s ease-out forwards;
}

@keyframes rippleEffect {
    0% {
        width: 10px;
        height: 10px;
        opacity: 1;
        margin-left: -5px;
        margin-top: -5px;
    }
    100% {
        width: 60px;
        height: 60px;
        opacity: 0;
        margin-left: -30px;
        margin-top: -30px;
    }
}

/* 2. WebGL Canvas */
#webgl-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Sit behind all content */
    z-index: 1;
}

/* 3. Header & Navigation */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(26, 58, 82, 0.5); /* Semi-transparent */
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    /* Sit on top of the canvas */
    z-index: 10;
}

.main-nav {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 1rem;
}

.main-nav ul {
    display: flex;
    justify-content: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav li {
    padding: 1rem 0;
}

.main-nav a {
    text-decoration: none;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.main-nav a:hover {
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* 4. Main Content & Sections */
main {
    /* Sit on top of the canvas */
    position: relative;
    z-index: 5;
}

.content-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    box-sizing: border-box;
    position: relative;
}

/* Push first section down to 'land' below the header - HERO SECTION */
#me {
    padding-top: 100vh;
    min-height: 120vh; /* Larger hero impact */
    margin-bottom: 30vh; /* Breathing space - floating feeling */
}

/* Experience - Compact and efficient at shallow depth */
#experience {
    min-height: 85vh;
    margin-bottom: 25vh;
    justify-content: flex-start; /* Align to top for variety */
    padding-top: 8rem;
}

/* Interest - Medium depth with center focus */
#interest {
    min-height: 90vh;
    margin-bottom: 20vh;
}

/* Contact - Concise ending at the abyss */
#contact {
    min-height: 70vh;
    margin-bottom: 10vh; /* Less space at the end */
}

.content-wrapper {
    max-width: 760px;
    width: 200px;
    height: 200px;
    text-align: center;
    /* Glassmorphism effect to sit on top of the 3D scene */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    padding: 2.5rem;
    border-radius: 50%; /* Start as circle */
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);

    /* Smooth transitions - use transform for movement, explicit values for size */
    /* This combines the reveal animation with the expansion animation */
    transition:
        width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
        height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-radius 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55),
        max-height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), /* Animate max-height for smooth vertical expansion */
        border-radius 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), /* Sync curve with width for one-step morph */
        transform 0.8s ease-out, /* Use ease-out for both reveal and float */
        box-shadow 0.6s ease,
        background 0.4s ease,
        opacity 0.8s ease-out;

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    cursor: none; /* Hide default cursor to only show the fish */

    /* Enable GPU acceleration for transform only */
    will-change: transform, opacity;
}

/* Bubble floating animation - only when not expanded */
.content-wrapper:not(.expanded):not(.glowing) {
    animation: bubbleFloat 4s ease-in-out infinite;
}

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

/* Hide content in bubble state, show only section name */
.content-wrapper p {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease 0.2s;
}

.content-wrapper h2 {
    font-size: 1.8rem;
    margin: 0;
    padding: 0;
    transition: font-size 0.4s ease;
}

/* Glow state when fish is approaching (but not yet expanded) */
.content-wrapper.glowing {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 40px rgba(135, 206, 235, 0.6),
        0 0 80px rgba(135, 206, 235, 0.3);
    border-color: rgba(135, 206, 235, 0.6);
    /* Don't override transform - let floating animation handle it */
}

/* Expanded state when fish cursor is near */
.content-wrapper.expanded {
    width: 760px;
    height: auto;
    height: auto; /* Keep for content flow */
    max-height: 500px; /* Set a max-height large enough for any content */
    border-radius: 20px; /* Morph to rounded rectangle */
    align-items: flex-start; /* Align content to the top */
    flex-direction: column; /* Stack content vertically */
    text-align: left;
    /* Animation stopped by :not(.expanded) selector above */

    /* Enhanced glow when fully expanded */
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.4),
        0 0 60px rgba(135, 206, 235, 0.8),
        0 0 120px rgba(135, 206, 235, 0.4),
        inset 0 0 40px rgba(135, 206, 235, 0.1);
    border-color: rgba(135, 206, 235, 0.8);
    background: rgba(255, 255, 255, 0.15);
}

.content-wrapper.expanded h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
}

.content-wrapper.expanded p {
    display: block;
    opacity: 1;
}

/* Staggered layout - sections appear at different horizontal positions */
#me .content-wrapper {
    margin-right: auto;
    margin-left: auto;
    /* Hero - center with enhanced depth */
    background: rgba(255, 255, 255, 0.15);
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.4),
        0 0 60px rgba(135, 206, 235, 0.2);
}

#experience .content-wrapper {
    margin-right: 5%;
    margin-left: auto;
    /* Shallow depth - brighter, more transparent */
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(135, 206, 235, 0.4);
    border-left: 4px solid rgba(135, 206, 235, 0.6);
}

#interest .content-wrapper {
    margin-right: auto;
    margin-left: 5%;
    /* Medium depth - balanced */
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(74, 159, 216, 0.3);
    border-right: 4px solid rgba(74, 159, 216, 0.5);
}

#contact .content-wrapper {
    margin-right: auto;
    margin-left: auto;
    /* Deep abyss - darker, more mysterious */
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(26, 95, 138, 0.4);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 40px rgba(26, 95, 138, 0.3);
}


.content-wrapper h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    position: relative;
    padding-bottom: 1rem;
}

/* Depth-based gradient headings */
#me h2 {
    font-size: 1.8rem;
    background: linear-gradient(135deg, #ffffff 0%, #87CEEB 50%, #4A9FD8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fadeInUp 1s ease-out;
}

#me .content-wrapper.expanded h2 {
    font-size: 3.5rem;
}

#me h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #87CEEB, transparent);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#me .content-wrapper.expanded h2::after {
    opacity: 1;
}

#experience h2 {
    font-size: 1.8rem;
    background: linear-gradient(135deg, #ffffff 0%, #87CEEB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#experience .content-wrapper.expanded h2 {
    font-size: 2.8rem;
}

#experience h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #87CEEB, transparent);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#experience .content-wrapper.expanded h2::after {
    opacity: 1;
}

#interest h2 {
    font-size: 1.8rem;
    background: linear-gradient(135deg, #ffffff 0%, #4A9FD8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#interest .content-wrapper.expanded h2 {
    font-size: 2.8rem;
}

#interest h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #4A9FD8);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#interest .content-wrapper.expanded h2::after {
    opacity: 1;
}

#contact h2 {
    font-size: 1.8rem;
    background: linear-gradient(135deg, #ffffff 0%, #2A7AA8 80%, #1A5F8A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#contact .content-wrapper.expanded h2 {
    font-size: 2.5rem;
}

#contact h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #1A5F8A, transparent);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#contact .content-wrapper.expanded h2::after {
    opacity: 1;
}

/* Fade in animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-wrapper p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Scroll Hint Arrow */
.scroll-hint {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.scroll-hint.hidden {
    opacity: 0;
    pointer-events: none;
}

.arrow-container {
    text-align: center;
}

.arrow-down {
    font-size: 3rem;
    color: #FFD700;
    animation: bounce 2s infinite;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.hint-text {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    margin-top: -10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

/* Sound Toggle Button */
.sound-toggle {
    position: fixed;
    top: 100px;
    left: 30px;
    z-index: 1000;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.sound-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.sound-icon {
    font-size: 1.8rem;
}

/* Content Card Float Animation */
.content-wrapper {
    opacity: 0;
    transform: translateY(50px); /* Initial state for reveal */
}

/* Reveal animation when in viewport */
.content-wrapper.reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Different reveal animations for each section */
#me .content-wrapper {
    animation: fadeInScale 1.2s ease-out forwards;
}

#experience .content-wrapper {
    opacity: 0;
}

#experience .content-wrapper.reveal {
    opacity: 1;
}

#interest .content-wrapper {
    opacity: 0;
}

#interest .content-wrapper.reveal {
    opacity: 1;
}

#contact .content-wrapper {
    opacity: 0;
}

#contact .content-wrapper.reveal {
    opacity: 1;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.7);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Welcome Overlay */
.welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 8, 20, 0.95);
    backdrop-filter: blur(10px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.welcome-overlay.hidden {
    opacity: 0;
}

.welcome-message {
    text-align: center;
    color: white;
    max-width: 600px;
    padding: 2rem;
}

.welcome-message h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(135, 206, 235, 0.8);
}

.welcome-message p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.move-cursor-hint {
    font-size: 1rem;
    color: #FFD700;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}


/* Sea Creatures Container - World-space positioning */
.fish-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Viewport height since we're using fixed positioning */
    pointer-events: none;
    z-index: 5;
    /* Remove overflow: hidden to allow creatures to exist at any depth */
}

.sea-creature {
    position: absolute;
    opacity: 0.85;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Creature scared/flee animation when cursor gets near */
.sea-creature.scared {
    transform: scale(1.1);
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6)) brightness(1.2);
}

/* Different creature types with inline SVG as placeholder */
.creature-turtle {
    /* Using a realistic sprite sheet for the turtle */
    width: 256px; /* Width of a single frame */
    height: 256px; /* Height of a single frame */
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAEACAYAAADx4vkeAAAgAElEQVR4nOzde1xU154/8M+dO3fu3Llz585kMplMJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpNJJpna');
    /* Apply sprite animation only - movement handled by JavaScript */
    animation: turtleSwimSprite 1.5s steps(11) infinite;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
}

.creature-fish {
    width: 80px;
    height: 50px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 50"><ellipse cx="40" cy="25" rx="30" ry="18" fill="%23ff9e5a" opacity="0.9"/><ellipse cx="35" cy="25" rx="25" ry="15" fill="%23ffa366"/><path d="M10,25 L0,15 L0,35 Z" fill="%23ff9e5a"/><path d="M65,15 L75,10 L70,25 Z" fill="%23ff8c42"/><path d="M65,35 L75,40 L70,25 Z" fill="%23ff8c42"/><circle cx="25" cy="20" r="3" fill="%23333"/><circle cx="26" cy="19" r="1" fill="%23fff"/><path d="M40,10 Q50,8 55,15" fill="none" stroke="%23ff8c42" stroke-width="1"/></svg>');
}

.creature-jellyfish {
    width: 70px;
    height: 90px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 90"><ellipse cx="35" cy="25" rx="30" ry="22" fill="%23b19cd9" opacity="0.7"/><ellipse cx="35" cy="20" rx="25" ry="18" fill="%23c8b6e2" opacity="0.6"/><path d="M15,35 Q10,50 12,70" stroke="%23b19cd9" stroke-width="2" fill="none" opacity="0.6"/><path d="M25,35 Q20,55 23,75" stroke="%23b19cd9" stroke-width="2" fill="none" opacity="0.6"/><path d="M35,35 Q35,55 35,80" stroke="%23b19cd9" stroke-width="2" fill="none" opacity="0.6"/><path d="M45,35 Q50,55 47,75" stroke="%23b19cd9" stroke-width="2" fill="none" opacity="0.6"/><path d="M55,35 Q60,50 58,70" stroke="%23b19cd9" stroke-width="2" fill="none" opacity="0.6"/><circle cx="30" cy="22" r="2" fill="%23333" opacity="0.4"/><circle cx="40" cy="22" r="2" fill="%23333" opacity="0.4"/></svg>');
    animation: jellyfishFloat 4s ease-in-out infinite;
}

.creature-shark {
    width: 140px;
    height: 60px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 60"><ellipse cx="70" cy="30" rx="50" ry="20" fill="%235a6b7d" opacity="0.9"/><ellipse cx="65" cy="30" rx="45" ry="17" fill="%236b7c8f"/><path d="M20,30 L5,20 L8,30 L5,40 Z" fill="%235a6b7d"/><path d="M115,15 L135,5 L125,30 Z" fill="%235a6b7d"/><path d="M70,10 L75,0 L80,10 Z" fill="%236b7c8f"/><circle cx="50" cy="25" r="3" fill="%23333"/><path d="M30,30 L20,32" stroke="%23333" stroke-width="1" fill="none"/></svg>');
}

.creature-whale {
    width: 180px;
    height: 80px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 80"><ellipse cx="90" cy="40" rx="70" ry="30" fill="%234a6fa5" opacity="0.9"/><ellipse cx="85" cy="40" rx="65" ry="27" fill="%235a7fb5"/><path d="M20,40 L0,30 L5,40 L0,50 Z" fill="%234a6fa5"/><path d="M155,30 L175,20 L170,40 Z" fill="%234a6fa5"/><path d="M155,50 L175,60 L170,40 Z" fill="%234a6fa5"/><circle cx="65" cy="32" r="4" fill="%23333"/><ellipse cx="90" cy="25" rx="30" ry="8" fill="%23699bd5" opacity="0.5"/></svg>');
}

.creature-angler {
    width: 120px;
    height: 90px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90'%3E%3Cpath d='M110,45 C110,65 90,80 70,80 C40,80 20,65 20,45 C20,25 40,10 70,10 C90,10 110,25 110,45 Z' fill='%233a2e2e'/%3E%3Cpath d='M20,45 C15,40 10,50 20,55 Z' fill='%233a2e2e'/%3E%3Cpath d='M80,10 C75,5 85,0 90,5' stroke='%235c4a4a' stroke-width='2' fill='none'/%3E%3Ccircle cx='95' cy='3' r='5' fill='%23f0e68c'/%3E%3Ccircle cx='85' cy='40' r='4' fill='%23f0e68c' opacity='0.5'/%3E%3C/svg%3E");
    opacity: 0.95;
    filter: brightness(0.8) drop-shadow(0 6px 12px rgba(0,0,0,0.6));
    animation: anglerDrift 18s ease-in-out infinite;
}

.angler-light {
    position: absolute;
    top: -25px; /* Position relative to the fish SVG */
    left: 85px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(240, 230, 140, 0.5) 0%, rgba(240, 230, 140, 0.1) 40%, transparent 70%);
    border-radius: 50%;
    animation: lightPulse 3s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes lightPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes anglerDrift {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    25% { transform: translateY(10px) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(2deg); }
    75% { transform: translateY(5px) rotate(-1deg); }
}

@keyframes swimAcross {
    0% {
        left: -200px;
        transform: scaleX(1) translateY(0) rotate(0deg);
    }
    20% {
        transform: scaleX(1) translateY(-15px) rotate(-2deg);
    }
    40% {
        transform: scaleX(1) translateY(0) rotate(0deg);
    }
    45% {
        transform: scaleX(1) translateY(5px) rotate(2deg);
    }
    50% {
        transform: scaleX(-1) translateY(0) rotate(0deg);
    }
    70% {
        transform: scaleX(-1) translateY(-12px) rotate(-2deg);
    }
    90% {
        transform: scaleX(-1) translateY(0) rotate(0deg);
    }
    100% {
        left: calc(100% + 200px);
        transform: scaleX(1) translateY(0) rotate(0deg);
    }
}

/* New animation for the turtle sprite sheet */
@keyframes turtleSwimSprite {
    from { background-position: 0 0; }
    to { background-position: -2816px 0; } /* 256px width * 11 frames */
}

@keyframes jellyfishFloat {
    0%, 100% {
        transform: translateY(0) scaleY(1);
    }
    50% {
        transform: translateY(-10px) scaleY(0.95);
    }
}

/* Bioluminescent glow effects for deep sections */
@keyframes biolumGlow {
    0%, 100% {
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            0 0 30px rgba(74, 159, 216, 0.3);
    }
    50% {
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            0 0 60px rgba(74, 159, 216, 0.6),
            0 0 90px rgba(135, 206, 235, 0.3);
    }
}

@keyframes headingGlow {
    0%, 100% {
        text-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 20px rgba(135, 206, 235, 0.3);
    }
    50% {
        text-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 30px rgba(135, 206, 235, 0.6), 0 0 50px rgba(74, 159, 216, 0.4);
    }
}

/* Apply glow effects to deeper sections */
#interest .content-wrapper {
    animation: biolumGlow 4s ease-in-out infinite;
}

#contact .content-wrapper {
    animation: biolumGlow 3s ease-in-out infinite;
}

#interest h2, #contact h2 {
    animation: headingGlow 3s ease-in-out infinite;
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    /* Reduce section heights on mobile */
    #me {
        min-height: 100vh;
        margin-bottom: 15vh;
    }

    #experience {
        min-height: 80vh;
        margin-bottom: 15vh;
    }

    #interest {
        min-height: 80vh;
        margin-bottom: 15vh;
    }

    #contact {
        min-height: 70vh;
        margin-bottom: 10vh;
    }

    /* Remove staggered layout on mobile - center everything */
    #experience .content-wrapper,
    #interest .content-wrapper {
        margin-right: auto;
        margin-left: auto;
    }

    /* Reduce heading sizes on mobile */
    #me h2 {
        font-size: 2.5rem;
    }

    #experience h2,
    #interest h2 {
        font-size: 2rem;
    }

    #contact h2 {
        font-size: 1.8rem;
    }

    .content-wrapper {
        padding: 2rem 1.5rem;
    }

    .content-wrapper p {
        font-size: 1rem;
    }
}