/* Container handling 3D space */
.monitor-wrapper {
    perspective: 1000px;
    width: 320px;
    height: 340px; /* Includes stand */
    margin: 0 auto;
    position: relative;
    transform-style: preserve-3d;
}

.monitor-box {
    width: 320px;
    height: 240px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
    /* Center the pivot point */
    transform-origin: center center -50px; 
}

/* Hover Spin Animation */
.monitor-wrapper:hover .monitor-box {
    animation: spin-monitor linear infinite;
    /* Duration set by JS control */
}

@keyframes spin-monitor {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

/* Faces */
.monitor-face {
    position: absolute;
    width: 320px;
    height: 240px;
    backface-visibility: visible; /* Show insides for now, or hidden for solidity */
    border: 1px solid rgba(0,0,0,0.1);
}

/* Front */
.monitor-front {
    transform: translateZ(50px);
    z-index: 10;
}

/* Back */
.monitor-back {
    transform: rotateY(180deg) translateZ(50px);
    background: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.monitor-vent {
    width: 80%;
    height: 60%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 10px,
        rgba(0,0,0,0.1) 10px,
        rgba(0,0,0,0.1) 12px
    );
    border: 2px solid rgba(0,0,0,0.1);
}

/* Sides (Thickness) */
.monitor-right {
    width: 100px; /* Depth */
    transform: rotateY(90deg) translateZ(270px); /* 320 width - 50 Z = 270? No. translateZ = width/2. */
    /* Math: Box is 320 wide. Center is 160. Front is +50. Back is -50. Depth is 100. */
    /* Right face: translateX(160 - 50 = 110) ? Let's simplify. */
    
    /* Re-calculating for a box of depth 100px centered at 0,0,0 */
    /* Front: Z = 50. Back: Z = -50. */
    /* Right: X = 160. RotateY 90. Width 100. */
    left: 110px; /* (320 - 100) / 2 */
    transform: rotateY(90deg) translateZ(160px); 
}

.monitor-left {
    width: 100px;
    left: 110px;
    transform: rotateY(-90deg) translateZ(160px);
}

.monitor-top {
    height: 100px;
    top: 70px; /* (240 - 100) / 2 */
    transform: rotateX(90deg) translateZ(120px); /* 240/2 = 120 */
}

.monitor-bottom {
    height: 100px;
    top: 70px;
    transform: rotateX(-90deg) translateZ(120px);
}

/* Casing Design */
.monitor-casing {
    width: 100%;
    height: 100%;
    background-color: #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    box-shadow: inset 2px 2px 5px rgba(255,255,255,0.5), inset -2px -2px 5px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.monitor-screen {
    flex: 1;
    background: #111;
    border-radius: 4px; /* CRT curve corner */
    position: relative;
    overflow: hidden; /* Crop loop content */
    border: 4px solid #333; /* Bezel inset */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
}

.monitor-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 255, 0, 0.05); /* Tint */
    pointer-events: none;
    z-index: 5;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.2) 100%);
}

.scanlines {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,0) 50%,
        rgba(0,0,0,0.2) 50%,
        rgba(0,0,0,0.2)
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 6;
}

.monitor-content {
    width: 100%;
    height: 100%;
    overflow-y: auto; /* Allow scrolling if content is long? Or hidden? */
    overflow-x: hidden;
    color: #fff;
}
/* Hide scrollbar for retro look */
.monitor-content::-webkit-scrollbar { width: 0; }

.monitor-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #0f0;
    font-family: monospace;
    text-align: center;
    padding: 10px;
}

.monitor-controls {
    height: 20px;
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-right: 10px;
}
.btn {
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Stand - NOT Spinning with the box (visually weird if it spins, but physically correct if whole unit spins. Let's make it static relative to wrapper for better UI, OR spin with it. The user asked "Old pc monitor that is spinning". Usually the monitor head swivels, stand stays. But rotating 360 implies floating or whole object. Let's attach stand to the box animation for full 3D object rotation). 
   
   WAIT: If I put stand OUTSIDE .monitor-box, it won't spin. 
   If I put it INSIDE, it spins.
   Currently HTML has it outside. Let's move it inside OR make the wrapper spin.
   
   Correction: The CSS animates .monitor-box. Stand is outside.
   Let's make the stand spin too. Move stand HTML inside .monitor-box is hard because of the transform origin.
   
   Easier: Animate the Wrapper? No, wrapper has perspective.
   
   Let's add a "stand" to the bottom face of the monitor box?
   
   Actually, a 360 spinning monitor usually implies a product showcase style where the whole object rotates.
   Let's create a .monitor-assembly container inside wrapper, put box and stand in it, and rotate THAT.
*/

/* Revised Structure approach via CSS for the existing HTML:
   The user wants "monitor spinning". 
   If I leave the stand static, it looks like the monitor is twisting off its neck.
   Let's just rotate the .monitor-box (the head) as if it's on a swivel, but 360 is physically impossible for most stands.
   
   For "Spinning on hover", it's likely a playful effect.
   Let's stick to rotating the HEAD (box).
*/

.monitor-stand-neck {
    width: 80px;
    height: 40px;
    background: #d0d0d0;
    margin: 0 auto;
    position: relative;
    top: -10px; /* Connect to head */
    z-index: -1; /* Behind head */
}

.monitor-base {
    width: 140px;
    height: 20px;
    background: #e0e0e0;
    margin: 0 auto;
    border-radius: 4px 4px 0 0;
    position: relative;
    top: -10px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

/* Ensure loop items fit */
.monitor-content .elementor-loop-container {
    height: 100%;
}