/* ============================================================
   QUIMERA — Imagery layer
   Integrates the classical-fragment library into the live site
   per the art-direction recommendation:
     · Direction B (Balanced Hybrid) — the system  → Welcome, Perspective
     · Direction C (Bold Fusion)     — thresholds  → Hero, Closing
     · Direction A (Conservative)    — plates       → Services, Work
   Single chromatic voice stays lavender (--lav-300); fragments are
   desaturated so only the geometry carries colour.
   ============================================================ */

/* A section that hosts imagery: clip the bleed, stack content above it. */
.q-imghost { position: relative; overflow: hidden; }
.q-imghost > .q-container { position: relative; z-index: 3; }

/* Shared dark register spanning Work + Perspective so a single fragment
   can bleed uncropped across both. The wrapper owns the ink background and
   clips; the sections sit transparent above the image layer. */
.q-darkspan { position: relative; background: var(--ink-900); overflow: hidden; }
.q-darkspan > section { position: relative; z-index: 1; background: transparent; }
.q-darkspan > .q-fraglayer { z-index: 0; }

/* ---- fragment layers ---- */
.q-fraglayer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.q-frag {
  position: absolute;
  filter: grayscale(0.5) contrast(1.06) brightness(0.92);
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.q-frag.soft { opacity: 0.5; }
.q-frag.faint { opacity: 0.3; }

/* ---- smoke ---- */
.q-smoke {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: grayscale(1) brightness(1.12);
  opacity: 0.40;
}
@keyframes q-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(18px, -14px, 0) scale(1.045); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
.q-smoke.drift { animation: q-drift 34s ease-in-out infinite; }
.q-smoke.drift.alt { animation-duration: 47s; animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .q-smoke.drift { animation: none; } }

/* ---- vignettes that keep type legible over imagery ---- */
.q-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.q-veil.shell-l   { background: linear-gradient(90deg, var(--bg-shell) 24%, color-mix(in srgb, var(--bg-shell) 55%, transparent) 50%, transparent 80%); }
.q-veil.shell-r   { background: linear-gradient(270deg, var(--bg-shell) 22%, color-mix(in srgb, var(--bg-shell) 50%, transparent) 48%, transparent 78%); }
.q-veil.paper-l   { background: linear-gradient(90deg, var(--bone-50) 30%, color-mix(in srgb, var(--bone-50) 55%, transparent) 56%, transparent 84%); }
.q-veil.ink-r     { background: linear-gradient(270deg, var(--ink-900) 20%, color-mix(in srgb, var(--ink-900) 45%, transparent) 46%, transparent 76%); }
.q-veil.bottom    { background: linear-gradient(0deg, var(--bg-shell) 4%, transparent 36%); }

/* ---- construction geometry (the bridge) ---- */
.q-ring { position: absolute; border: 1px solid var(--lav-300); border-radius: 50%; opacity: 0.26; pointer-events: none; z-index: 2; }
.q-hair { position: absolute; background: var(--lav-300); opacity: 0.4; pointer-events: none; z-index: 2; }
.q-cross { position: absolute; width: 22px; height: 22px; z-index: 2; pointer-events: none; }
.q-cross::before, .q-cross::after { content: ''; position: absolute; background: var(--lav-300); opacity: 0.5; }
.q-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-0.5px); }
.q-cross::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-0.5px); }

/* ---- Direction A: contained specimen plate ---- */
.q-plate { position: relative; display: inline-block; border: 1px solid var(--rule-strong); background: linear-gradient(160deg, rgba(190,186,204,0.05), transparent 62%); padding: 14px; }
.q-plate::before, .q-plate::after { content: ''; position: absolute; width: 12px; height: 12px; border: 1px solid var(--lav-300); }
.q-plate::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.q-plate::after  { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.q-plate img { display: block; width: 100%; filter: grayscale(0.9) contrast(1.06) brightness(0.96); }
.q-plate .cap { display: flex; justify-content: space-between; margin-top: 11px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); }

/* ---- Direction C: closing interstitial ---- */
.q-closing { position: relative; overflow: hidden; background: #08070B; padding: 168px 0; }
.q-closing .q-container { position: relative; z-index: 3; }
.q-closing .stmt {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--bone-50);
  max-width: 16ch;
  text-shadow: 0 2px 60px rgba(8,7,11,0.7);
}
.q-closing .stmt em { font-style: italic; color: var(--lav-300) !important; }
.q-closing .sub { margin-top: 28px; display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-300); }
.q-closing .sub span { white-space: nowrap; }

/* ---- entrance ----
   Fragments are visible by DEFAULT (their .soft/.faint/base opacity applies)
   and animated only by the scroll parallax (imagery.js). No opacity/transform
   entrance gate — a stalled animation can never blank or mis-position an image. */
.q-reveal { }

/* ============================================================
   HERO ART — a large classical fragment behind the headline.
   Default: the face ("seen / understood"). Texture alt via the
   Hero tweak (html[data-hero-art="texture"]) swaps in the slab.
   Layer order: art (0) · ring (1) · veil (2) · q-container (3).
   ============================================================ */
.q-hero { isolation: isolate; }
/* Hidden by default (heroArt="none") — and so there is no flash before the
   Tweak attribute is applied. Shown only when Face or Texture is selected. */
.q-hero-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; display: none; }
html[data-hero-art="face"] .q-hero-art,
html[data-hero-art="texture"] .q-hero-art { display: block; }
.q-hero-art-inner { position: absolute; inset: 0; }
.q-hero-img {
  position: absolute;
  max-width: none;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
/* Face — mirrored and aligned RIGHT, kept FAINT: a presence only intuited
   behind the type, never the protagonist. scaleX(-1) flips it; the parallax
   --py still rides on the same transform. */
.q-hero-art-face .q-hero-img {
  right: -7%;
  top: 4%;
  height: 132%;
  opacity: 0.3;
  filter: grayscale(0.7) contrast(1.05) brightness(0.92);
  transform: scaleX(-1) translate3d(0, var(--py, 0px), 0);
}
/* Texture alternative — the slab as a tall cracked-stone presence, no figure */
.q-hero-art-texture { display: none; }
.q-hero-art-texture .q-hero-img {
  right: -4%;
  top: -10%;
  height: 134%;
  opacity: 0.55;
  filter: grayscale(1) contrast(1.06) brightness(1.05);
}
html[data-hero-art="texture"] .q-hero-art-face { display: none; }
html[data-hero-art="texture"] .q-hero-art-texture { display: block; }

/* Faint construction ring — architectural echo over the fragment */
.q-hero-ring {
  position: absolute;
  right: 9%;
  top: 16%;
  width: 340px;
  height: 340px;
  border: 1px solid var(--lav-300);
  border-radius: 50%;
  opacity: 0.16;
  z-index: 1;
  pointer-events: none;
}
html[data-hero-art="texture"] .q-hero-ring { opacity: 0.22; }

/* Legibility veil — the face now sits RIGHT behind the type, so darken the
   left (headline + lead) and lower-left (CTAs) and leave the right clearer so
   the faint face only whispers through. */
.q-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,8,7,0.85) 0%, rgba(8,8,7,0.5) 30%, rgba(8,8,7,0.1) 66%, rgba(8,8,7,0) 100%),
    radial-gradient(54% 46% at 18% 82%, rgba(8,8,7,0.86), rgba(8,8,7,0) 72%),
    linear-gradient(0deg, rgba(8,8,7,0.9) 0%, rgba(8,8,7,0) 22%);
}
/* In texture mode, a faint lavender atmospheric bloom replaces the figure's drama */
html[data-hero-art="texture"] .q-hero-veil {
  background:
    linear-gradient(90deg, rgba(8,8,7,1) 0%, rgba(8,8,7,0.92) 20%, rgba(8,8,7,0) 52%),
    radial-gradient(60% 56% at 76% 30%, rgba(190,186,204,0.12), rgba(8,8,7,0) 60%),
    radial-gradient(52% 44% at 16% 78%, rgba(8,8,7,0.9), rgba(8,8,7,0) 72%),
    linear-gradient(0deg, rgba(8,8,7,0.96) 0%, rgba(8,8,7,0) 24%);
}