/* Modern Rendering Optimizations */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #FAFAFA;
    color: #1E293B;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Splash Screen Base */
#splash-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: #0A192F;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease-in-out;
}

#splash-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: scale(0.8);
    animation: splashEnter 0.5s ease-out forwards;
}

.heartbeat-icon {
    color: #0D9488;
    margin-bottom: 1.5rem;
    width: 6rem;
    height: 6rem;
    animation: pulseHeartbeat 1.5s infinite ease-in-out;
}

@keyframes splashEnter {
    to { opacity: 1; transform: scale(1); }
}

@keyframes pulseHeartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Glassmorphism Effect Panels */
.glass {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-dark {
    background: rgba(10, 25, 47, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Fluid Typography (Tailwind Arbitrary Value Map) */
:root {
    --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
    --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
    --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
    --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
    --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
}

/* Interactive 3D Card States setup */
.perspective-1000 {
    perspective: 1000px;
}
.card-3d-inner {
    transition: transform 0.1s ease;
    transform-style: preserve-3d;
}

/* Page Transition Container */
#main-content {
    opacity: 0;
    transform: translateY(20px);
}