/* =====================================================
   3D Interactive Server - Hero Section
   Foxgestion - server3d.css
   ===================================================== */

/* ---- Scene Container ---- */
.server-3d-scene {
    position: relative;
    width: 420px;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 900px;
    perspective-origin: 50% 45%;
    cursor: pointer;
    user-select: none;
}

/* ---- 3D Wrapper: receives mouse-follow rotation ---- */
.server-3d-wrapper {
    position: relative;
    width: 300px;
    height: 160px;
    transform-style: preserve-3d;
    transform: rotateX(-15deg) rotateY(20deg);
    transition: transform 0.08s ease-out;
    will-change: transform;
}

/* ---- Chassis ---- */
.server-chassis {
    position: relative;
    width: 300px;
    height: 160px;
    transform-style: preserve-3d;
}

/* ---- Generic Face ---- */
.server-face {
    position: absolute;
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 1px solid rgba(100, 120, 160, 0.25);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    backface-visibility: hidden;
}

/* Front: 300w × 160h, depth 0 */
.server-front {
    width: 300px;
    height: 160px;
    transform: translateZ(60px);
    background: linear-gradient(160deg, #1a2540 0%, #0d1a2e 100%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgba(80, 120, 200, 0.3);
}

/* Back */
.server-back {
    width: 300px;
    height: 160px;
    transform: rotateY(180deg) translateZ(60px);
    background: linear-gradient(160deg, #0d1a2e 0%, #0a1220 100%);
}

/* Top: 300w × 120d */
.server-top {
    width: 300px;
    height: 120px;
    transform: rotateX(90deg) translateZ(0px) translateY(-60px);
    background: linear-gradient(160deg, #1a2540 0%, #111d30 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bottom */
.server-bottom {
    width: 300px;
    height: 120px;
    transform: rotateX(-90deg) translateZ(160px) translateY(-60px);
    background: #090f1a;
}

/* Left: 120d × 160h */
.server-left {
    width: 120px;
    height: 160px;
    transform: rotateY(-90deg) translateZ(0px);
    background: linear-gradient(180deg, #1a2540 0%, #0d1a2e 100%);
}

/* Right (the panel that "slides" away on hover) */
.server-right {
    width: 120px;
    height: 160px;
    transform: rotateY(90deg) translateZ(300px);
    background: linear-gradient(180deg, #1e293b 0%, #111d30 100%);
    transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.5s ease;
}

/* ---- HOVER: open the side panel ---- */
.server-3d-scene:hover .server-right {
    transform: rotateY(90deg) translateZ(300px) translateY(-80px) translateX(30px) rotateZ(-15deg);
    opacity: 0.3;
}

.server-3d-scene:hover .server-side-panel {
    transform: rotateY(90deg) translateX(60px) translateY(-80px) rotateZ(-15deg);
    opacity: 0.25;
}

/* ---- Top Vent ---- */
.server-top-vent {
    width: 180px;
    height: 6px;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 3px,
        rgba(0, 100, 255, 0.2) 3px,
        rgba(0, 100, 255, 0.2) 5px
    );
    border-radius: 4px;
}

/* =====================================================
   Front Panel Components
   ===================================================== */

/* Logo strip */
.server-logo-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 80, 180, 0.15);
    border: 1px solid rgba(0, 100, 255, 0.2);
    border-radius: 3px;
    padding: 4px 10px;
}

.server-logo-strip span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(100, 180, 255, 0.9);
    font-family: 'Courier New', monospace;
}

/* Power LED */
.server-power-led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 6px #00ff88, 0 0 12px #00ff88;
    animation: led-pulse 2s ease-in-out infinite;
}

@keyframes led-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px #00ff88, 0 0 12px #00ff88; }
    50% { opacity: 0.6; box-shadow: 0 0 3px #00ff88; }
}

/* Drive Bays */
.server-drive-bay-row {
    display: flex;
    gap: 6px;
}

.server-drive-bay {
    flex: 1;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(100, 120, 160, 0.2);
    border-radius: 2px;
    display: flex;
    align-items: center;
    padding: 0 5px;
}

.drive-led {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #0088ff;
    box-shadow: 0 0 5px #0088ff;
    animation: drive-blink 1.5s ease-in-out infinite;
}

.server-drive-bay:nth-child(2) .drive-led { animation-delay: 0.3s; }
.server-drive-bay:nth-child(3) .drive-led { animation-delay: 0.7s; }
.server-drive-bay:nth-child(4) .drive-led { animation-delay: 0.1s; }

@keyframes drive-blink {
    0%, 80%, 100% { opacity: 1; }
    85%, 95% { opacity: 0.1; }
}

.drive-led.off {
    background: #333;
    box-shadow: none;
    animation: none;
    opacity: 0.4;
}

/* Port Row */
.server-port-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.server-usb-port {
    width: 14px;
    height: 8px;
    background: #111;
    border: 1px solid rgba(100,120,160,0.3);
    border-radius: 1px;
}

.server-cd-slot {
    flex: 1;
    height: 6px;
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(100,120,160,0.2);
    border-radius: 1px;
}

/* Vent Strip */
.server-vent-strip {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.vent-line {
    height: 2px;
    background: rgba(30, 60, 120, 0.4);
    border-radius: 1px;
}

/* =====================================================
   Internal Components (revealed on hover)
   ===================================================== */

.server-internals {
    position: absolute;
    inset: 0;
    transform: translateZ(0px);
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    opacity: 0;
    transition: opacity 0.5s ease 0.2s;
    pointer-events: none;
    overflow: hidden;
}

.server-3d-scene:hover .server-internals {
    opacity: 1;
}

.server-component {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    border-radius: 3px;
    background: rgba(0, 20, 60, 0.5);
    border: 1px solid rgba(0, 100, 255, 0.15);
    transform: translateZ(40px);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.server-3d-scene:hover .server-component {
    transform: translateZ(50px);
}

.component-label {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(100, 180, 255, 0.7);
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}

/* Motherboard */
.mobo-board {
    width: 60px;
    height: 40px;
    background: #1a3a1a;
    border: 1px solid #2a6a2a;
    border-radius: 2px;
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 4px;
    gap: 4px;
    flex-shrink: 0;
}

.mobo-cpu {
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #888, #555);
    border: 1px solid #999;
    border-radius: 1px;
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(200, 200, 0, 0.4);
}

.mobo-ram {
    width: 4px;
    height: 28px;
    background: linear-gradient(180deg, #222 0%, #3a3a6a 50%, #222 100%);
    border: 1px solid #55f;
    border-radius: 1px;
    flex-shrink: 0;
    align-self: flex-end;
}

.mobo-slot {
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    height: 4px;
    background: #1a2a1a;
    border: 1px solid #2a4a2a;
    border-radius: 1px;
}

/* NVMe */
.nvme .nvme-drive {
    width: 45px;
    height: 14px;
    background: linear-gradient(90deg, #1a1a3a, #2a2a5a, #1a1a3a);
    border: 1px solid rgba(80, 80, 200, 0.5);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.nvme .nvme-drive::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    width: 60%;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        rgba(100, 100, 255, 0.5) 0px,
        rgba(100, 100, 255, 0.5) 4px,
        transparent 4px,
        transparent 6px
    );
    animation: data-flow 0.8s linear infinite;
}

@keyframes data-flow {
    from { background-position: 0 0; }
    to { background-position: 20px 0; }
}

/* RAM Sticks */
.ram-block {
    flex-wrap: wrap;
    gap: 4px;
}

.ram-stick {
    width: 28px;
    height: 14px;
    background: linear-gradient(180deg, #1a1a3a 0%, #2a2a5a 40%, #1a1a3a 100%);
    border: 1px solid rgba(80, 80, 255, 0.5);
    border-radius: 1px;
    position: relative;
    overflow: hidden;
    animation: ram-glow 2s ease-in-out infinite;
}

.ram-stick:nth-child(2) { animation-delay: 0.5s; }
.ram-stick:nth-child(3) { animation-delay: 1s; }
.ram-stick:nth-child(4) { animation-delay: 1.5s; }

@keyframes ram-glow {
    0%, 100% { box-shadow: 0 0 3px rgba(100, 100, 255, 0.3); }
    50% { box-shadow: 0 0 8px rgba(100, 100, 255, 0.8), inset 0 0 4px rgba(100, 100, 255, 0.3); }
}

/* PSU */
.psu-unit {
    width: 50px;
    height: 30px;
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    border: 1px solid #444;
    border-radius: 2px;
    position: relative;
    flex-shrink: 0;
}

.psu-unit::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #111;
    border: 2px solid #555;
}

/* Fans */
.fan-block { gap: 10px; }

.server-fan {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #111;
    border: 2px solid #333;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

.fan-blade {
    position: absolute;
    top: 2px;
    left: 50%;
    transform-origin: 50% 12px;
    width: 6px;
    height: 12px;
    background: rgba(100, 140, 200, 0.7);
    border-radius: 3px 3px 0 0;
    margin-left: -3px;
}

.fan-blade:nth-child(2) { transform: rotate(90deg); }
.fan-blade:nth-child(3) { transform: rotate(180deg); }
.fan-blade:nth-child(4) { transform: rotate(270deg); }

/* Fan spinning - idle and on hover */
.server-fan {
    animation: fan-idle 3s linear infinite;
}

@keyframes fan-idle {
    from { --fan-rot: 0deg; }
    to { --fan-rot: 360deg; }
}

#serverFan1 .fan-blade,
#serverFan2 .fan-blade {
    transform-origin: 50% 12px;
}

#serverFan1 { animation: fan-spin-slow 2s linear infinite; }
#serverFan2 { animation: fan-spin-slow 1.8s linear infinite reverse; }

@keyframes fan-spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.server-3d-scene:hover #serverFan1 { animation: fan-spin-fast 0.3s linear infinite; }
.server-3d-scene:hover #serverFan2 { animation: fan-spin-fast 0.25s linear infinite reverse; }

@keyframes fan-spin-fast {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* =====================================================
   Sliding Side Panel
   ===================================================== */
.server-side-panel {
    position: absolute;
    width: 120px;
    height: 160px;
    top: 0;
    transform: rotateY(90deg) translateZ(300px);
    background: linear-gradient(180deg, #1e2d48 0%, #131f35 100%);
    border: 1px solid rgba(80, 120, 200, 0.2);
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.side-panel-vent {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 20px;
}

.vent-hole {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(80, 120, 200, 0.15);
}

/* =====================================================
   Floating Spec Labels
   ===================================================== */
.server-spec-label {
    position: absolute;
    background: rgba(10, 25, 60, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 100, 255, 0.3);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(150, 200, 255, 0.95);
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 80, 200, 0.2);
    opacity: 0;
    transform: scale(0.9) translateY(4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    z-index: 10;
}

.server-spec-label i {
    color: #4da6ff;
    margin-right: 5px;
}

.server-3d-scene:hover .server-spec-label {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Position each label */
.spec-cpu {
    top: 8px;
    left: -10px;
    transition-delay: 0.1s;
}

.spec-ram {
    top: 8px;
    right: -10px;
    transition-delay: 0.2s;
}

.spec-nvme {
    bottom: 48px;
    left: -10px;
    transition-delay: 0.3s;
}

.spec-net {
    bottom: 48px;
    right: -10px;
    transition-delay: 0.4s;
}

/* =====================================================
   Hint text
   ===================================================== */
.server-hint {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: rgba(150, 180, 230, 0.6);
    white-space: nowrap;
    transition: opacity 0.4s ease;
    font-style: italic;
}

.server-3d-scene:hover .server-hint {
    opacity: 0;
}

/* =====================================================
   Idle floating animation for the whole scene
   ===================================================== */
.server-3d-wrapper {
    animation: server-float 4s ease-in-out infinite;
}

@keyframes server-float {
    0%, 100% { transform: rotateX(-15deg) rotateY(20deg) translateY(0px); }
    50% { transform: rotateX(-18deg) rotateY(22deg) translateY(-8px); }
}

/* Pause float on hover so mouse-move takes over */
.server-3d-scene:hover .server-3d-wrapper {
    animation: none;
}

/* =====================================================
   Ambient glow under the server
   ===================================================== */
.server-3d-scene::before {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 30px;
    background: radial-gradient(ellipse, rgba(0, 100, 255, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    animation: glow-pulse 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glow-pulse {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scaleX(1); }
    50% { opacity: 1; transform: translateX(-50%) scaleX(1.15); }
}

/* =====================================================
   Scanline Effect on Front Panel (sci-fi look)
   ===================================================== */
.server-front::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 100, 255, 0.03) 2px,
        rgba(0, 100, 255, 0.03) 4px
    );
    pointer-events: none;
    border-radius: 4px;
}