/* Chooser of the three design options (/). Night ops theme. First screen: title plus a parallax group of the
   three businesses' subjects (dog, judoka, car), each layer at its own speed; then one card per option with a
   screenshot of its first screen. */

.ch-top {
  position: absolute; z-index: 5; inset: 0 0 auto; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
}
.ch-top .note { font: 500 12px/16px var(--mono); color: var(--muted); text-align: right; }

.c-hero { position: relative; isolation: isolate; padding: calc(var(--header-h) + 22px) var(--gutter) 0; max-width: 1400px; margin: 0 auto; }
.c-title h1 { margin: 0; font: 700 clamp(40px, 12.4vw, 92px)/.92 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.c-title h1 span { display: block; color: var(--gold); }
.c-title .lede { margin: 14px 0 0; max-width: 34rem; font-size: 17px; line-height: 26px; color: var(--muted); }
.c-title .lede b { color: var(--ink); font-weight: 500; }

.trio { position: relative; height: clamp(380px, 108vw, 470px); margin-top: 10px; }
.trio::before { /* floor spotlight, slow */
  content: ""; position: absolute; z-index: -2; left: -10%; right: -10%; bottom: 0; height: 60%;
  background: radial-gradient(50% 60% at 50% 88%, rgb(131 146 163 / .32), rgb(131 146 163 / 0) 72%);
  transform: translate3d(0, calc(var(--p, 0) * -30px), 0);
}
.trio-chev { /* slow: gold chevrons behind the judoka */
  position: absolute; z-index: -1; left: 50%; top: 4%; display: grid; gap: 10px;
  transform: translate3d(-50%, calc(var(--p, 0) * -60px), 0);
}
.trio-chev i { display: block; width: clamp(150px, 46vw, 300px); height: clamp(46px, 14vw, 92px); background: var(--gold); clip-path: var(--chevron); }
.trio-chev i:nth-child(2) { opacity: .5; }
.trio-chev i:nth-child(3) { opacity: .22; }
.trio figure { position: absolute; margin: 0; will-change: transform; }
.trio img { width: auto; max-width: none; filter: var(--rim); }
.trio figcaption {
  position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); white-space: nowrap;
  padding: 5px 7px 4px; border-top: 2px solid var(--gold); background: rgb(18 22 28 / .85);
  font: 500 11px/1 var(--mono); text-transform: uppercase; color: var(--gold);
}
.t-judo { z-index: 1; left: 50%; bottom: 0; transform: translate3d(-50%, calc(var(--p, 0) * 40px), 0); }
.t-judo img { height: clamp(330px, 96vw, 420px); -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
.t-dog { z-index: 2; left: -2%; bottom: 0; transform: translate3d(calc(var(--p, 0) * -60px), calc(var(--p, 0) * 90px), 0); }
.t-dog img { height: clamp(250px, 72vw, 330px); }
.t-car { z-index: 3; right: -14%; bottom: 0; transform: translate3d(calc(var(--p, 0) * -140px), calc(var(--p, 0) * 60px), 0); }
.t-car img { width: clamp(230px, 66vw, 340px); height: auto; }

/* ---------- Option cards ---------- */
.cards-sec { max-width: 1240px; margin: 0 auto; padding: 64px var(--gutter) 40px; }
.cards { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; }
.card { display: flex; flex-direction: column; background: var(--hangar-raised); border: 1px solid var(--line); border-top: 3px solid var(--gold); }
.card .shot { display: block; position: relative; aspect-ratio: 8 / 5; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--hangar); }
.card .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card { transition: transform .25s ease, box-shadow .25s ease; }
.card:hover, .card:focus-within { transform: translate3d(0, -4px, 0); box-shadow: 0 14px 28px rgb(0 0 0 / .35); }
.card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px 16px 18px; }
.card h3 { margin: 0; font: 700 32px/1 var(--display); text-transform: uppercase; }
.card p { margin: 0; color: var(--muted); }
.card .meta { font: 500 12px/18px var(--mono); color: var(--muted); }
.card .btn { align-self: flex-start; margin-top: auto; }
.same { margin: 30px 0 0; padding: 16px; border: 1px solid var(--line); background: var(--hangar-raised); }
.same h3 { margin: 0 0 8px; font: 600 22px/26px var(--display); text-transform: uppercase; }
.same ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px 24px; font: 500 13px/20px var(--mono); color: var(--muted); }
.same li::before { content: "› "; color: var(--gold); }

@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .same ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .c-hero {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 32px; align-items: center;
    min-height: 100svh; padding-top: calc(var(--header-h) + 20px); padding-bottom: 20px;
  }
  .c-title h1 { font-size: clamp(56px, 5.6vw, 92px); }
  .trio { height: min(78svh, 720px); margin: 0; }
  .t-judo img { height: min(74svh, 680px); }
  .t-dog img { height: min(52svh, 480px); }
  .t-dog { left: 2%; }
  .t-car { right: -6%; }
  .t-car img { width: min(30vw, 470px); }
  .trio-chev i { width: min(22vw, 320px); height: min(7vw, 100px); }
}