/* ═══ GoodWay home · section 1 · GREEN LIGHT ═══════════════════════════════
   A night road under the header: the coupe on the orange lane, the start light
   ahead, the words on the left. The picture is a still (always there) and, when
   the device can, the live scene (Scripts/gw.sec1.js) drawn over it.
   Torque: the section is a graphite place (.tq-dark), the words are the kit's
   eyebrow / display / lead, the search is the kit's size field and button.
   ═════════════════════════════════════════════════════════════════════════ */

.gw-s1 {
  --s1-night: #05070A;
  --s1-h: calc(100svh - var(--tq-header-h) - 40px);
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-block-size: clamp(600px, var(--s1-h), 1040px);
  overflow: hidden;
  background: var(--s1-night);
  color: var(--tq-text-body);
}
@media (max-width: 767px) { .gw-s1 { --s1-h: calc(100svh - var(--tq-header-h)); } }

/* the picture: the still, the live canvas over it, and a scrim that keeps the words readable.
   The still is the live scene's first frame (the red light), and it is cropped exactly as the camera
   crops the scene (object-position = 50% + the framing's lens shift, see rig.js), so when the scene is
   ready its canvas just fades in over the still and nothing on screen moves. */
.gw-s1__stage { position: absolute; inset: 0; z-index: -1; }
.gw-s1__stage picture { display: contents; }
.gw-s1__poster,
.gw-s1__canvas {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.gw-s1__poster { object-fit: cover; object-position: 65% 50%; }
.gw-s1__canvas { opacity: 0; transition: opacity .6s var(--tq-ease-out); }
.gw-s1.is-live .gw-s1__canvas { opacity: 1; }
.gw-s1__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(5 7 10 / .86) 0%, rgb(5 7 10 / .64) 28%, rgb(5 7 10 / .2) 50%, rgb(5 7 10 / 0) 62%),
    linear-gradient(0deg, rgb(5 7 10 / .55) 0%, rgb(5 7 10 / 0) 26%);
}

/* the words */
.gw-s1__body { position: relative; padding-block: clamp(56px, 9vh, 128px); }
.gw-s1__copy { display: grid; gap: var(--tq-sp-8); max-inline-size: 38rem; }
.gw-s1__title { display: grid; gap: var(--tq-sp-5); margin: 0; }
.gw-s1__title .tq-eyebrow { color: var(--tq-text-body); }
.gw-s1__line {
  display: block;
  font-size: clamp(2.7rem, 1.25rem + 4.3vw, 5.4rem);
  line-height: .9;
  text-wrap: balance;
}
.gw-s1__line--2 { color: var(--tq-text-muted); }
.gw-s1__lede { margin: 0; max-inline-size: 31rem; color: var(--tq-text-body); }

/* the search: the kit's size field with a full-size button beside it */
.gw-s1__size { gap: var(--tq-sp-4); }
.gw-s1__row { display: flex; gap: var(--tq-sp-4); align-items: stretch; }
.gw-s1__row .tq-sizefield__box { flex: 1 1 auto; min-inline-size: 0; background: rgb(5 7 10 / .58); border-color: rgb(255 255 255 / .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gw-s1__row .tq-sizefield__mask { color: rgb(255 255 255 / .3); }
/* the hint under the box sits over the picture (and, live, over the smoke): one step brighter than the kit's */
.gw-s1__size .tq-sizefield__read { color: var(--tq-text-muted); }
.gw-s1__go { flex: none; }
.gw-s1__go .tq-i { transition: transform var(--tq-d-fast) var(--tq-ease-out); }
.gw-s1__go:hover .tq-i { transform: translateX(2px); }
@media (max-width: 559px) {
  .gw-s1__row { flex-direction: column; }
  .gw-s1__go { inline-size: 100%; justify-content: center; }
}
.gw-s1__go-long { display: inline; }

/* the read-outs: open now, tires in stock, a quote */
.gw-s1__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tq-sp-4) var(--tq-sp-8); margin: 0; padding: 0; list-style: none; font-size: var(--tq-fs-sm); }
.gw-s1__facts li { display: inline-flex; align-items: center; gap: var(--tq-sp-3); }
.gw-s1__stock b { font-family: var(--tq-font-display); font-size: var(--tq-fs-lg); font-weight: var(--tq-fw-bold); color: var(--tq-text-strong); letter-spacing: .02em; }

/* on green, the lane runs under the size box: Torque's dashes, lit one after another */
.gw-s1__row .tq-sizefield__box::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: repeating-linear-gradient(90deg, var(--tq-brand) 0 18px, transparent 18px 28px);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
}
.gw-s1.is-green .gw-s1__row .tq-sizefield__box::after { opacity: 1; transform: scaleX(1); transition: transform 1.2s steps(14, end), opacity .2s; }

/* a short window (a laptop at 720 px): the whole read-out still fits above the fold */
@media (min-width: 768px) and (max-height: 820px) {
  .gw-s1__body { padding-block: clamp(24px, 4.5vh, 48px); }
  .gw-s1__copy { gap: var(--tq-sp-6); }
  .gw-s1__title { gap: var(--tq-sp-4); }
  .gw-s1__line { font-size: clamp(2.4rem, 0.6rem + 6.4vh, 4.4rem); }
}

/* the words come up once, when the page opens */
@media (prefers-reduced-motion: no-preference) {
  .gw-s1__copy > * { animation: gw-s1-rise .9s var(--tq-ease-out) both; }
  .gw-s1__copy > :nth-child(2) { animation-delay: .08s; }
  .gw-s1__copy > :nth-child(3) { animation-delay: .16s; }
  .gw-s1__copy > :nth-child(4) { animation-delay: .24s; }
  .gw-s1.is-launching .gw-s1__copy { transition: opacity .5s var(--tq-ease), transform .7s var(--tq-ease); opacity: .35; transform: translateY(-6px); }
}
@keyframes gw-s1-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* a phone held upright: the car fills the top, the words sit under it, the search above the fold */
@media (max-aspect-ratio: 4/5) {
  .gw-s1 { align-items: end; }
  .gw-s1__poster { object-position: 50% 30%; }
  .gw-s1__scrim { background: linear-gradient(0deg, rgb(5 7 10 / .94) 0%, rgb(5 7 10 / .82) 38%, rgb(5 7 10 / .2) 62%, rgb(5 7 10 / 0) 72%); }
  .gw-s1__body { padding-block: 26vh var(--tq-sp-7); }
  .gw-s1__copy { gap: var(--tq-sp-6); }
  .gw-s1__title { gap: var(--tq-sp-3); }
  .gw-s1__line { font-size: clamp(2.1rem, 1.1rem + 4.4vw, 3rem); }
  .gw-s1__lede { font-size: var(--tq-fs-md); line-height: 1.5; }
  .gw-s1__size { gap: var(--tq-sp-3); }
  .gw-s1__facts { gap: var(--tq-sp-3) var(--tq-sp-6); }
}
@media (max-aspect-ratio: 4/5) and (max-width: 559px) {
  .gw-s1__row { flex-direction: row; }
  .gw-s1__go { inline-size: auto; padding-inline: var(--tq-sp-6); }
  .gw-s1__go .gw-s1__go-long { display: none; }
}

/* round 29: the shop's own photo behind the words (Dash > Website > Home page). A photo can be white where the
   night road is dark, so the shade under the words is deep all the way to where they end (--s1-end: the container's
   left edge plus the words' 38rem, at any width), then it lifts; the photo shows clear on the right (on a phone held
   upright, at the top). */
.gw-s1--photo .gw-s1__scrim {
  --s1-end: calc(max(0px, (100% - var(--tq-container) - 2 * var(--tq-gutter)) / 2) + var(--tq-gutter) + 38rem);
  background:
    linear-gradient(90deg, rgb(5 7 10 / .9) 0, rgb(5 7 10 / .86) var(--s1-end), rgb(5 7 10 / .35) calc(var(--s1-end) + 16rem), rgb(5 7 10 / .1) calc(var(--s1-end) + 34rem)),
    linear-gradient(0deg, rgb(5 7 10 / .6) 0%, rgb(5 7 10 / 0) 30%);
}
/* held upright, the words sit at the bottom and run as high as they need (a small phone: three quarters of the
   section): the shade is drawn behind them instead, from 26vh above them (the body's top padding) to the bottom */
@media (max-aspect-ratio: 4/5) {
  .gw-s1--photo .gw-s1__scrim { background: linear-gradient(0deg, rgb(5 7 10 / .55) 0%, rgb(5 7 10 / 0) 70%); }
  .gw-s1--photo .gw-s1__body { background: linear-gradient(180deg, rgb(5 7 10 / 0) 0, rgb(5 7 10 / .88) 26vh, rgb(5 7 10 / .9) 100%); }
}

/* round 29: on a phone the action bar (Call · Directions · Quote) is fixed over the bottom of the screen. The night
   road (or the photo) runs on under it, the words end above it: their last line (the open sign, the stock, the quote
   button) is never under the bar */
@media (max-width: 767px) { .gw-s1__body { padding-block-end: calc(clamp(56px, 9vh, 128px) + var(--tq-actionbar-h, 0px) + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 767px) and (max-aspect-ratio: 4/5) { .gw-s1__body { padding-block-end: calc(var(--tq-sp-7) + var(--tq-actionbar-h, 0px) + env(safe-area-inset-bottom, 0px)); } }