/* ==========================================================================
   DIGART REEL — DIGART Studio
   Pattern: DIGART Reel

   Referencia documental:
     project/10-HOME-BLUEPRINT.md (2. DIGART Reel)
     project/11-HOME-WIREFRAME.md (2. DIGART Reel)
     project/12-HOME-MOCKUP.md (3.2 DIGART Reel)
     project/13-UI-DESIGN-SYSTEM.md (4.2 Contenedores, Capítulo 9 Estados,
     Capítulo 10 Motion, Capítulo 11 Responsive)
     D-015 (Metodología oficial de implementación de Patterns)

   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, tiempo, easing,
   z-index, sombra ni punto de quiebre.

   Segunda implementación (Implementación visual, D-015): fondo de
   transición del Root, capa de Overlay (Design Tokens Overlay, 3.1) y
   activación del movimiento de Aparición disponible sin coordinación
   adicional de JavaScript. La reproducción de video, sus fuentes
   multimedia y el recurso definitivo del logotipo (SVG/imagen) no forman
   parte del alcance de este archivo: `.digart-reel__logo-reveal` se
   reserva únicamente como capa de montaje, sin marca ni forma propia, a
   la espera del recurso definitivo y de su disparador narrativo exacto
   dentro de la duración real del video. No incluye JavaScript ni reglas
   Responsive específicas.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   .digart-reel combina la clase .l-full-width (layout.css) con las
   propiedades propias del Pattern: altura de viewport completa y
   contexto de posicionamiento para sus capas internas (Wireframe 2,
   "El contenedor de video ocupa la totalidad del viewport"). El fondo de
   transición utiliza el tono inverso de Background: sostiene la capa
   mientras el video carga o no está disponible y continúa siendo
   coherente una vez incorporado el video real, sin competir con él
   (Mockup 3.2, Dirección de arte cinematográfica).
   -------------------------------------------------------------------- */
.digart-reel {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background-color: var(--color-background-inverse);
}

/* --------------------------------------------------------------------
   2. Container
   .digart-reel__container ocupa la totalidad del Root y actúa como
   contexto de posicionamiento de las capas internas (video, overlay,
   revelación del logotipo), conforme a la composición de capa única
   descrita en el Wireframe (2, "Distribución").
   -------------------------------------------------------------------- */
.digart-reel__container {
  position: absolute;
  inset: 0;
}

/* --------------------------------------------------------------------
   3. Elements
   -------------------------------------------------------------------- */

/* Área de montaje del video principal: ocupa la totalidad del
   contenedor. Sin fuente ni reproducción: fuera del alcance de esta
   implementación (Blueprint 2, Wireframe 2). */
.digart-reel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Capa de apoyo a la legibilidad de la revelación del logotipo:
   consume exclusivamente la categoría oficial Overlay (tokens.css, 3.1;
   13-UI-DESIGN-SYSTEM.md 6.7-6.8), derivada de la Escala de Neutros, sin
   declarar color ni opacidad propios. Nivel Default: uso general para
   la superposición sobre foto/video (criterio ya establecido para esta
   categoría). */
.digart-reel__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay-default);
}

/* Área de montaje de la revelación final del logotipo institucional,
   centrada sobre las capas anteriores (Wireframe 2, Jerarquía). En
   reposo permanece invisible (Estados, 5): sin logotipo, sin
   placeholder, sin forma ni color propios, a la espera del recurso
   definitivo (SVG/imagen). */
.digart-reel__logo-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

/* --------------------------------------------------------------------
   4. Variants
   El Pattern no define variantes en el Blueprint, Wireframe ni Mockup
   oficiales de la Home; sección reservada sin reglas.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   5. States
   Sección de carácter narrativo y no interactivo (aria-hidden en el
   marcado); estado base (Default) representado por las reglas de Root
   y Container. .digart-reel__logo-reveal (3, Elements) representa su
   propio estado Default en reposo mediante opacity: 0, a la espera del
   evento narrativo que lo revele (10.3). No aplican estados de
   interacción ni de proceso del Sistema de Estados (Cap. 9); sección
   reservada sin reglas adicionales.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   6. Motion Hooks
   .digart-reel__logo-reveal consume la transición de opacidad ya
   declarada para resolver su Aparición (Sistema de Motion, Cap. 10)
   tan pronto como una implementación futura determine su disparador
   narrativo exacto (el instante de la Revelación dentro de la duración
   real del video, Blueprint 2, Elementos); dicho disparador depende del
   video definitivo y queda fuera del alcance de este archivo.

   La transición de opacidad de .digart-reel permanece preparada sin
   activar: la Desaparición del Pattern hacia el Hero requiere que
   digart-reel.js aplique un estado previo al ocultamiento final (mismo
   mecanismo que loading-screen.js ya aplica mediante
   .loading-screen--success), coordinación de JavaScript fuera del
   alcance de esta implementación visual.
   -------------------------------------------------------------------- */
.digart-reel {
  transition: opacity var(--motion-duration-slow) var(--motion-easing-standard);
}

.digart-reel__logo-reveal {
  transition: opacity var(--motion-duration-slow) var(--motion-easing-standard);
}

/* --------------------------------------------------------------------
   7. Responsive
   Sección reservada del Sistema Responsive (Cap. 11); sin reglas
   específicas todavía.
   -------------------------------------------------------------------- */