/* PODAS motion layer: the page's own CSS, loaded after the kit. See radar.js. */

/* ---- the pale blue washes behind the light sections, placed along the whole page ---- */
body {
  background-repeat: no-repeat;
  background-image:
    radial-gradient(70% 6% at 88% 11%, #cfe0f3 0%, transparent 72%),
    radial-gradient(62% 5% at 8% 18%, #dbe7f5 0%, transparent 72%),
    radial-gradient(80% 6% at 74% 26%, #c9dbf0 0%, transparent 72%),
    radial-gradient(60% 5% at 12% 33%, #d4e2f3 0%, transparent 72%),
    radial-gradient(76% 6% at 90% 65%, #cddef1 0%, transparent 72%),
    radial-gradient(60% 5% at 8% 72%, #d7e4f4 0%, transparent 72%),
    radial-gradient(72% 5% at 86% 80%, #cfdff2 0%, transparent 72%);
}

/* ---- hero: the detection box on the car, sweeps passing over it ---- */
.hero--photo > .wrap { position: relative; z-index: 1; pointer-events: none; }
.hero--photo .hero__text { pointer-events: auto; }
@media (min-width: 1024px) {
  #top > .hero--photo .hero__text { width: max(460px, calc((100% - 11 * var(--gutter)) * 5 / 12 + 4 * var(--gutter))); }
}
.hs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; padding: 0; --m-cycle: 3.6s; --m-still: 0.46; --hs: #f0a91e; }
.hs > .loop-pause { pointer-events: auto; right: var(--gut, 24px); bottom: 32px; }
.hs__fan { position: absolute; left: calc(var(--ex) - var(--er)); top: calc(var(--ey) - var(--er)); width: calc(2 * var(--er)); height: calc(2 * var(--er)); transform: scaleY(.62); transform-origin: 50% 50%;
           clip-path: polygon(50% 50%, 8% -6%, 92% -6%); }
.hs__wave { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(255 255 255 / .9); box-shadow: 0 0 22px rgb(150 200 255 / .55), inset 0 0 22px rgb(150 200 255 / .3); opacity: 0;
            animation: hs-wave var(--m-cycle) linear infinite; }
.hs__wave:nth-child(2) { animation-delay: calc(var(--m-cycle) * -.3333); }
.hs__wave:nth-child(3) { animation-delay: calc(var(--m-cycle) * -.6667); }
@keyframes hs-wave { 0% { transform: scale(.06); opacity: 0; } 8% { opacity: .85; } 70% { opacity: .5; } 100% { transform: scale(1.3); opacity: 0; } }
.hs__box { position: absolute; left: var(--bx); top: var(--by); width: var(--bw); height: var(--bh); filter: drop-shadow(0 0 6px rgb(0 0 0 / .45)); }
.hs__box > i { position: absolute; width: clamp(18px, 3.2vw, 44px); aspect-ratio: 1; border: 0 solid var(--hs); animation: hs-hit var(--m-cycle) linear infinite; }
.hs__box > i:nth-child(1) { left: 0; top: 0; border-width: 3px 0 0 3px; border-top-left-radius: 8px; }
.hs__box > i:nth-child(2) { right: 0; top: 0; border-width: 3px 3px 0 0; border-top-right-radius: 8px; }
.hs__box > i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 3px 3px; border-bottom-left-radius: 8px; }
.hs__box > i:nth-child(4) { right: 0; bottom: 0; border-width: 0 3px 3px 0; border-bottom-right-radius: 8px; }
@keyframes hs-hit { 0%, 20%, 35%, 53%, 68%, 86%, 100% { opacity: .72; } 13%, 46%, 79% { opacity: 1; } }
.hs__tag { position: absolute; left: var(--bx); top: calc(var(--by) - 46px); display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
           border-radius: 10px; background: #0a1424; color: #eef4fb; font: 500 var(--t-small)/1 var(--font-text); box-shadow: 0 8px 24px -10px rgb(0 0 0 / .6); white-space: nowrap; }
.hs__tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--hs); box-shadow: 0 0 0 3px color-mix(in oklab, var(--hs) 30%, transparent); }
.hs__tag b { font: 500 var(--t-small)/1 var(--font-mono); color: var(--hs); }
@media (max-width: 639px) { .hs > .loop-pause { display: none; } }

/* ---- how it works, step 1: a small radar scope ---- */
.sp[data-m-loop] { --m-still: 0.2; padding-bottom: 0; }
.scope { position: relative; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #12284a, #0a1424 74%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.scope::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(rgb(150 190 235 / .2), rgb(150 190 235 / .2)) 50% 0 / 1px 100% no-repeat,
  linear-gradient(rgb(150 190 235 / .2), rgb(150 190 235 / .2)) 0 50% / 100% 1px no-repeat,
  repeating-radial-gradient(circle, transparent 0 15px, rgb(150 190 235 / .26) 15px 16px); }
.scope__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 270deg, rgb(130 195 255 / .62) 360deg); animation: scope-turn var(--m-cycle) linear infinite; }
.scope__blip { position: absolute; left: 62%; top: 22%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: #f0a91e; box-shadow: 0 0 0 3px rgb(240 169 30 / .3); animation: scope-blip var(--m-cycle) linear infinite; }
@keyframes scope-turn { to { transform: rotate(360deg); } }
@keyframes scope-blip { 0%, 5% { opacity: .25; } 7% { opacity: 1; } 62% { opacity: .75; } 100% { opacity: .25; } }
@media (max-width: 639px) { .scope { width: 72px; height: 72px; } }

/* ---- the held stage: #trai-nghiem ---- */
.rd__stage { display: none; }
html.rd-live main > section.rd {
  height: 300vh; height: 300svh; min-height: 0; padding: 0; display: block; background: #070e1b;
  --bg: #070e1b; --ink: var(--p-inv-ink); --muted: var(--p-inv-muted); --line: rgb(255 255 255 / .16); color: var(--p-inv-ink);
}
html.rd-live .rd__stage { display: block; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
html.rd-live .rd__stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
html.rd-live main > section.rd > .wrap {
  position: sticky; top: 0; height: 100vh; height: 100svh; margin-top: -100vh; margin-top: -100svh; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-6); padding-top: var(--nav); pointer-events: none;
}
html.rd-live .rd .section-head { width: min(460px, 100%); margin: 0; }
html.rd-live .rd .pd-row { display: grid; grid-template-columns: minmax(0, 1fr); width: min(400px, 100%); gap: 0; margin: 0; }
html.rd-live .rd .pd-row > .pd {
  grid-area: 1 / 1; min-height: 0; visibility: hidden; opacity: 0; transition: opacity 260ms ease, visibility 0s 260ms;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pd-state) 55%, transparent), 0 28px 64px -28px rgb(0 0 0 / .8);
}
html.rd-live .rd .pd-row > .pd.is-on { visibility: visible; opacity: 1; transition: opacity 260ms ease; }
html.rd-live .rd .pd-row > .pd--alert.is-on { animation: rd-alert 1.16s ease-in-out infinite; }
html.rd-live .rd.is-paused .pd-row > .pd--alert.is-on { animation-play-state: paused; }
@keyframes rd-alert { 50% { box-shadow: inset 0 0 0 2px #ef4a3a, 0 0 56px -8px rgb(239 74 58 / .62); } }
html.rd-live .rd__stage > .loop-pause { right: var(--gut, 40px); bottom: 28px; pointer-events: auto; }

@media (max-width: 1023px) {
  html.rd-live main > section.rd > .wrap { justify-content: space-between; padding-top: calc(var(--nav) + var(--s-5)); padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); }
  html.rd-live .rd .section-head { width: 100%; padding-right: 0; }
  html.rd-live .rd .pd-row { width: 100%; }
  html.rd-live .rd__stage > .loop-pause { bottom: auto; top: calc(var(--nav) + 12px); }
  html.rd-live .rd .section-head h2 { padding-right: 44px; }
  /* the phone's fixed sign-up bar sits over the foot of the stage */
  html.rd-live main > section.rd > .wrap { padding-bottom: calc(var(--s-5) + var(--bar, 0px) + env(safe-area-inset-bottom)); }
}
@media print {
  html.rd-live main > section.rd { height: auto; }
  html.rd-live .rd__stage { display: none; }
}