/* ============================================================
   Hero Transition — Stage 2: Blueprint Sequence
   Full-screen overlay shown when the Hero's "Explore Our Portfolio"
   CTA is clicked. Purely presentational; all sequencing lives in
   hero-transition.js (GSAP timeline).
   ============================================================ */

.hero-transition-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy);
  opacity:0; pointer-events:none;
  overflow:hidden;
}
.hero-transition-overlay.ht-active{ pointer-events:auto; }

/* Burgundy radial glow — blooms first, out of the dark */
.ht-glow{
  position:absolute; inset:-20%;
  background:radial-gradient(circle at 50% 45%, rgba(138,44,70,0.55) 0%, rgba(95,22,42,0.28) 32%, rgba(23,18,15,0) 68%);
  opacity:0; transform:scale(0.85);
  will-change:opacity, transform;
}

/* Dark architectural workspace — subtle drafting-table gradient + vignette */
.ht-workspace{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(155deg, rgba(33,26,22,0.9) 0%, rgba(17,13,11,0.98) 55%, rgba(10,8,7,1) 100%);
  opacity:0;
}

/* Blueprint grid — faint drafting-paper lines */
.ht-grid{
  position:absolute; inset:0; z-index:1; opacity:0;
  background-image:
    linear-gradient(rgba(246,241,231,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,241,231,0.07) 1px, transparent 1px),
    linear-gradient(rgba(217,140,163,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,140,163,0.14) 1px, transparent 1px);
  background-size:28px 28px, 28px 28px, 140px 140px, 140px 140px;
  background-position:center;
  transform:scale(1.04);
}

/* Stage — houses the silhouette + blueprint labels, centered */
/* ============================================================
   Stage 3 — Blueprint-to-Reality
   The real Featured Project photo, revealed underneath the
   blueprint once its line-drawing finishes.
   ============================================================ */
.ht-reveal{
  position:absolute; inset:0; z-index:1;
  opacity:0; overflow:hidden;
  will-change:transform;
}
.ht-reveal-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform:scale(1.12);
  filter:brightness(0.7) saturate(1.05) blur(6px);
  will-change:transform, filter;
}
/* Warm lighting — a soft amber wash so the photo feels lit rather
   than just "faded in", plus a dark vignette to keep focus centered */
.ht-reveal-shade{
  position:absolute; inset:0; opacity:0;
  background:
    radial-gradient(circle at 50% 42%, rgba(217,140,163,0.16) 0%, rgba(95,22,42,0) 45%),
    linear-gradient(180deg, rgba(23,18,15,0.15) 0%, rgba(23,18,15,0) 30%, rgba(23,18,15,0.1) 60%, rgba(23,18,15,0.65) 100%),
    linear-gradient(35deg, rgba(230,175,120,0.14) 0%, rgba(230,175,120,0) 55%);
  mix-blend-mode:soft-light;
}
/* Reflection sweep — a single diagonal streak of light passing over
   the photo once, like light catching glass or a polished surface */
.ht-reflection{
  position:absolute; top:-20%; left:-35%; width:35%; height:140%;
  background:linear-gradient(75deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.16) 45%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.16) 55%, rgba(255,255,255,0) 100%);
  transform:skewX(-18deg) translateX(0);
  mix-blend-mode:screen;
  pointer-events:none;
}
/* Gentle atmospheric particles — dust/light motes drifting upward.
   Populated at runtime (see hero-transition.js); styling only here. */
.ht-particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.ht-particle{
  position:absolute; bottom:-4%;
  width:3px; height:3px; border-radius:50%;
  background:rgba(246,241,231,0.65);
  box-shadow:0 0 6px 1px rgba(246,241,231,0.35);
  opacity:0;
}

.ht-stage{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:22px;
  padding:24px; max-width:min(640px, 82vw);
}
.ht-silhouette{
  width:min(560px, 74vw); height:auto; overflow:visible;
}
.ht-silhouette path{
  fill:none;
  stroke:var(--gold-light);
  stroke-width:1.6;
  stroke-linejoin:round;
  stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(217,140,163,0.35));
}

.ht-labels{
  text-align:center; opacity:0; transform:translateY(10px);
}
.ht-kicker{
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--gold-light); font-size:11.5px; font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase; margin-bottom:10px;
}
.ht-kicker .dash{ width:22px; height:1px; background:var(--gold-light); display:inline-block; }
.ht-title{
  font-family:'Fraunces', serif; font-weight:600; color:#fff;
  font-size:clamp(24px, 3.4vw, 34px); line-height:1.15; margin-bottom:6px;
}
.ht-location{ color:rgba(246,241,231,0.6); font-size:13.5px; }

/* Skip control — quietly available, never demands attention */
.ht-skip{
  position:absolute; right:24px; bottom:24px; z-index:3;
  background:transparent; border:1px solid rgba(246,241,231,0.28);
  color:rgba(246,241,231,0.75); border-radius:999px;
  padding:9px 18px; font-size:12.5px; font-weight:600; letter-spacing:0.02em;
  cursor:pointer; opacity:0; transition:all .2s ease;
}
.ht-skip:hover{ border-color:var(--gold-light); color:#fff; }

@media (max-width:640px){
  .ht-skip{ right:16px; bottom:16px; padding:8px 16px; }
}