/* CSS Variables for Bioluminescent Colors */
:root {
    --glow-blue: #031cbb;
    --glow-purple: #0780a2;
    --bg-black: #000000;
    --glow-white: #d3d3d3;
    --white: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--white);
    font-family: sans-serif;
}

body {
    background-color: var(--bg-black);
    min-height: 100vh;
    overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Canvas Background - Behind Everything */
#biolum-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: all;
    background: var(--bg-black);
    opacity: 1;
    cursor: pointer;
}

/* Sonar Layer - Independent positioning layer above media card */
#sonar-layer {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none; /* Visual only, no click handling */
    overflow: hidden; /* Prevent any overflow scrolling */
}

/* Foreground App Container */
#app {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Media Card - No padding, no glassmorphism */
.media-card {
    background: var(--bg-black);
    border-radius: 15px;
    padding: 0;
    max-width: 500px;
    width: 70%;
    height: 500px;

    will-change: transform;
    position: relative;
    z-index: 2;

    align-content: center;
    /* justify-content: center; */

}

.media-card:hover {
    transform: scale(1.01);
    box-shadow: 0px 1px 5px var(--bg-black);
    cursor: pointer;
}

.content-box{
    position: relative;
    height: 100%;
    width: 100%;
}

.headertext{
    white-space: nowrap;
}

.subtext{
    white-space: nowrap;
}

.content-box img {
    width: 12%;
    min-width: 50px;
    height: auto;
    border-radius: 20px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.content-box h1 {
    font-size: 1.5rem;
    font-weight: 500;
}

.content-box p1 {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.content-box p2 {
    margin-bottom: 2rem;
}

.footer-text.active {
    opacity: 0.4;
}

.footer-text:hover {
    opacity: 0.7;
}

/* Responsive Design */
@media (max-width: 768px) {
    .media-card {
        width: 65%;
        max-width: 350px;
        aspect-ratio: 9/16;
    }

    .footer-text {
        bottom: 20px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .media-card {
        width: 75%;
        max-width: 400px;
        aspect-ratio: 9/16;
    }

    .footer-text {
        bottom: 15px;
        font-size: 9px;
    }
}

/* Animation sequence classes */
.content-box img,
.headertext,
.subtext {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.content-box img.show,
.headertext.show,
.subtext.show {
    opacity: 1;
}

/* Sentence structure for smooth text transitions */
.sentence {
    white-space: nowrap;
}

.p1 {
    opacity: 1;
}

.p2 {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.p2.show {
    opacity: 1;
}

/* Logo pulse animation - synced with sonar emissions */
@keyframes logoPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Flicker-out animation for subtext - unpredictable death throes */
@keyframes neonFlickerOut {
    0% { opacity: 1; }
    3.7% { opacity: 1; }
    5.9% { opacity: 0.13; }
    6.4% { opacity: 1; }
    8.1% { opacity: 1; }
    11.2% { opacity: 0.04; }
    12.7% { opacity: 0.21; }
    13.8% { opacity: 1; }
    16.3% { opacity: 1; }
    18.9% { opacity: 0.09; }
    19.5% { opacity: 1; }
    22.4% { opacity: 1; }
    25.1% { opacity: 0.02; }
    25.6% { opacity: 0.17; }
    27.3% { opacity: 1; }
    29.8% { opacity: 1; }
    32.6% { opacity: 1; }
    34.7% { opacity: 0.08; }
    35.4% { opacity: 1; }
    37.9% { opacity: 1; }
    40.3% { opacity: 0.05; }
    41.1% { opacity: 0.24; }
    42.6% { opacity: 1; }
    45.2% { opacity: 1; }
    47.8% { opacity: 0.11; }
    48.7% { opacity: 1; }
    51.4% { opacity: 1; }
    53.9% { opacity: 0.03; }
    54.8% { opacity: 1; }
    57.3% { opacity: 1; }
    59.7% { opacity: 1; }
    62.1% { opacity: 0.14; }
    63.2% { opacity: 1; }
    65.8% { opacity: 1; }
    68.4% { opacity: 0.06; }
    69.1% { opacity: 0.19; }
    70.9% { opacity: 1; }
    73.6% { opacity: 1; }
    76.2% { opacity: 0.07; }
    77.1% { opacity: 1; }
    79.8% { opacity: 1; }
    82.3% { opacity: 0.04; }
    83.7% { opacity: 1; }
    85.9% { opacity: 1; }
    87.6% { opacity: 0.15; }
    88.4% { opacity: 1; }
    90.7% { opacity: 0.08; }
    91.9% { opacity: 1; }
    93.2% { opacity: 0.12; }
    94.8% { opacity: 0.03; }
    95.7% { opacity: 1; }
    97.1% { opacity: 0.06; }
    98.4% { opacity: 0.02; }
    99.3% { opacity: 0.18; }
    100% { opacity: 0; }
}

.content-box img.show.pulse {
    animation: logoPulse 0.6s ease-out;
    transform-origin: center;
    will-change: transform;
}

.subtext.show.flicker-out {
    animation: neonFlickerOut 1s ease-in-out forwards;
}

/* Slide up animations for smooth transitions */
@keyframes slideUpAndOut {
    0% { 
        opacity: 1; 
        transform: translate(-50%, -50%); 
    }
    100% { 
        opacity: 0; 
        transform: translate(-50%, -150%); 
    }
}

@keyframes slideUpAndIn {
    0% { 
        opacity: 0; 
        transform: translate(-50%, 50%); 
    }
    100% { 
        opacity: 1; 
        transform: translate(-50%, -50%); 
    }
}

.headertext.slide-out {
    animation: slideUpAndOut 0.8s ease-in-out forwards;
}

.subtext.slide-in {
    animation: slideUpAndIn 0.8s ease-in-out forwards;
}

/* Sonar ripple effect for inactive state */
.sonar-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* Individual ripples don't block clicks */
}

/* Desktop: Full circular ripples */
@keyframes sonarPulse {
    0% {
        width: 350px;
        height: 350px;
        opacity: 0.8;
        border-width: 2px;
    }
    30% {
        opacity: 0.6;
        border-width: 2px;
    }
    70% {
        opacity: 0.3;
        border-width: 1px;
    }
    100% {
        width: 800px;
        height: 800px;
        opacity: 0;
        border-width: 0;
    }
}

/* Mobile: Up-down vertical directional emission */
@keyframes sonarPulseMobileVertical {
    0% {
        width: 350px;
        height: 350px;
        opacity: 0.8;
        border-width: 2px;
        clip-path: polygon(50% 50%, 22.5% 0%, 77.5% 0%, 77.5% 100%, 22.5% 100%);
    }
    30% {
        opacity: 0.6;
        border-width: 2px;
        clip-path: polygon(50% 50%, 22.5% 0%, 77.5% 0%, 77.5% 100%, 22.5% 100%);
    }
    70% {
        opacity: 0.3;
        border-width: 1px;
        clip-path: polygon(50% 50%, 22.5% 0%, 77.5% 0%, 77.5% 100%, 22.5% 100%);
    }
    100% {
        width: 800px;
        height: 800px;
        opacity: 0;
        border-width: 0;
        clip-path: polygon(50% 50%, 22.5% 0%, 77.5% 0%, 77.5% 100%, 22.5% 100%);
    }
}

.sonar-ripple.pulse {
    animation: sonarPulse 3s ease-out forwards;
}

/* Mobile-specific directional emission */
@media (max-width: 768px) {
    .sonar-ripple.pulse {
        animation: sonarPulseMobileVertical 3s ease-out forwards;
    }

    /* Ensure logo pulse works properly on mobile */
    .content-box img.show.pulse {
        animation: logoPulse 0.6s ease-out;
        transform-origin: center;
        will-change: transform;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .media-card,
    .footer-text {
        transition: none;
    }

    .content-box img.show.pulse,
    .subtext.show.flicker-out,
    .headertext.slide-out,
    .subtext.slide-in {
        animation: none;
    }

    .sonar-ripple.pulse {
        animation: none;
        display: none;
    }
}