/* ==========================================================================
   MAISON ENTRY — the shared aperture
   One opening for all five houses: the hairline fills, the caption drops,
   the crest advances toward the camera and a soft-edged aperture blooms
   behind it, revealing the hero.

   The curtain's colour lives on .q-loader__veil, and ONLY the veil is
   masked. The crest and the caption sit in a layer above it, so the mark
   is never made see-through and the hero is never glimpsed inside it.

   Load AFTER the maison stylesheet.
   ========================================================================== */

/* the loader is now only a stage; the veil carries the ground */
html.lzbg .q-loader { background: transparent !important; }
.q-loader__veil { position: absolute; inset: 0; z-index: 0; background: var(--curtain, #0A0908); will-change: mask-image; }
.q-loader[data-maison="sagana"] { --curtain: #003428; }
.q-loader[data-maison="qvinto"] { --curtain: #060706; }
.q-loader[data-maison="ameria-riva"] { --curtain: #0B0907; }
.q-loader[data-maison="rudis-sylva"] { --curtain: #06080C; }
.q-loader[data-maison="tayrona-cacao"] { --curtain: #0D0A07; }

/* any legacy wrapper stops being a box: the crest addresses the stage directly */
.q-loader__inner { display: contents; }

/* the mark sits ABOVE the veil, fully painted, and leaves by fading */
.q-loader__mark, .q-loader__crest { margin: 0; display: block; position: relative; z-index: 2; will-change: transform, opacity; backface-visibility: hidden; }
/* --ap-x / --ap-y name the mark's OPTICAL centre inside its own box, so the
   aperture opens from the mark's mass rather than the corner of an
   off-centre drawing */
.q-loader { --ap-x: 50%; --ap-y: 50%; }
.q-loader__crest, .q-loader__mark { --nx: calc(50% - var(--ap-x)); --ny: calc(50% - var(--ap-y)); transform-origin: var(--ap-x) var(--ap-y); }
.q-loader__crest { height: var(--crest-h, clamp(84px, 8.6vh, 122px)); width: auto; opacity: 0; animation: mqMarkIn 900ms cubic-bezier(0.22,1,0.36,1) 60ms forwards; }
/* Sized on VISIBLE INK, not on the PNG canvas: the Sagana and Rudis Sylva
   files carry wide transparent margins (their marks fill 77% and 64% of
   their own height, against 93% for the other three), so matching box
   heights made them read small. Each box height below is set so all five
   marks land within a few px of the same drawn height, and --ap-y names the
   ink's true vertical centre inside the padded canvas. */
.q-loader[data-maison="sagana"] { --crest-h: clamp(100px, 12.4vh, 164px); --ap-y: 47.6%; }
.q-loader[data-maison="qvinto"] { --crest-h: clamp(82px, 10.1vh, 134px); }
.q-loader[data-maison="ameria-riva"] { --crest-h: clamp(81px, 10vh, 132px); }
.q-loader[data-maison="rudis-sylva"] { --crest-h: clamp(118px, 14.6vh, 192px); --ap-y: 49.3%; }
/* the cacao mark is the one landscape crest and the only solid woodcut, so it
   carries more weight per px; held a touch shorter than the rest */
.q-loader[data-maison="tayrona-cacao"] { --crest-h: clamp(76px, 9.3vh, 124px); --ap-y: 62%; }
@keyframes mqMarkIn { from { opacity: 0; transform: translate(var(--nx), calc(var(--ny) + 10px)); } to { opacity: 1; transform: translate(var(--nx), var(--ny)); } }

/* The maison label and the hairline, centred under the crest. Pinned to both
   edges rather than left:50% + translateX(-50%), so the centring cannot be
   lost when script writes its own transform. */
.q-loader__meta {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 2;
  margin-top: clamp(3.4rem, 7vh, 5.2rem);
  display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
  text-align: center;
  will-change: transform, opacity;
}
.q-loader__bar { flex: 0 0 auto; }
.q-loader__bar i { animation: none; }
.q-loader__caption { opacity: 0; animation: mqCapIn 700ms ease 420ms forwards; text-align: center; }
@keyframes mqCapIn { to { opacity: 1; } }

/* the curtain no longer travels; the aperture replaces the lift */
html.lzbg .q-loader.is-out { transform: none; }
@media (prefers-reduced-motion: reduce) { html.lzbg .q-loader { display: none; } }