/*
  The scroll-driven hero (templates/partials/hero_stage.html, static/js/hero.js).

  Two modes, chosen in <head>:
    default            no script, or reduced motion: the finished photo with the
                       logo on the TV, then the headline and the buttons, in order.
    html.hs-motion     the section is tall, .hs-pin sticks to the viewport and the
                       script scrubs the layers from the scroll position.

  Only transform and opacity ever change while scrolling. The stage is laid out
  once at the photo's own size (1280x960) and moved and scaled as a whole, so the
  TV's perspective box (a matrix3d from apps/core/hero.py) always lands on the TV.
*/

.hs { position: relative; background: var(--ground); }

/* ── the static layout: no script, or reduced motion ─────────────────────────
   The headline and the buttons come FIRST (a phone's first screen shows the
   call to action), then the finished room with the logo on its TV. On a wide
   screen they sit side by side. */
.hs-pin {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "bar" "view"; align-items: start;
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}
.hs-intro { grid-area: intro; }
.hs-bar { grid-area: bar; }
.hs-view {
  grid-area: view; position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  /* never taller than most of a screen, but always exactly 4:3 so the TV's clip-path lines up */
  max-width: calc(82svh * 4 / 3); margin-inline: auto; margin-top: 1rem;
}
.hs-stage { position: absolute; inset: 0; }
.hs-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hs-tv, .hs-sketch-clip, .hs-scrim, .hs-hint { display: none; }
/* the last frame's logo is only for the scrubbed mode, but its alt text ("OVK Construction")
   stays available to screen readers in the static one */
.hs-flat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the screen, flat: the TV's outline as a clip-path, the logo inside its bounding box */
.hs-tv-flat { position: absolute; inset: 0; background: var(--logo-ground); clip-path: var(--tv-clip); }
.hs-tv-flat picture, .hs-tv-flat img { display: block; width: 100%; height: 100%; }
.hs-tv-flat img { object-fit: contain; }

.hs-intro { padding: 2.5rem var(--pad) 1rem; max-width: 62rem; }
.hs-eyebrow { margin-bottom: 1.5rem; }
.hs-title { font-size: clamp(2.8rem, 6.6vw, 6.2rem); line-height: .98; }
.hs-lead { margin-top: 1.5rem; max-width: 34rem; color: var(--muted); font-size: 1.125rem; line-height: 1.55; }
.hs-areas { margin-top: 1.1rem; max-width: 40rem; line-height: 1.8; }
.hs-bar { padding: 0 var(--pad) 1.5rem; }
.hs-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

@media (min-width: 960px) {
  .hs-pin {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: 1fr auto;
    grid-template-areas: "intro view" "bar view"; column-gap: clamp(1rem, 3vw, 3rem);
    padding: clamp(1rem, 3vw, 2.5rem) var(--pad) clamp(2rem, 4vw, 3.5rem);
  }
  .hs-intro { align-self: end; padding-left: 0; padding-right: 0; }
  .hs-bar { align-self: start; padding-left: 0; padding-right: 0; }
  .hs-view { align-self: center; margin-top: 0; margin-inline: 0; max-width: none; }
}

/* ── scrubbed mode ─────────────────────────────────────────────────────── */
.hs-motion .hs {
  height: 340vh;
  /* the header sits over the top of the stage, so the first screen is all picture */
  margin-top: calc(-1 * var(--nav-h, 5.75rem));
}
/* the pin is exactly the window inside the gold bezel (--frame, site.css): it sticks at the
   bezel's inner edge and is as tall as what is left, so neither the picture nor the buttons
   ever slide under the gold border (a gold button would merge into it) */
.hs-motion .hs-pin {
  display: block; position: sticky; top: var(--frame, 0px); overflow: hidden; padding: 0;
  height: calc(100vh - 2 * var(--frame, 0px)); height: calc(100svh - 2 * var(--frame, 0px));
}
.hs-motion .hs-view { position: absolute; inset: 0; aspect-ratio: auto; max-width: none; margin: 0; width: auto; height: 100%; }
.hs-motion .hs:not([data-ready]) .hs-stage { visibility: hidden; }

.hs-motion .hs-stage {
  inset: auto; left: 0; top: 0; width: 1280px; height: 960px;
  transform-origin: 0 0; will-change: transform;
  background: var(--ground);
}
.hs-motion .hs-photo { opacity: 0; }
.hs-motion .hs-tv-flat { display: none; }

/* the screen in perspective: a 16:9 box warped onto the TV's four corners */
.hs-motion .hs-tv {
  display: block; position: absolute; left: 0; top: 0;
  width: var(--box-w); height: var(--box-h);
  transform-origin: 0 0; transform: var(--tv-matrix);
  background: var(--logo-ground); opacity: 0; will-change: opacity;
  box-shadow: 0 0 70px 24px color-mix(in srgb, var(--accent) 22%, transparent),
              inset 0 0 120px color-mix(in srgb, var(--accent) 12%, transparent);
}
.hs-motion .hs-tv picture, .hs-motion .hs-tv img { display: block; width: 100%; height: 100%; }
.hs-motion .hs-tv img { object-fit: contain; }

/* the sketch is "drawn" by a wipe made of two opposite translations: transform only */
.hs-motion .hs-sketch-clip { display: block; position: absolute; inset: 0; overflow: hidden; will-change: transform, opacity; pointer-events: none; }
.hs-motion .hs-sketch-clip picture { display: block; position: absolute; inset: 0; }
.hs-motion .hs-sketch { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }

.hs-motion .hs-scrim {
  display: block; position: absolute; inset: 0; pointer-events: none; will-change: opacity;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ground) 92%, transparent) 0, transparent 22%),
    linear-gradient(90deg, color-mix(in srgb, var(--ground) 88%, transparent) 0, color-mix(in srgb, var(--ground) 50%, transparent) 42%, transparent 72%);
}

/* the last frame: the logo at its own resolution on the screen's navy */
.hs-motion .hs-flat {
  display: flex; align-items: center; justify-content: center;
  position: absolute; inset: 0; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  background: var(--logo-ground);
  opacity: 0; pointer-events: none; will-change: opacity;
}
.hs-motion .hs-flat picture { display: block; width: min(94vw, 1400px); }
.hs-motion .hs-flat img { display: block; width: 100%; height: auto; }

.hs-motion .hs-intro {
  position: absolute; left: 0; bottom: clamp(7rem, 24vh, 15rem); z-index: 4; padding: 0 var(--pad);
  will-change: opacity;
}
.hs-motion .hs-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 3rem var(--pad) calc(1.25rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ground) 82%, transparent));
}
.hs-motion .hs-hint { display: inline-flex; align-items: center; gap: .75rem; will-change: opacity; }
.hs-hint-line { display: inline-block; width: 2.5rem; height: 1px; background: currentColor; transform-origin: 0 50%; animation: hs-hint 2.2s ease-in-out infinite; }
@keyframes hs-hint { 0%, 100% { transform: scaleX(.35); } 50% { transform: scaleX(1); } }
.hs-ghost { background: color-mix(in srgb, var(--ground) 90%, transparent); }   /* cream text stays 11:1 even over white marble */

@media (max-width: 640px) {
  .hs-motion .hs { height: 320vh; }
  .hs-motion .hs-intro { bottom: clamp(9rem, 28vh, 14rem); }
  .hs-motion .hs-bar { flex-direction: column; align-items: stretch; }
  .hs-motion .hs-hint { display: none; }
  .hs-motion .hs-actions .btn { justify-content: center; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .hs-hint-line { animation: none; } }