/* ========================================================================== LOADING SCREEN — DIGART Studio Pattern: Loading Screen Referencia documental: project/10-HOME-BLUEPRINT.md (1. Pantalla de carga) project/11-HOME-WIREFRAME.md (1. Pantalla de carga) project/12-HOME-MOCKUP.md (3.1 Pantalla de carga) project/13-UI-DESIGN-SYSTEM.md (4.2 Contenedores, Capítulo 9 Estados, Capítulo 10 Motion, Capítulo 11 Responsive) Este archivo consume exclusivamente los Design Tokens (tokens.css) y la infraestructura de Layout (layout.css, .l-full-width). No declara valores independientes de color, tipografía, espaciado, borde, sombra, tiempo ni punto de quiebre. Segunda implementación (Implementación visual, D-015): composición, jerarquía, alineación, espaciado, tratamiento del área de montaje del logotipo, tratamiento de fondo, indicador de progreso y transición de salida. Ajuste posterior: el logotipo oficial ya está montado (loading-screen.php) y `.loading-screen__logo` resuelve su tamaño y proporción (3, Elements); el color de acento consume `--color-error`. Incluye una única regla acotada al Header compartido (7, "Home — Header oculto durante el preloader"), condicionada por la clase "home--loading" que loading-screen.js retira del al completar el ciclo, y las reglas de "preloader visto en la sesión" (7, tras esa misma sección), condicionadas por "home--preloader-seen" en (script bloqueante en el de public/index.php, sessionStorage); no incluye JavaScript propio ni más reglas Responsive. ========================================================================== */ /* -------------------------------------------------------------------- 1. Root .loading-screen combina la clase .l-full-width (layout.css) con las propiedades propias del Pattern: altura de viewport completa y fondo limpio y minimalista (Mockup 3.1, Dirección de arte). -------------------------------------------------------------------- */ .loading-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: var(--color-background-inverse); } /* -------------------------------------------------------------------- 2. Container .loading-screen__container agrupa y centra el logotipo, el indicador de progreso y el mensaje de carga (Wireframe 1, Distribución). -------------------------------------------------------------------- */ .loading-screen__container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-8); text-align: center; } /* -------------------------------------------------------------------- 3. Elements -------------------------------------------------------------------- */ /* Área de montaje del logotipo oficial de DIGART Studio: reserva la proporción y el punto focal descritos en el Wireframe (1, "Esquema espacial", "Distribución") mediante Design Tokens de espaciado y ejecuta el movimiento de Aparición (Blueprint 1, Elementos; 13-UI-DESIGN-SYSTEM.md 10.2). Sin marca, color ni recurso propio: el logotipo definitivo (SVG/imagen) queda fuera del alcance de esta implementación. */ .loading-screen__logo { width: min(calc(var(--space-8) * 8), 80vw); height: auto; animation: loading-screen-logo-reveal var(--motion-duration-slow) var(--motion-easing-emphasized) both; } /* La imagen ocupa el 100% del ancho del área de montaje y conserva su proporción intrínseca (height: auto); reset.css solo limita el ancho máximo (max-width: 100%) y no escala la imagen para llenar un contenedor mayor a su tamaño intrínseco. Regla acotada a este Pattern: no afecta al logotipo del Header ni al del Footer. */ .loading-screen__logo img { display: block; width: 100%; height: auto; } /* Área de montaje del indicador de progreso: comunica el estado de proceso Loading (Cap. 9) mediante el tipo de movimiento oficial Carga (10.2), reforzado por los atributos role="progressbar" y aria-label ya declarados en el Pattern (Cap. 9.6, refuerzo multicanal). El color de marca se consume únicamente como acento (Mockup 3.1, Paleta cromática). */ .loading-screen__progress { width: var(--space-3); height: var(--space-3); border-radius: var(--border-radius-full); background-color: var(--color-error); animation: loading-screen-progress-pulse var(--motion-duration-slow) var(--motion-easing-standard) infinite alternate; } .loading-screen__message { font-family: var(--font-family-primary); font-size: var(--font-size-body-small); font-weight: var(--font-weight-regular); line-height: var(--line-height-body); color: var(--color-text-inverse); } /* -------------------------------------------------------------------- 4. Variants El Pattern no define variantes en el Blueprint, Wireframe ni Mockup oficiales de la Home; sección reservada sin reglas. -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- 5. States Estado base (Default) representado por las reglas de Root, Container y Elements. El estado de proceso Success (Cap. 9) queda representado por .loading-screen--success (6, Motion Hooks), aplicado por loading-screen.js al finalizar la carga. Loading queda representado de forma continua por .loading-screen__progress (3, Elements); Error no aplica a este Pattern (Blueprint 1: sin interacción del usuario ni posibilidad de fallo propio). -------------------------------------------------------------------- */ /* Excepción: .loading-screen ya declara display: flex de forma incondicional en Root, por lo que el atributo nativo [hidden] requiere esta única regla para conservar su efecto (el origen Autor prevalece sobre la hoja de estilos por defecto del User Agent) mientras el módulo loading-screen.js controla el ocultamiento final del Pattern. */ .loading-screen[hidden] { display: none; } /* -------------------------------------------------------------------- 6. Motion Hooks Resuelve la Desaparición del Pattern (Sistema de Motion, Cap. 10) mediante el estado .loading-screen--success aplicado por loading-screen.js antes del ocultamiento final (Blueprint 1, Transición): la transición de opacidad ya declarada en Root conduce la salida de forma continua, sin cortes bruscos, hacia el DIGART Reel. -------------------------------------------------------------------- */ .loading-screen { transition: opacity var(--motion-duration-slow) var(--motion-easing-standard); } .loading-screen--success { opacity: 0; } @keyframes loading-screen-logo-reveal { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes loading-screen-progress-pulse { from { opacity: 0.3; } to { opacity: 1; } } /* -------------------------------------------------------------------- 7. Home — Header oculto durante el preloader El Header es un Componente global compartido (header.php/header.js/ header.css) y no se modifica: esta regla vive exclusivamente aquí, acotada por "home--loading", clase inicial exclusiva de la Home (declarada solo en el de public/index.php; ninguna otra página la declara ni carga este archivo). Mientras el preloader permanece visible, el Header queda oculto e inaccesible (visibility + pointer- events, no solo opacity, para excluirlo también del foco por teclado); loading-screen.js retira la clase justo antes de emitir "loadingscreen:complete" (6, Motion Hooks), devolviendo el Header a su estado transparente/sticky habitual sin transición propia. -------------------------------------------------------------------- */ body.home--loading .header { opacity: 0; visibility: hidden; pointer-events: none; } /* Preloader ya visto en esta sesión (sessionStorage, script bloqueante en el de public/index.php): "home--preloader-seen" llega ya presente en antes del primer pintado, ocultando el preloader sin destello (loading-screen.js retira "hidden" del ciclo normal, no aplica aquí) y anulando exclusivamente el ocultamiento temporal del Header asociado a "home--loading" (arriba), sin tocar ningún otro efecto de esa clase. Selector deliberadamente más específico que la regla que anula (incluye "html.home--preloader-seen" además de "body.home--loading"): el resultado no depende del orden de declaración dentro del archivo. */ html.home--preloader-seen .loading-screen { display: none; } html.home--preloader-seen body.home--loading .header { opacity: 1; visibility: visible; pointer-events: auto; } /* -------------------------------------------------------------------- 8. Responsive Sección reservada del Sistema Responsive (Cap. 11); el ancho del logotipo ya resuelve su propia adaptación mediante min() (3, Elements), sin necesidad de un breakpoint dedicado. -------------------------------------------------------------------- */