/* ============================================================================
   GRAND ARCHITECTS & BUILDERS — showcase.css
   Styles ONLY the scroll-scrubbed image-sequence hero.

   This intentionally does NOT re-theme the page. It reuses the site's existing
   tokens (--gold, --black, --cinzel, --raleway …) from style.css so the hero
   matches the rest of the dark/gold luxury site. Load it AFTER style.css.
   ========================================================================== */

/* ---- The stage --------------------------------------------------------- */
#sequence-stage {
  position: relative;
  background: var(--black);
}

.seq-pin {
  position: relative;
  height: 100vh;
  min-height: 640px;
  width: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--black);
}

[data-seq-canvas] {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--black);
}

/* Soft vignette so HUD text + nav stay legible over bright frames. */
.seq-pin::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0) 22%, rgba(5,5,5,0) 60%, rgba(5,5,5,0.78) 100%);
}

/* ---- Registration / crop marks (thin gold hairlines) ------------------- */
.seq-frame { position: absolute; inset: 38px; pointer-events: none; z-index: 3; }
.seq-frame::before,
.seq-frame::after,
.seq-corner-tr,
.seq-corner-bl {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border: 1px solid var(--gold-line);
}
.seq-frame::before { top: 0;    left: 0;  border-right: 0; border-bottom: 0; }
.seq-frame::after  { bottom: 0; right: 0; border-left: 0;  border-top: 0;    }
.seq-corner-tr     { top: 0;    right: 0; border-left: 0;  border-bottom: 0; }
.seq-corner-bl     { bottom: 0; left: 0;  border-right: 0; border-top: 0;    }

/* ---- Technical read-out (Cinzel + gold, like the brand) ---------------- */
.seq-hud {
  position: absolute;
  z-index: 4;
  font-family: var(--cinzel);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(242,238,230,0.55);
}
/* Pushed below the fixed nav so they never collide with it. */
.seq-hud--tl    { top: 104px; left: 60px; }
.seq-hud--tr    { top: 104px; right: 60px; text-align: right; line-height: 1.9; }
.seq-readout b  { color: var(--gold-lt); font-weight: 700; }

.seq-hud--phase { position: absolute; z-index: 4; left: 60px; bottom: 56px; }
.seq-hud--phase .pid {
  font-family: var(--cinzel);
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.32em;
  color: var(--gold); display: block; margin-bottom: 12px;
}
.seq-hud--phase .pname {
  font-family: var(--cinzel);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.3vw, 1.8rem);
  letter-spacing: 0.02em;
  color: var(--white);
  text-transform: none;
  line-height: 1;
}

/* ---- Headline over the stage ------------------------------------------- */
.seq-title { position: absolute; z-index: 4; right: 60px; bottom: 104px; text-align: right; max-width: 54%; }
.seq-title h2 {
  font-family: var(--cinzel);
  font-weight: 700;
  color: var(--white);
  font-size: clamp(1.6rem, 3.4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.seq-title .accent {
  color: var(--gold);
  font-family: var(--garamond);
  font-style: italic;
  text-transform: none;
  font-weight: 500;
}

/* ---- Scrub indicator --------------------------------------------------- */
.seq-scrub {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 4;
  background: rgba(242,238,230,0.10);
}
.seq-scrub::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--seq-progress, 0) * 100%);
  background: var(--gold);
}

/* ---- Loading overlay --------------------------------------------------- */
.seq-loader {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-content: center; gap: 20px;
  background: var(--black);
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}
.seq-loader.is-ready { opacity: 0; visibility: hidden; }
.seq-loader-label {
  font-family: var(--cinzel); font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(242,238,230,0.5); text-align: center;
}
.seq-loader-track { width: 200px; height: 2px; background: rgba(242,238,230,0.14); overflow: hidden; }
.seq-loader-track [data-seq-progress] {
  display: block; height: 100%; width: 100%; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform 0.2s linear;
}

/* Reduced-motion static fallback. */
.seq-static .seq-pin { height: 78vh; }
.seq-static .seq-scrub, .seq-static .seq-hud--tr { display: none; }

/* ---- Text-reveal primitive (used by reveal.js) ------------------------- */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: block; transform: translateY(110%); will-change: transform; }
.reveal-line.is-in > span { transform: translateY(0); }
.reveal-fade { opacity: 0; transform: translateY(22px); will-change: opacity, transform; }
.reveal-fade.is-in { opacity: 1; transform: none; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 768px) {
  .seq-frame { inset: 16px; }
  .seq-hud--tl { display: none; }            /* avoids colliding with the frame read-out */
  .seq-hud--phase { left: 22px; }
  .seq-hud--tr { right: 22px; top: 88px; text-align: right; }
  .seq-hud--phase { bottom: 30px; }
  .seq-title { left: 22px; right: 22px; bottom: 92px; max-width: none; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-line > span, .reveal-fade { transition: none !important; transform: none !important; opacity: 1 !important; }
}