@import url('../fonts/fonts.css');

/* ═════════════════════════════════════════════════════════════════════════════
   ESCENA 3D — PORTADA DEL PROYECTO EN LÍNEA

   Habitación construida enteramente con CSS: seis caras, lámparas que
   parpadean y papeles en las paredes. No usa JavaScript ni WebGL.

   Se sirve en su propia plantilla, sin barra de navegación ni pie, porque el
   listado de proyectos la carga dentro de un iframe como portada.

   Copiada tal cual del sitio original para no perder ni un detalle del diseño.
   ═════════════════════════════════════════════════════════════════════════════ */

html,
body {
    height: 100%;
}

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

body {
    background: #050505;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

main {
    position: relative;
    width: 100%;
    height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
}

.scene-wrapper {
    position: relative;
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    height: 100%;
    max-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scene {
    --cube-size: 300px;
    width: var(--cube-size);
    height: var(--cube-size);
    perspective: 1200px;
    margin: 0 auto;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-15deg) rotateY(-90deg);
    animation: spin 25s infinite linear;
}

@keyframes spin {
    from {
        transform: rotateX(-15deg) rotateY(-90deg);
    }

    to {
        transform: rotateX(-15deg) rotateY(270deg);
    }
}

.cube__face {
    position: absolute;
    width: var(--cube-size, 300px);
    height: var(--cube-size, 300px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
    background: #222;
}

.cube__face--front {
    transform: rotateY(0deg) translateZ(calc(var(--cube-size, 300px) / 2));
    background: #2a2a2a;
}

.cube__face--right {
    transform: rotateY(90deg) translateZ(calc(var(--cube-size, 300px) / 2));
    background-color: #333;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.1"/%3E%3C/svg%3E'), radial-gradient(circle at 50% 30%, rgba(200, 200, 200, 0.2) 0%, rgba(50, 50, 50, 0.6) 100%);
    background-blend-mode: overlay, normal;
}

.cube__face--back {
    transform: rotateY(180deg) translateZ(calc(var(--cube-size, 300px) / 2));
    background: #404040;
}

.cube__face--left {
    transform: rotateY(-90deg) translateZ(calc(var(--cube-size, 300px) / 2));
    background-color: #333;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.1"/%3E%3C/svg%3E'), radial-gradient(circle at 50% 30%, rgba(200, 200, 200, 0.2) 0%, rgba(50, 50, 50, 0.6) 100%);
    background-blend-mode: overlay, normal;
}

.cube__face--top {
    transform: rotateX(90deg) translateZ(calc(var(--cube-size, 300px) / 2));
    background: #2c2c2c;
}

.cube__face--bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--cube-size, 300px) / 2));
    background: #222;
}

/* ── Door ── */
.door-container {
    width: 33%;
    height: 88%;
    background-color: #1f1f1f;
    border: 2px solid rgba(255, 255, 255, 0.05);
    border-bottom: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.door-window {
    width: 38%;
    height: 14%;
    background-color: #c9a0ff;
    border: 1px solid rgba(0, 0, 0, 0.8);
    margin-top: 18%;
    box-shadow: 0 0 25px rgba(201, 160, 255, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.5);
    position: relative;
    /* Dynamic pulsing glow */
    animation: windowGlow 4s ease-in-out infinite alternate;
}

@keyframes windowGlow {
    0% {
        box-shadow: 0 0 15px rgba(201, 160, 255, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 35px rgba(201, 160, 255, 1.0), inset 0 0 20px rgba(255, 255, 255, 0.7);
        background-color: #d4b3ff;
    }

    100% {
        box-shadow: 0 0 20px rgba(201, 160, 255, 0.6), inset 0 0 12px rgba(255, 255, 255, 0.4);
    }
}

.door-window::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 60%);
}

.door-handle {
    width: 5%;
    height: 13%;
    background-color: #111;
    border-radius: 2px;
    position: absolute;
    right: 8%;
    top: 47%;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}


/* ── Notes / Pinboard ── */
.notes-container {
    position: absolute;
    width: 70%;
    height: 65%;
    top: 22%;
    left: 15%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 4px;
    padding: 0;
    opacity: 0.95;
    z-index: 2;
}

.note {
    width: 100%;
    height: 100%;
    background-color: #f0f0ea;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2px;
}

.note::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 6px;
    background-color: #1d4ed8;
    opacity: 0.8;
    z-index: 10;
}

.note::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 6px;
    background-color: #1d4ed8;
    opacity: 0.8;
    z-index: 10;
}

.note-content {
    position: absolute;
    top: 15%;
    left: 10%;
    width: 80%;
    height: 70%;
    background: repeating-linear-gradient(transparent,
            transparent 3px,
            #aaa 3px,
            #aaa 4px);
    opacity: 0.4;
}

.note-image {
    position: absolute;
    top: 32%;
    left: 10%;
    width: 80%;
    height: 20%;
    object-fit: contain;
    z-index: 5;
    filter: grayscale(0.2);
}

.note:nth-child(1) {
    grid-column: 3;
}

.note:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

.note:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}

.note:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
}

.note:nth-child(5) {
    grid-column: 4;
    grid-row: 2;
}

.note:nth-child(6) {
    grid-column: 5;
    grid-row: 2;
}

.note:nth-child(7) {
    grid-column: 1;
    grid-row: 3;
}

.note:nth-child(8) {
    grid-column: 2;
    grid-row: 3;
}

.note:nth-child(9) {
    grid-column: 3;
    grid-row: 3;
}

.note:nth-child(10) {
    grid-column: 4;
    grid-row: 3;
}

.note:nth-child(11) {
    grid-column: 5;
    grid-row: 3;
}

.note:nth-child(12) {
    grid-column: 2;
    grid-row: 4;
}

.note:nth-child(13) {
    grid-column: 3;
    grid-row: 4;
}

.note:nth-child(14) {
    grid-column: 4;
    grid-row: 4;
}

/* ── Industrial Lamp ── */
.industrial-lamp {
    position: absolute;
    top: 8%;
    left: 45%;
    width: 10%;
    height: 8px;
    background: #222;
    border-radius: 1px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    z-index: 3;
    transform: translateZ(10px);
}

.industrial-lamp::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 10%;
    width: 80%;
    height: 2px;
    background: #fff;
    box-shadow: 0 0 5px #fff;
    /* Dynamic lamp filament flicker */
    animation: lampFlicker 3s ease-in-out infinite alternate;
}

@keyframes lampFlicker {
    0% {
        box-shadow: 0 0 3px #fff;
        opacity: 0.7;
    }

    30% {
        box-shadow: 0 0 8px #fff, 0 0 15px rgba(255, 255, 255, 0.3);
        opacity: 1;
    }

    60% {
        box-shadow: 0 0 4px #fff;
        opacity: 0.8;
    }

    100% {
        box-shadow: 0 0 10px #fff, 0 0 20px rgba(255, 255, 255, 0.4);
        opacity: 1;
    }
}

.lamp-light-beam {
    position: absolute;
    top: calc(8% + 8px);
    left: 20%;
    width: 60%;
    height: 90%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 60%, transparent 100%);
    clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
    pointer-events: none;
    z-index: 1;
    filter: blur(5px);
    /* Dynamic beam intensity */
    animation: beamPulse 3s ease-in-out infinite alternate;
}

@keyframes beamPulse {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.85;
    }

    100% {
        opacity: 0.6;
    }
}

/* ── Dynamic ambient light on the whole scene ── */
.scene-wrapper::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 160, 255, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: ambientFloat 8s ease-in-out infinite alternate;
}

@keyframes ambientFloat {
    0% {
        transform: translate(-30%, -20%) scale(1);
        opacity: 0.6;
    }

    33% {
        transform: translate(20%, -10%) scale(1.1);
        opacity: 0.9;
    }

    66% {
        transform: translate(-10%, 15%) scale(0.95);
        opacity: 0.7;
    }

    100% {
        transform: translate(25%, 5%) scale(1.05);
        opacity: 0.85;
    }
}

.scene-wrapper::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 200, 150, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: ambientFloat2 10s ease-in-out infinite alternate;
}

@keyframes ambientFloat2 {
    0% {
        transform: translate(30%, 20%) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate(-20%, 10%) scale(1.15);
        opacity: 0.8;
    }

    100% {
        transform: translate(15%, -15%) scale(0.9);
        opacity: 0.6;
    }
}

/* ── Responsive scaling ── */
@media (max-width: 600px) {
    .scene {
        --cube-size: 180px;
        perspective: 800px;
    }

    .scene-wrapper {
        height: 400px;
    }

    .scene-wrapper::before {
        width: 300px;
        height: 300px;
    }

    .scene-wrapper::after {
        width: 250px;
        height: 250px;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .scene {
        --cube-size: 240px;
        perspective: 1000px;
    }

    .scene-wrapper {
        height: 500px;
    }
}