@import 'css/base/variables.css';
@import 'css/base/reset.css';
@import 'css/base/layout.css'; /* Unified Grid Layout */
@import 'css/base/typography.css';
@import 'css/components/tooltips.css';
@import 'css/components/panels.css';
@import 'css/components/dossier.css';
@import 'css/components/cinematic.css';
@import 'css/components/editorial.css';
@import 'css/components/tutorial.css';

* {
    box-sizing: border-box;
    font-family: Poppins;
}

/* html position absolute was likely a fix for older layout issues, redundant with grid */
html {
    height: 100%;
    width: 100%;
    scroll-behavior: smooth;
    overscroll-behavior: none; /* Previene pull-to-refresh y bounce indeseado */
}

body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

/* ==========================================================================
   3. Estructura Principal del Sitio
   ========================================================================== */
/* #sitio defined in layout.css */

svg {
    z-index: 20;
    width: 100%;
    height: 100%;
}

#galeria-sala {
    position: relative;
    /* Takes first column of #sitio grid */
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr;
    overflow: hidden;
    height: 100%;
    width: 100%; 
    max-width: var(--gallery-max-width); /* Dynamic width based on height */
}

/* Cursor pointer when in Lobby (not gallery active) */
body:not(.gallery-active) #galeria-sala {
    cursor: pointer;
}

/* --- Contenedor 3D Unificado (Grid Mimético) --- */
#World3D {
    /* Layout: Ocupa todo el espacio y mimetiza el Grid padre */
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr; /* Copia exacta de #galeria-sala */
    width: 100%;
    height: 100%;
    
    /* Propiedades 3D para rotación unificada */
    transform-style: preserve-3d;
    will-change: transform;
    transform-origin: 50% 50% var(--perspective-origin-z, 500px);
    /* Match JS TiltController initial state */
    transform: perspective(var(--perspective, 1000px)) rotateY(-10deg);
    z-index: 10;
    pointer-events: none; /* Permite clicks pasantes si es necesario, los hijos los reactivarán */
    backface-visibility: hidden; /* S-TIER: Forced GPU Layer Promotion */
    transition: transform-origin var(--anim-speed-slow) ease;
}

#World3D.inside {
    transform-origin: 50% 50% 100px;
    transform: perspective(var(--perspective, 1000px)) rotateY(0deg);
}
#World3D.exit {
    transform-origin: 50% 50% var(--perspective-origin-z, 500px); /* Match Lobby Origin for symmetry */
    transform: perspective(var(--perspective, 1000px)) rotateY(10deg); /* Symmetric to -10deg */
}
#World3D > * { pointer-events: auto; } /* Reactivar pointer events en hijos */

/* --- Dolly de Cámara (Movimiento Z / Entrada / Salida) --- */
#CameraDolly {
    /* Layout: Mimetiza al padre (Grid Passthrough) */
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr;
    width: 100%;
    height: 100%;
    
    /* 3D Property & Initial State (Waiting Room View) */
    transform-style: preserve-3d;
    will-change: transform;
    pointer-events: none;
    z-index: 10;
    backface-visibility: hidden; /* S-TIER: Forced GPU Layer Promotion */
    
    /* ESTADO INICIAL (Antes del Click): Alejado y mirando la pared */
    /* Variable defined for consistency with animation start frames */
    --camera-lobby-state: translate3d(22%, 0px, 0px) rotateY(-6deg) scale(0.72);
    transform: var(--camera-lobby-state);
}

/* --- Gimbal de Zoom Interactivo --- */
#ZoomGimbal {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: none;
    /* Removed will-change: transform to prevent the browser from rasterizing the HighResSkin <img> into a flat texture before scaling, which ruined the quality. */
    pointer-events: none;
}

/* --- Elementos Estructurales: Piso y Techo --- */

#techo {
    grid-row: 1 / 2;
    grid-column: 1 / -1;
    background-color: var(--techo);
    contain: strict; /* Performance: Isolated rendering */
}

#piso {
    grid-row: 2 / 3;
    grid-column: 1 / -1;
    background-color: var(--piso);
    contain: strict; /* Performance: Isolated rendering */
}

/* ==========================================================================
   4. UI y Botones de Navegación
   ========================================================================== */
#galeria-sala > nav {
    display: contents; /* Allows children to participate in #galeria-sala grid */
}

/* Global Styles for Gallery Container */
.can-zoom-in {
    cursor: zoom-in !important;
}
.can-zoom-in .botones {
    cursor: zoom-in !important;
}

.is-zoomed-in {
    cursor: zoom-out !important;
}
.is-zoomed-in .botones {
    cursor: zoom-out !important;
}

/* REFINEMENT: Navigation always has priority in the side strips, 
   even if hovering over an artwork. */
#galeria-sala.can-zoom-in .botones {
    pointer-events: auto !important;
}

#sitio {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 50;
    cursor: pointer;
}

.botones {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 50;
    cursor: pointer;
    display: grid;
    touch-action: manipulation;
    opacity: 0;
    transition: opacity var(--anim-speed-normal) ease;
    pointer-events: none; /* Hidden by default */
}

/* Show navigation buttons only after entering gallery */
body.gallery-active .botones {
    opacity: 1;
    pointer-events: auto;
}

/* Force hide in lobby to prevent glitches */
body:not(.gallery-active) .botones {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Force hide during Zoom Detail view */
body.gallery-detail .botones {
    opacity: 0 !important;
    pointer-events: none !important;
}

#back {
    grid-column: 1 / 2;
    grid-row: 1 / -1;
}

#next {
    grid-column: 2 / 3;
    grid-row: 1 / -1;
}

#next:hover>svg,
#back:hover>svg {
    fill: var(--color-text-white);
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
}

#next>svg,
#back>svg {
    position: absolute;
    align-self: center;
    right: 20px;
    width: 50px;
    height: 50px;
}

#back>svg {
    left: 20px;
}

#volver {
    position: absolute;
    top: 20px;
    left: 25px;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 1000;
    height: 50px;
}

#volver>svg {
    width: 100px !important;
}



/* --- Animaciones de Zoom UI --- */
.zoomIn {
    animation: zoom var(--anim-speed-slowish) normal ease-in-out both;
}

.zoomOut {
    animation: zoom var(--anim-speed-slowish) reverse ease-in-out both;
}

@keyframes zoom {
    0% {
        transform: scale(1) perspective(0px);
    }

    100% {
        transform: scale(1.5) perspective(0px);
    }
}


/* --- Animaciones de Rotación --- */
.rotate .svg-icon {
    animation: rotate45 var(--anim-speed-slowish) normal ease-in-out both;
}

.desrotate .svg-icon {
    animation: rotate45 var(--anim-speed-slowish) reverse ease-in-out both;
}

.rotate45 {
    transform: rotateZ(45deg);
}

@keyframes rotate45 {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(45deg);
    }
}

.svg-icon {
    width: 50px;
    fill: var(--color-icon-fill);
    filter: drop-shadow(1px 1px 1px var(--color-shadow-dark));
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--anim-speed-fast), fill var(--anim-speed-fast), transform var(--anim-speed-fast);
}

.svg-icon:hover {
    transform: scale(1.1);
}

.svg-icon:active {
    fill: var(--color-text-white);
    transform: scale(0.95);
}

/* --- Animaciones Generales de Visibilidad --- */
.off {
    animation: onOff 5s reverse ease-in-out both;
}

.on {
    animation: onOff 5s normal ease-in-out both;
}

.reset {
    animation: Reset var(--anim-speed-slowish) normal ease-in-out both;
}

@keyframes onOff {
    0% {
        opacity: 0;
        display: none;
    }

    100% {
        opacity: 1;
    }
}

@keyframes Reset {
    0% {
        opacity: 1;
    }

    25% {
        opacity: 0;
        display: none;
    }

    75% {
        opacity: 0;
        display: none;
    }

    100% {
        opacity: 1;
    }
}


/* ==========================================================================
   7. Pantalla / Lienzo Principal (Canvas) y Movimiento 3D
   ========================================================================== */
#Pantalla {
    position: relative;

    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 1;
    justify-self: center;
    filter: saturate(1.1);
    /* Clean Pantalla - CameraDolly handles position */
    transform: none;
    transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: hidden; /* S-TIER: GPU Sync */
    contain: strict; /* S-TIER: Isolated rendering sub-tree */
}

/* Legacy CSS Animations removed in favor of WAAPI (Utils.animateTo) */

/* --- Movimiento Adelante/Atrás (Efecto de Caminar) --- */
/* Walking Animations now handled by Pantalla.js (walkStep) via WAAPI */

/* ==========================================================================
   8. Personaje (Parallax)
   ========================================================================== */
#persona, .persona-3d {
    position: relative;
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    z-index: 20;
    width: 100%;
    height: 100%;
    filter: blur(7px);
    /* Transform managed by JS (Pantalla.js) */
    transform: translateX(40%) translateY(30%) scale3d(0.55, 0.55, 0.55);
    will-change: transform;
    backface-visibility: hidden; /* S-TIER: GPU Sync */
    pointer-events: none; /* Critical for 3D world */
}

/* #personaEntrada moved to css/components/panels.css for consolidation */

/* breathing animation - applied to the SVG inside */
#persona svg, .persona-3d svg {
    animation: breathing 5s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes breathing {
    0%, 100% { transform: scaleY(1.0); }
    50% { transform: scaleY(1.025); } 
}

.personaMovimiento {
    animation: personaEnMovimiento var(--anim-speed-slow) normal linear both;
}

@keyframes personaEnMovimiento {
    0% {
        transform: translateX(60%) translateY(35%) scale3d(0.8, 0.8, 0.8);
        transform-origin: center;
    }

    100% {
        transform: translateX(-65%) translateY(35%) scale3d(0.8, 0.8, 0.8);
        transform-origin: center;
    }
}

/* Reset Mobile/Tablet Overrides for Main Layout (via .is-not-desktop class from JS) */

.is-not-desktop #sitio {
    /* layout.css handles the grid template */
   justify-items: center;
}

.is-phone #next>svg,
.is-phone #back>svg {
    position: absolute;
    bottom: 20px;
    align-self: flex-end;
    opacity: 0;
}

/* Mobile persona styles removed for unification */

.is-mobile #Pantalla {
    justify-self: center;
    filter: saturate(1.2);
}

/* Interaction Discovery: Cursors */
.can-zoom-in {
    cursor: zoom-in !important;
}

.is-zoomed-in {
    cursor: zoom-out !important;
}

/* Mobile Camera Variables */
/* Mobile overrides for Camera removed - Handled by JS Config now */

/* ==========================================================================
   S-TIER REFINEMENTS: Mobile Zoom Mode
   ========================================================================== */

/**
 * @section Zoom Suppression
 * Hide navigation arrows while in detail mode to maximize focus.
 * Keeping #masInfo (dossier) and #volver (exit) visible as requested.
 */
.gallery-detail #next,
.gallery-detail #back {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity var(--anim-speed-normal) ease, visibility var(--anim-speed-normal) ease;
}