/* index.html on phones, loaded after style.css. Desktop keeps style.css's full-screen layout; under 860px a tall render
   (index.html's head sets html.tall) fills the first screen with the text over it, and a details sheet peeks up from
   below. .copy, .lead, .slot and .about become display: contents, so their pieces are placed on one grid. */

.eyebrow, .facts, .tour-chip, .sheet, .replay-2, .menu-btn, .menu-scrim { display: none; }

@media (max-width: 860px) {
  .hero {
    display: grid;
    grid-template-columns: var(--m) minmax(0, 1fr) var(--m);
    grid-template-rows: 1fr repeat(10, auto);
    position: relative;
    overflow-x: clip;
  }
  .copy, .lead, .slot, .about { display: contents; }
  .lead > *, .about > *, .slot > *, .note { grid-column: 2; position: relative; z-index: 2; }

  .bar { position: absolute; z-index: 6; top: 0; left: 0; right: 0; padding: max(14px, env(safe-area-inset-top)) var(--m) 12px; }

  /* the menu: "Request a quote" already sits under the headline, so the bar keeps the wordmark and a menu button, and
     the nav drops down from the top behind them (menu.js) */
  .bar .wordmark, .menu-btn { position: relative; z-index: 2; }
  .menu-btn {
    display: grid;
    place-content: center;
    gap: 7px;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }
  .menu-btn i { display: block; width: 22px; height: 1.6px; border-radius: 1px; background: currentColor; transition: transform 0.35s var(--ease-out); }
  .menu-open .menu-btn i:first-child { transform: translateY(4.3px) rotate(45deg); }
  .menu-open .menu-btn i:last-child { transform: translateY(-4.3px) rotate(-45deg); }
  .bar nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    padding: calc(max(14px, env(safe-area-inset-top)) + 64px) var(--m) 20px;
    background: var(--ground);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.09), 0 12px 32px rgba(0, 0, 0, 0.45); /* taste-skill-ignore: menu edge over the photo */
    transform: translateY(-102%);
    visibility: hidden;
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.45s;
  }
  .menu-open .bar nav { transform: none; visibility: visible; transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1); }
  .bar nav a {
    padding: 14px 0;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  }
  .bar nav a:first-child { border-top: 0; }
  .menu-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    background: rgba(var(--veil), 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  .menu-open .menu-scrim { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
  .menu-open { overflow: hidden; }

  /* the picture spans the first screen's rows, minus the sheet's peek; the text sits over its bottom */
  .hero .frame { grid-column: 1 / -1; grid-row: 1 / 6; width: 100%; height: calc(100svh - 56px); min-height: 520px; } /* over style.css's .full .frame */
  .scrim {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(rgba(var(--veil), 0.6), rgba(var(--veil), 0) 120px), /* taste-skill-ignore: neutral scrim under the nav */
      linear-gradient(transparent 50%, rgba(var(--veil), 0.78) 74%, rgba(var(--veil), 0.9)); /* taste-skill-ignore: neutral scrim under the copy */
  }

  /* first screen: eyebrow, headline, facts, then the build ticker or the actions in the same spot */
  .eyebrow { grid-row: 2; display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
  h1 { grid-row: 3; font-size: clamp(32px, 9.2vw, 42px); text-shadow: 0 1px 14px rgba(var(--veil), 0.5); }
  .facts { grid-row: 4; display: block; margin-top: 12px; font-size: 15px; color: color-mix(in srgb, var(--ink) 80%, transparent); }
  .facts b { font-size: 17px; font-weight: 600; color: var(--accent); }
  .build, .actions { grid-row: 5; align-self: start; margin: 20px 0 44px; }

  /* the details sheet: it peeks up over the bottom of the picture with its first lines showing */
  .sheet {
    display: block;
    grid-column: 1 / -1;
    grid-row: 6 / -1;
    margin-top: -22px;
    position: relative;
    z-index: 1;
    background: var(--ground);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.09), 0 -12px 32px rgba(0, 0, 0, 0.35); /* taste-skill-ignore: sheet edge over the photo */
  }
  .sheet::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    width: 38px;
    height: 4px;
    margin-left: -19px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--ink) 30%, transparent);
  }
  .sub { grid-row: 6; margin-top: 28px; font-size: 17px; }
  .about h2 { display: none; }
  .about > p:first-of-type { grid-row: 7; margin-top: 20px; font-size: 17px; }
  .specs { grid-row: 8; margin-top: 28px; }
  .hint { grid-row: 9; margin-top: 24px; font-size: 15px; }
  .replay-2 { grid-row: 10; display: block; justify-self: start; margin-top: 20px; font-size: 15px; }
  .note { grid-row: 11; padding: 0; margin: 28px 0 calc(40px + env(safe-area-inset-bottom)); font-size: 14px; }

  /* the sheet invites a scroll during the build, so the details are there from the start; only the actions over the
     picture, the tap hint and "watch again" wait for the finished house */
  #model-blurb, #model-specs { visibility: visible; opacity: 1; transform: none; }
  :root:not([data-state="built"]) .about > .hint,
  :root:not([data-state="built"]) .about > .replay-2 { display: none; }

  /* the build ticker in one line: the current stage, and skip */
  .build { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 16px; }
  .track { grid-column: 1 / -1; max-width: none; }
  .stages { display: block; margin: 0; font-size: 15px; }
  .stages li { display: none; }
  .stages li.now { display: block; }
  .build .textbtn { margin: 0; font-size: 14px; }

  .actions { gap: 12px 14px; }
  .actions .btn { padding: 14px 22px; }
  /* the desktop tour button, sized to sit beside "Request a quote" */
  .tour-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px 4px 4px;
    border: 1px solid color-mix(in srgb, var(--accent) 75%, transparent);
    border-radius: 12px;
    background: rgba(var(--veil), 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.16s var(--ease-out);
  }
  .tour-chip:active { transform: scale(0.97); }
  .tour-chip .tour-thumb { width: 54px; height: 37px; border-radius: 8px; }
  .tour-chip .tour-thumb svg { width: 11px; height: 11px; }
  .tour-chip .tour-txt { gap: 1px; }
  .tour-chip .tour-len { font-size: 12px; }
  #replay, .tour-btn, .tour-sep { display: none; }

  /* ‹ › at the picture's edges, level with the middle of the house (picker.js sets top) */
  .house-switch { left: 0; right: 0; transform: translateY(-50%); justify-content: space-between; padding: 0 2px; pointer-events: none; }
  .house-switch button { width: 44px; height: 72px; pointer-events: auto; }
  .house-switch svg { width: 11px; height: 22px; }
  .hs-name, .hs-count { display: none; }
  .frame { touch-action: pan-y; } /* sideways swipes go to picker.js */

  /* the tour plays full-screen, letterboxed, with one chapter name over the track */
  .frame > .tour-video { position: fixed; inset: 0; z-index: 30; object-fit: contain; background: #000; }
  .tour-ui { position: fixed; z-index: 31; bottom: calc(20px + env(safe-area-inset-bottom)); }
  .tour-chapters { justify-content: center; }
  .tour-chapters button { display: none; }
  .tour-chapters button.now { display: block; }

  /* until render/encode_tall.sh has run: one tall build picture behind the wide build video, which plays hidden
     to drive the stage ticker, easing in while it plays */
  .tall-standin #video { opacity: 0; }
  .tall-standin .frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("media/phone/tall_0319.jpg") center / cover;
  }
  .tall-standin[data-state="building"] .frame::before { animation: settle 8.3s linear both; }
  .tall-standin .still { transition-duration: 0.9s; }
  @keyframes settle { to { transform: scale(1.05); } }
}

/* a phone held upright asks to be turned before the tour, which is wide; turning starts it (picker.js). It sits outside
   the media query because a big phone turned sideways (932 px) crosses into the desktop layout while it's showing. */
.rotate {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 32;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--m) env(safe-area-inset-bottom);
  background: rgba(var(--veil), 0.94);
  color: var(--marker);
  text-align: center;
  touch-action: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.rotate-ask .rotate { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
/* once turned: the prompt fades out over the 0.5 s before the tour starts (picker.js's TURN_SETTLE), then its dark
   ground fades off the playing tour */
.rotate > * { transition: opacity 0.5s ease-in-out; }
.rotate-go .rotate > * { opacity: 0; }
.rotate-go .rotate { transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.rotate-go .tour-video { transition: none; }

.rotate-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 8px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.rotate-close svg { width: 14px; height: 14px; }

/* a phone outline that turns a quarter, holds, then fades and starts again. Two arrows run down its left side and up
   its right, corner to corner, the way it turns, and turn with it; the play mark stays level in the middle */
.rotate-phone {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  color: var(--accent);
}
.rotate-phone::before {
  content: "";
  position: absolute;
  left: 37px;
  top: 20px;
  width: 46px;
  height: 80px;
  border: 2px solid var(--marker);
  border-radius: 10px;
  animation: turn 3.2s var(--ease-out) infinite;
}
.rotate-phone > svg:not(.rotate-arrows) { width: 14px; height: 14px; transform: translateX(1px); }
.rotate-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--marker);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: sweep 3.2s var(--ease-out) infinite;
}
@keyframes turn {
  0% { transform: rotate(0); opacity: 0; }
  6%, 22% { transform: rotate(0); opacity: 1; }
  52%, 84% { transform: rotate(-90deg); opacity: 1; }
  96%, 100% { transform: rotate(-90deg); opacity: 0; }
}
@keyframes sweep {
  0% { transform: rotate(0); opacity: 0; }
  6%, 22% { transform: rotate(0); opacity: 1; }
  52% { transform: rotate(-90deg); opacity: 1; }
  62%, 100% { transform: rotate(-90deg); opacity: 0; }
}
/* held still: the phone upright with the arrows showing which way to turn it */
@media (prefers-reduced-motion: reduce) {
  .rotate-phone::before, .rotate-arrows { animation: none; }
}
.rotate-title { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.rotate-sub { max-width: 30ch; margin-top: 8px; font-size: 15px; line-height: 1.45; color: color-mix(in srgb, var(--marker) 65%, transparent); }
.rotate .textbtn { margin-top: 28px; font-size: 15px; }