/* ============================================================
   BLUEPRINT TO BUILD — scroll-driven landing animation
   Adapted from the Pinnacle Ridge design package.
   The animation lives inside .hero-blueprint (a 600vh-tall section).
   The .stage uses position:sticky so it scrolls past cleanly
   into the rest of the site below.
   ============================================================ */

/* Local design tokens for the blueprint hero only */
.hero-blueprint{
  --neon: #39ff8a;
  --neon-dim: #1aa85a;
  --neon-faint: rgba(57,255,138,.18);
  --grid: rgba(57,255,138,.10);
  --bp-bg: #000;
  --ink: #cfffe3;
}

/* Wrapper section — tall enough to drive the full animation */
.hero-blueprint{
  position: relative;
  min-height: 600vh;
  background: #000;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--ink);
}

/* The animation stage sticks to the viewport while scrolling through .hero-blueprint */
.hero-blueprint .stage{
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #000;
  perspective: 1400px;
  perspective-origin: 50% 55%;
}

/* faint blueprint grid behind everything */
.hero-blueprint .bg-grid{
  position: absolute; inset: -10%;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(rgba(57,255,138,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,138,.04) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  transform: translateZ(-200px);
  opacity: 0;
  transition: opacity .4s ease;
}

.hero-blueprint .vignette{
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.85) 100%);
  z-index: 40;
}

.hero-blueprint .scan{
  position: absolute; inset: 0; pointer-events: none; z-index: 41;
  background-image: repeating-linear-gradient(
    0deg, rgba(57,255,138,.025) 0 1px, transparent 1px 3px
  );
  mix-blend-mode: screen;
  opacity: .6;
}

/* HUD chrome and any in-drawing labels are hidden — clean landing look */
.hero-blueprint .hud,
.hero-blueprint .prompt,
.hero-blueprint .stamp,
.hero-blueprint #titleblock,
.hero-blueprint #dims,
.hero-blueprint #callouts,
.hero-blueprint #origin {
  display: none !important;
}

/* The 3D world that holds the wireframe plate */
.hero-blueprint .world{
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translate(-50%,-50%);
  will-change: transform;
}

.hero-blueprint .plate{
  position: absolute;
  left: -450px; top: -300px;
  width: 900px; height: 600px;
  transform-style: preserve-3d;
  z-index: 31;
}
.hero-blueprint .plate svg{ width: 100%; height: 100%; overflow: visible; display: block }

/* Draw-on stroke styles. Per-line filters are too costly; only thick outlines glow. */
.hero-blueprint .ln{
  fill: none;
  stroke: var(--neon);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}
.hero-blueprint .ln.thick{ stroke-width: 2 }
.hero-blueprint .ln.thin{ stroke-width: 0.8; opacity: .65 }
.hero-blueprint .ln.dash{ stroke-dasharray: 6 6; stroke-dashoffset: 0 }

.hero-blueprint #L_deckOutline,
.hero-blueprint #L_house,
.hero-blueprint #L_step1,
.hero-blueprint #L_step2 {
  filter: url(#neon-glow);
}

.hero-blueprint .label{
  fill: var(--neon);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .3s ease;
}
.hero-blueprint .label.dim{ fill: var(--neon-dim) }
.hero-blueprint .dot{ fill: var(--neon) }

/* Vertical riser lines (3D extrusion) — disabled in current animation */
.hero-blueprint .riser{
  position: absolute; left: 0; top: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.hero-blueprint .riser-line{
  position: absolute;
  width: 1.5px;
  background: linear-gradient(180deg, rgba(57,255,138,0), rgba(57,255,138,1));
  transform-origin: left bottom;
  pointer-events: none;
  will-change: transform;
}

/* Photo layer — the finished deck reveal */
.hero-blueprint .photo-layer{
  position: absolute; inset: 0; z-index: 30;
  opacity: 1;
  overflow: hidden;
  pointer-events: none;
}
.hero-blueprint .photo-layer .ph-wrap{
  position: absolute; inset: 0;
  transform: scale(1.05);
  will-change: transform;
}
.hero-blueprint .photo-layer img{
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  will-change: opacity;
}

/* Morph SVG — disabled in final design (lines should not appear over the photo) */
.hero-blueprint .morph-svg{
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 32;
  opacity: 0;
  display: none;
  will-change: opacity;
  overflow: visible;
}

/* Neon scan-line that sweeps during materialization */
.hero-blueprint .scan-pass{
  position: absolute; left: 0; right: 0;
  height: 140px; top: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(57,255,138,0) 40%,
    rgba(57,255,138,.55) 50%,
    rgba(57,255,138,0) 60%,
    transparent 100%);
  mix-blend-mode: screen;
  transform: translateY(-200%);
  pointer-events: none;
}

/* Crosshair (visible briefly during the SURVEY phase) */
.hero-blueprint .hud .crosshair{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 220px; height: 220px;
  color: var(--neon-faint);
  opacity: 0;
  transition: opacity .4s ease;
}
.hero-blueprint .hud .crosshair svg{ width: 100%; height: 100% }

/* Endcard — the "West Coast Craftsmanship at its Pinnacle" reveal */
.hero-blueprint .endcard{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  z-index: 36;
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  text-shadow: 0 2px 24px rgba(0,0,0,.85), 0 0 60px rgba(0,0,0,.6);
}
.hero-blueprint .endcard .name{
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(56px, 8.5vw, 128px);
  letter-spacing: -.01em;
  font-weight: 600;
  line-height: 1.02;
  color: #fff;
}
.hero-blueprint .endcard .meta{
  font-size: clamp(14px, 1.2vw, 20px);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  margin-top: 28px;
  font-family: "JetBrains Mono", monospace;
}
.hero-blueprint .endcard .rule{
  width: 96px; height: 1px;
  background: rgba(255,255,255,.6);
  margin: 32px auto 0;
}

/* ===== Static hero (deck photo + centered title overlay) ===== */
.hero-static{
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #000;
}
.hero-static > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero-static .hero-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 88px 24px 0;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.85), 0 0 60px rgba(0,0,0,.6);
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 35%, transparent 65%, rgba(0,0,0,.35) 100%);
}
.hero-static .hero-title{
  font-family: "Montserrat", "Space Grotesk", sans-serif;
  font-size: clamp(40px, 6.5vw, 96px);
  letter-spacing: -.01em;
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
  margin: 0;
}
.hero-static .hero-meta{
  font-size: clamp(13px, 1.2vw, 20px);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  margin-top: 28px;
  font-family: "JetBrains Mono", monospace;
}
.hero-static .hero-rule{
  width: 96px;
  height: 1px;
  background: rgba(255,255,255,.6);
  margin: 32px auto 0;
}
.hero-static .hero-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  padding: 16px 36px;
  background: rgba(255,255,255,.95);
  color: #1a3a1f;
  border-radius: 50px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: .02em;
  text-decoration: none;
  text-shadow: none;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.hero-static .hero-cta:hover{
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
}
@media (max-width: 540px){
  .hero-static .hero-cta{ padding: 14px 28px }
}

/* Site-wide top navbar (replaces the existing one). Always white & fixed. */
.site-navbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 88px;
  background: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 56px);
  font-family: "Space Grotesk", sans-serif;
  overflow: visible; /* let an oversized logo extend slightly past the header */
}
.site-navbar .brand{
  display: flex; align-items: center;
  text-decoration: none;
  position: relative;
}
.site-navbar .brand img{
  display: block;
  height: 100px; width: auto;
}
.site-navbar nav{
  display: flex; align-items: center;
  gap: clamp(16px, 3vw, 36px);
}
.site-navbar nav a{
  color: #1a1a1a;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  transition: color .2s ease;
}
.site-navbar nav a:hover{ color: #2e7d32 }
.site-navbar .cta{
  background: #1a3a1f;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  transition: background .2s ease;
}
.site-navbar .cta:hover{ background: #2e7d32; color: #fff }
/* Hamburger button — hidden on desktop */
.site-navbar .nav-hamburger{
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.site-navbar .nav-hamburger span{
  display: block;
  width: 26px;
  height: 2px;
  background: #1a1a1a;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.site-navbar.menu-open .nav-hamburger span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.site-navbar.menu-open .nav-hamburger span:nth-child(2){
  opacity: 0;
}
.site-navbar.menu-open .nav-hamburger span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 720px){
  .site-navbar{ height: 72px; padding: 0 20px; }
  .site-navbar .brand img{ height: 80px }
  .site-navbar nav{
    position: fixed;
    top: 72px; left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 0;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .2s ease;
  }
  .site-navbar.menu-open nav{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .site-navbar nav a{
    padding: 14px 24px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .site-navbar nav a:last-child{ border-bottom: none }
  .site-navbar nav .cta{
    margin: 12px 24px 4px;
    text-align: center;
    border-radius: 6px;
    border-bottom: none;
  }
  .site-navbar .nav-hamburger{ display: flex }
}