/* The website's moving parts (site/motion.js) and the new pages' layouts. Builds on assets/style.css and site/site.css. */
html.motion .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
html.motion .reveal.in { opacity: 1; transform: none; }
html.motion .reveal.d1 { transition-delay: .08s; }
html.motion .reveal.d2 { transition-delay: .16s; }
html.motion .reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { html.motion .reveal { opacity: 1; transform: none; transition: none; } }

/* the hero: words on the left, a drive playing on a phone on the right */
.hero2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; padding: 30px 0 60px; }
@media (max-width: 900px) { .hero2 { grid-template-columns: 1fr; gap: 30px; } }
.hero2 h1 { font-size: clamp(52px, 7.2vw, 100px); margin: 12px 0 18px; line-height: .92; }
.hero2 h1 em { font-style: normal; color: var(--teal); }
.hero2 .lead { font-size: 19px; color: var(--ink-2); max-width: 34em; margin: 0 0 26px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.hero-badges span { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; background: var(--box); border: 1px solid var(--rule); color: var(--ink-2); }
.phone { width: min(330px, 82vw); margin: 0 auto; padding: 10px; border-radius: 44px; background: #1A1714; box-shadow: 0 30px 70px rgba(35, 31, 26, .35), inset 0 0 0 2px #3a332b; position: relative; }
.phone::before { content: ''; position: absolute; top: 18px; left: 50%; width: 32%; height: 22px; transform: translateX(-50%); background: #000; border-radius: 14px; z-index: 3; }
.phone-screen { position: relative; aspect-ratio: 9 / 16; border-radius: 34px; overflow: hidden; container-type: inline-size; background: #6b4e2e;
  --drv: #FF8A1E; --ahead: rgba(255, 255, 255, .4); --panel: rgba(14, 12, 10, .74); --ink: #fff; --soft: rgba(255, 255, 255, .72); --r: 3cqw; --map: none; --ff: var(--display); --chip-edge: none; }
.phone-screen > * { position: absolute; }
.ph-map { inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--map); transition: filter .5s; }
.ph-tint { inset: 0; background: linear-gradient(rgba(0, 0, 0, .45), transparent 26%, transparent 70%, rgba(0, 0, 0, .45)); }
.ph-svg { inset: 0; width: 100%; height: 100%; }
.ph-all { fill: none; stroke: var(--ahead); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.ph-done { fill: none; stroke: var(--drv); stroke-width: 8; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--drv)); }
.ph-dot { fill: #fff; stroke: var(--drv); stroke-width: 6; }
.ph-ring { fill: none; stroke: var(--drv); stroke-width: 3; opacity: .55; }
.ph-head { top: 11cqw; left: 6cqw; right: 6cqw; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.ph-head b { display: block; font: 800 7.4cqw/1 var(--ff); text-transform: uppercase; }
.ph-head span { display: block; margin-top: 1.4cqw; font: 500 2.9cqw var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }
.ph-head span::before { content: ''; display: inline-block; width: 4cqw; height: .8cqw; background: var(--drv); vertical-align: middle; margin-right: 1.6cqw; }
.ph-chips { top: 46%; right: 5cqw; display: grid; gap: 2cqw; width: 30cqw; }
.ph-chips div { background: var(--panel); border-radius: var(--r); padding: 1.8cqw 3cqw 1.4cqw; text-align: right; color: var(--ink); border-left: var(--chip-edge); }
.ph-chips b { font: 800 6.6cqw/1 var(--ff); }
.ph-chips i { font: 500 2.4cqw var(--mono); font-style: normal; margin-left: .8cqw; }
.ph-chips span { display: block; font: 500 2.1cqw var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin-top: .6cqw; }
.ph-prof { left: 5cqw; right: 5cqw; bottom: 9cqw; background: var(--panel); border-radius: var(--r); padding: 3cqw 3.4cqw 2.6cqw; border-left: var(--chip-edge); }
.ph-prof svg { display: block; width: 100%; height: 15cqw; overflow: visible; }
.pf-area { fill: var(--drv); opacity: .3; }
.pf-line { fill: none; stroke: var(--drv); stroke-width: 1.6; }
.pf-now { stroke: var(--ink); stroke-width: 1.2; }
.ph-card { top: 31cqw; left: 6cqw; padding: 2.4cqw 3.6cqw; border-radius: var(--r); background: var(--drv); color: #111; font: 800 4.6cqw/1 var(--ff); text-transform: uppercase; opacity: 0; transform: translateX(-8cqw); transition: opacity .35s, transform .35s; box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .35); }
.ph-card.on { opacity: 1; transform: none; }
.ph-card b { color: #fff; margin-left: 1.2cqw; }
.ph-theme { left: 0; right: 0; bottom: 3cqw; text-align: center; font: 500 2.8cqw var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 6px #000; }
.ph-theme b { color: var(--drv); }
.phone-screen.swap > * { transition: opacity .2s; opacity: .15; }
.phone-screen.swap > .ph-map { opacity: 1; }
/* each theme's look, as the video maker draws it */
.phone-screen[data-theme=expedition] { --drv: #3CC8F2; --ahead: rgba(233, 180, 76, .9); --panel: rgba(15, 14, 11, .86); --r: 0; --chip-edge: 3px solid #E9B44C; }
.phone-screen[data-theme=night] { --drv: #FF2E88; --ahead: rgba(160, 220, 255, .35); --panel: rgba(11, 6, 18, .9); --r: 0; --map: brightness(.45) saturate(.55) contrast(1.15) hue-rotate(185deg); --chip-edge: 3px solid #B6FF3B; }
.phone-screen[data-theme=night] .ph-chips div { transform: skewX(-10deg); }
.phone-screen[data-theme=hud] { --drv: #7CFF9B; --ahead: rgba(124, 255, 155, .45); --panel: rgba(0, 24, 10, .66); --ink: #7CFF9B; --soft: rgba(124, 255, 155, .7); --r: 0; --ff: var(--mono); --map: grayscale(1) brightness(.55) sepia(1) hue-rotate(70deg) saturate(2.2); }
.phone-screen[data-theme=hud] .ph-chips div, .phone-screen[data-theme=hud] .ph-prof { outline: 1.5px solid rgba(124, 255, 155, .7); }
.phone-screen[data-theme=hud] .ph-head b { color: #7CFF9B; font-size: 5.4cqw; }
.phone-screen[data-theme=festival] { --drv: #FF3D7F; --ahead: rgba(255, 255, 255, .85); --panel: #fff; --ink: #2A1B3D; --soft: #7A6B8E; --r: 6cqw; --map: saturate(1.35) brightness(1.04); }
.phone-screen[data-theme=festival] .ph-card { background: linear-gradient(100deg, #FF3D7F, #FFB627); border-radius: 6cqw; transform: rotate(-3deg) scale(.9); color: #fff; }
.phone-screen[data-theme=festival] .ph-card.on { transform: rotate(-3deg); }
.phone-screen[data-theme=circuit] { --drv: #E8202A; --ahead: rgba(255, 255, 255, .6); --panel: rgba(14, 17, 22, .9); --r: 0; --chip-edge: 6px solid #E8202A; }
.phone-screen[data-theme=field] { --drv: #C8382A; --ahead: rgba(255, 250, 235, .95); --panel: #F3EBDD; --ink: #2B2620; --soft: #8a7d6c; --r: 0; --map: sepia(.55) saturate(.8) contrast(1.05); --chip-edge: 5px solid #C8382A; }
.phone-screen[data-theme=field] .ph-all { stroke-dasharray: 10 8; }

/* a band of big numbers */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 760px) { .numbers { grid-template-columns: 1fr 1fr; } }
.numbers div { padding: 22px; border-radius: 16px; background: var(--box); }
.numbers b { display: block; font: 800 clamp(48px, 6vw, 76px)/1 var(--display); color: var(--teal); }
.numbers span { display: block; margin-top: 6px; color: var(--ink-2); }

/* the video themes, sliding along */
.theme-reel { position: relative; }
.tr-track { display: grid; grid-auto-flow: column; grid-auto-columns: 210px; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 8px 14px; scrollbar-width: thin; }
.tr-track figure { margin: 0; scroll-snap-align: start; }
.tr-track img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 18px; box-shadow: 0 14px 30px rgba(35, 31, 26, .25); background: #222; transition: transform .25s; }
.tr-track figure:hover img { transform: translateY(-4px); }
.tr-track figcaption { margin-top: 10px; display: grid; gap: 2px; }
.tr-track figcaption b { font: 800 22px/1 var(--display); text-transform: uppercase; }
.tr-track figcaption span { font-size: 13.5px; color: var(--ink-2); }
.tr-nav { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 10px; }
.tr-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--rule); background: var(--box); font-size: 18px; cursor: pointer; color: var(--ink); }
.tr-nav button:hover, .tr-nav button:focus-visible { border-color: var(--teal); color: var(--teal); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.swatches span { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--box); border: 1px solid var(--rule); }
.swatches i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }

/* a convoy driving past: the cars move left along a dusty track */
.convoy-lane { position: relative; overflow: hidden; height: 250px; border-radius: 20px; background: linear-gradient(#D9B98C, #C99A61 70%, #B98A52); margin-top: 10px; }
.convoy-lane::after { content: ''; position: absolute; left: 0; right: 0; bottom: 46px; height: 6px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .6) 0 50px, transparent 50px 96px); }
.convoy-lane.run::after { animation: lane 1.4s linear infinite; }
@keyframes lane { to { background-position: 96px 0; } }
.cl-row { position: absolute; bottom: 30px; left: 0; display: flex; width: max-content; z-index: 1; }
.convoy-lane.run .cl-row { animation: convoy 50s linear infinite; }
.convoy-lane.still .cl-row { left: 30px; }
@keyframes convoy { to { transform: translateX(-50%); } }
.cl-car { display: grid; justify-items: center; gap: 2px; width: 190px; margin-right: 70px; }
.cl-num { font: 800 34px/1 var(--display); color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.cl-car b { font: 800 22px/1 var(--display); text-transform: uppercase; color: #231F1A; }
.cl-lvl { font: 600 12px var(--body); padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--teal-ink); margin-bottom: 6px; }
.cl-pic { width: 180px; height: auto; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .25)); }
.convoy-lane.run .cl-pic { animation: bump .5s ease-in-out infinite alternate; }
.cl-car:nth-child(2n) .cl-pic { animation-delay: .25s; }
@keyframes bump { to { transform: translateY(-3px); } }

/* three across, a picture over its words */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .cards3 { grid-template-columns: 1fr; } }
.cards3 figure { margin: 0; }
.cards3 img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 14px 30px rgba(35, 31, 26, .22); }
.cards3 figcaption { margin-top: 12px; }
.cards3 figcaption b { display: block; font: 800 24px/1 var(--display); text-transform: uppercase; }
.cards3 figcaption span { color: var(--ink-2); font-size: 15px; }
@media (max-width: 860px) { .cards3.phones { grid-template-columns: repeat(3, minmax(220px, 1fr)); overflow-x: auto; padding-bottom: 8px; } }
.phone-shot { max-width: 300px; margin: 0 auto; }
.phone-shot img { border-radius: 26px; }

/* help: sections by who it is for */
.help-who { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 8px; }
.help-who a { display: grid; gap: 4px; padding: 18px 20px; border-radius: 16px; background: var(--box); border: 1px solid var(--rule); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.help-who a:hover, .help-who a:focus-visible { border-color: var(--teal); transform: translateY(-2px); }
.help-who b { font: 800 26px/1 var(--display); text-transform: uppercase; }
.help-who span { color: var(--ink-2); font-size: 14.5px; }
.help-part { padding: 50px 0 10px; border-top: 1px solid var(--rule); scroll-margin-top: 10px; }
.help-part > h2 { font-size: clamp(38px, 5vw, 56px); margin: 6px 0 8px; }
.help-part > p { max-width: 46em; color: var(--ink-2); font-size: 17px; }
.help-part .help-guides { padding-bottom: 20px; margin-top: 22px; }
.guide h3 { font: 800 24px/1.05 var(--display); text-transform: uppercase; margin: 0 0 10px; }
.guide ol, .guide ul { margin: 0; padding-left: 22px; display: grid; gap: 7px; color: var(--ink-2); }
.guide p { color: var(--ink-2); margin: 0 0 10px; }
.guide .tip { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--teal-wash); color: var(--teal-ink); font-size: 14px; }
.guide.wide { grid-column: 1 / -1; }
.help-shot { margin: 14px 0 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); }
.help-shot img { display: block; width: 100%; height: auto; }