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

body {
    background-color: #060709; /* Moody dark overcast sky base */
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px;
}

/* Cloudy Backdrop Infrastructure */
.cloud-backdrop-system {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 1;
    background: linear-gradient(to bottom, #050608 0%, #11141a 100%);
    transition: background-color 0.15s ease-out; /* Smooth transition for lightning flash */
}

/* Base parameters for volumetric cloud fog textures */
.mist-layer {
    position: absolute;
    width: 250%;
    height: 250%;
    top: -75%;
    left: -75%;
    pointer-events: none;
    will-change: transform;
}

/* Layer 1: Slow, dense background storm front */
.mist-one {
    background: radial-gradient(circle at 30% 40%, rgba(35, 41, 53, 0.4) 0%, transparent 50%),
                radial-gradient(circle at 85% 20%, rgba(24, 29, 38, 0.5) 0%, transparent 45%);
    animation: rollClouds 55s linear infinite;
}

/* Layer 2: Medium speed, higher-contrast gray mists */
.mist-two {
    background: radial-gradient(circle at 70% 60%, rgba(45, 52, 68, 0.3) 0%, transparent 40%),
                radial-gradient(circle at 15% 80%, rgba(30, 36, 48, 0.4) 0%, transparent 50%);
    animation: rollClouds 40s linear infinite reverse;
}

/* Layer 3: Faster sweeping ambient overhead cloud condensation */
.mist-three {
    background: radial-gradient(circle at 50% 30%, rgba(55, 64, 82, 0.15) 0%, transparent 60%);
    filter: blur(40px);
    animation: rollClouds 28s linear infinite;
}

/* Simulated Sheet Lightning Effect Triggered on Core Ring Hover */
.cloud-backdrop-system.lightning-active {
    background: linear-gradient(to bottom, #1d222d 0%, #30394d 100%);
}

/* 3D Scene Foreground Setup */
.viewport-3d {
    z-index: 10;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.curved-ring {
    position: relative;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    z-index: 3;
    will-change: transform;
}

/* Letter container nodes — WIDENED to ensure letters don't smash together */
.curved-ring > span {
    position: absolute;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 65px; 
    height: 80px;
}

/* Individual 3D Layers Geometry styling */
.letter-layer {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    font-weight: 900;
    text-transform: uppercase;
    user-select: none;
    cursor: pointer;
    position: absolute;
    white-space: nowrap;
    transform: translateZ(calc(var(--layer-idx) * 3px));
}

/* Extruded side profile walls built with deep layered step shadows */
.side-slice {
    color: #0b0c0e;
    text-shadow: 
        1px 1px 1px rgba(0,0,0,0.9),
        2px 2px 3px rgba(0,0,0,0.8),
        -1px -1px 1px rgba(0,0,0,0.5);
}

/* Front cap face */
.front-slice {
    color: #171a22;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
}

/* Text flares bright white, cutting clean through the dark storm clouds */
.curved-ring:hover .front-slice {
    color: #ffffff;
    text-shadow: 0 0 25px rgba(255, 255, 255, 0.6), 
                 0 10px 30px rgba(0,0,0,0.9);
}

/* Physical floor shadow casting */
.shadow-floor {
    position: absolute;
    width: 600px;
    height: 65px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 70%);
    bottom: -120px;
    left: calc(50% - 300px);
    z-index: 2;
    transform: rotateX(85deg) translateZ(-40px);
    filter: blur(14px);
    pointer-events: none;
    will-change: transform, opacity;
    transition: opacity 0.3s ease;
}

.curved-ring:hover ~ .shadow-floor {
    opacity: 0.4;
}

/* Seamless infinite orbital cloud panning loop */
@keyframes rollClouds {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}