/* Website v3: everything below the drive continues the same night. Each section is a place on
   the road (a checkpoint under a lamp, a motorway gantry, a lit street, two lanes, arrival under
   Ararat) and borrows the scene's own art as CSS masks. Gradients and masks only: no blur, no
   filters, so weak phones pay nothing extra. */

:root {
  color-scheme: dark;
  --night-sky: oklch(0.105 0.028 266);
  --bg: oklch(0.135 0.03 265);
  --surface: oklch(0.175 0.03 265);
  --surface-2: oklch(0.23 0.03 265);
  --line: oklch(1 0 0 / 0.13);
  --ink: oklch(0.96 0.006 262);
  --muted: oklch(0.79 0.016 262);
  --blue-tint: oklch(0.26 0.07 258);
  --red-tint: oklch(0.28 0.08 27);
  --green-tint: oklch(0.28 0.07 152);
  --asphalt: oklch(0.21 0.008 262);
  --lamp: oklch(0.87 0.11 74);
  --lamp-soft: oklch(0.82 0.12 68 / 0.2);
  --sign-blue: oklch(0.45 0.16 258);
}

body { background: var(--bg); }
/* Lazy rendering made in-page links (Download, Try) land short: the skipped sections were
   estimated at 900px, then grew once rendered. The sections are light, so render them normally. */
.below-fold { content-visibility: visible; }
a { color: var(--lamp); }

/* Header once the drive has scrolled away */
.header { background: var(--night-sky); border-color: var(--line); }
.brand, .header__nav a { color: var(--ink); }
.lang { background: var(--surface-2); }
.lang button[aria-pressed='true'] { background: var(--ink); color: var(--night-sky); box-shadow: none; }
.header.is-over .lang button[aria-pressed='true'] { color: var(--night-sky); }
.journey__hero .store, .jcard--finish .store { color: var(--night-sky); }

.section-head h2 { color: var(--ink); }
.section-head p { color: var(--muted); }

.btn { background: var(--lamp); color: var(--night-sky); }
.btn:hover { background: oklch(0.93 0.09 80); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface); }
.store { background: var(--ink); color: var(--night-sky); }
.store:hover { background: oklch(0.88 0.01 262); }

/* ---- Street lamp: the scene's lamp art as a silhouette, with its light cone and pool ---- */

.lamp {
  --h: 200px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--h) * 0.27);
  height: var(--h);
  pointer-events: none;
}
.lamp::before {
  content: '';
  position: absolute;
  inset: 0;
  background: oklch(0.22 0.02 266);
  -webkit-mask: url('scene/svg/street-lamp.svg') no-repeat 0 0 / 100% 100%;
  mask: url('scene/svg/street-lamp.svg') no-repeat 0 0 / 100% 100%;
}
.lamp::after {
  content: '';
  position: absolute;
  top: calc(var(--h) * 0.03);
  left: calc(var(--h) * 0.256 - var(--h) * 0.55);
  width: calc(var(--h) * 1.1);
  height: calc(var(--h) * 0.97);
  background:
    radial-gradient(50% 9% at 50% 100%, oklch(0.82 0.12 68 / 0.3), transparent),
    linear-gradient(oklch(0.84 0.12 70 / 0.3), oklch(0.82 0.12 68 / 0.05) 85%, transparent);
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  transition: opacity 0.5s var(--ease);
}
.lamp i {
  position: absolute;
  z-index: 1;
  top: calc(var(--h) * 0.012);
  left: calc(var(--h) * 0.256 - 7px);
  width: 14px;
  height: 7px;
  border-radius: 0 0 7px 7px;
  background: oklch(0.97 0.05 85);
  box-shadow: 0 0 14px 4px oklch(0.85 0.12 72 / 0.55), 0 0 60px 18px oklch(0.82 0.12 68 / 0.18);
  transition: opacity 0.5s var(--ease);
}
.lamp.is-off::after, .lamp.is-off i { opacity: 0; }
.lamp.is-on::after, .lamp.is-on i { animation: lamp-on 0.9s steps(1, end) var(--lamp-delay, 0s) backwards; }
@keyframes lamp-on { 0% { opacity: 0.6; } 12% { opacity: 0; } 24% { opacity: 0.9; } 36% { opacity: 0.2; } 48%, 100% { opacity: 1; } }

/* ---- Checkpoint: the 3D intersection under a street lamp ---- */

.checkpoint { position: relative; background: linear-gradient(oklch(0.075 0.02 266), var(--bg) 22rem); }
.checkpoint__stage { position: relative; max-width: 44rem; margin-inline: auto; }
.lamp--tall { display: none; }

.puzzle {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 oklch(0.87 0.11 74 / 0.35), 0 40px 80px -40px oklch(0 0 0 / 0.9), 0 -30px 90px -30px oklch(0.82 0.12 68 / 0.16);
}
.puzzle__title { color: var(--ink); }
.puzzle__task { color: var(--muted); }
/* The intersection keeps the app's daylight look: it is the lit thing under the lamp. */
.puzzle__scene { background: oklch(0.9 0.04 145); }
.puzzle__drag { background: oklch(0.1 0.02 266 / 0.75); }
.puzzle__status { background: oklch(0.15 0.028 265); color: var(--ink); }
.puzzle__status .dot { background: var(--lamp); box-shadow: 0 0 8px oklch(0.87 0.11 74 / 0.7); }
.puzzle__reset { background: var(--surface-2); color: var(--ink); }

/* ---- Motorway: the stats as an overhead gantry sign lit by headlights ---- */

.motorway { position: relative; padding-bottom: 0; overflow: hidden; background: linear-gradient(var(--bg), var(--night-sky)); }
.gantry { position: relative; padding-top: 22px; }
.gantry::before {
  content: '';
  position: absolute;
  top: 0;
  left: -3vw;
  right: -3vw;
  height: 22px;
  background:
    linear-gradient(oklch(0.3 0.01 262), oklch(0.3 0.01 262)) 0 0 / 100% 3px no-repeat,
    linear-gradient(oklch(0.3 0.01 262), oklch(0.3 0.01 262)) 0 100% / 100% 3px no-repeat,
    repeating-linear-gradient(60deg, transparent 0 16px, oklch(0.3 0.01 262) 16px 18px, transparent 18px 34px);
}
.gantry::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 12%;
  right: 12%;
  height: clamp(5rem, 10vw, 8rem);
  background:
    linear-gradient(oklch(0.24 0.01 262), oklch(0.24 0.01 262)) 0 0 / 6px 100% no-repeat,
    linear-gradient(oklch(0.24 0.01 262), oklch(0.24 0.01 262)) 100% 0 / 6px 100% no-repeat;
}
.board {
  background: linear-gradient(oklch(0.33 0.12 260), var(--sign-blue) 55%, oklch(0.55 0.15 255));
  box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 8px oklch(0.97 0.01 250), 0 30px 80px -30px oklch(0.6 0.15 255 / 0.35);
}
.board__num, .board__title { text-shadow: 0 0 18px oklch(1 0 0 / 0.25); }
.motorway__road {
  position: relative;
  height: clamp(7rem, 14vw, 11rem);
  margin-top: clamp(5rem, 10vw, 8rem);
  background:
    repeating-linear-gradient(90deg, oklch(0.93 0 0 / 0.75) 0 46px, transparent 46px 96px) 0 50% / 100% 4px no-repeat,
    linear-gradient(oklch(0.9 0 0 / 0.5), oklch(0.9 0 0 / 0.5)) 0 10% / 100% 2px no-repeat,
    linear-gradient(oklch(0.9 0 0 / 0.5), oklch(0.9 0 0 / 0.5)) 0 90% / 100% 2px no-repeat,
    radial-gradient(60% 120% at 50% 0%, oklch(0.95 0.03 90 / 0.12), transparent 70%),
    var(--asphalt);
}

/* ---- Street: one lamp per reason ---- */

.street { background: var(--night-sky); }
.street .section-head h2 { max-width: 30ch; }
.legend { gap: 0 clamp(1.5rem, 4vw, 3.5rem); }
.legend__item {
  position: relative;
  grid-template-columns: 1fr;
  gap: 0;
  min-height: 15rem;
  padding: 3.6rem 0 1.6rem 4.8rem;
  border-top: 0;
  border-bottom: 1px solid oklch(1 0 0 / 0.08);
}
.legend__item .lamp { --h: 15rem; }
.legend__icon {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--sign-blue);
  box-shadow: inset 0 0 0 2px oklch(0.97 0.01 250), 0 0 24px oklch(0.82 0.12 68 / 0.25);
}
.legend__icon svg { width: 26px; height: 26px; }
.legend__item > div { position: relative; z-index: 1; margin-top: 1rem; }
.legend__item h3 { color: var(--ink); }
.legend__item p { color: var(--muted); }

/* ---- Lanes: Free and Premium side by side on the asphalt ---- */

.lanes { background: linear-gradient(var(--night-sky), var(--bg)); }
.plans {
  position: relative;
  gap: 0;
  padding: clamp(1rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.4rem);
  border-radius: 6px;
  background:
    linear-gradient(oklch(0.92 0 0 / 0.8), oklch(0.92 0 0 / 0.8)) 12px 0 / 3px 100% no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) calc(100% - 12px) 0 / 3px 100% no-repeat,
    radial-gradient(80% 60% at 50% 0%, oklch(0.82 0.12 68 / 0.08), transparent),
    var(--asphalt);
}
.plan--premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, oklch(0.92 0 0 / 0.8) 0 34px, transparent 34px 70px);
}
.plan { position: relative; padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem) clamp(0.6rem, 2vw, 1.6rem); border-radius: 0; }
.plan--free, .plan--premium { background: transparent; border: 0; box-shadow: none; color: var(--ink); }
.plan__arrow { width: 22px; height: 60px; margin-bottom: 0.9rem; color: oklch(0.92 0 0 / 0.75); }
.plan--premium .plan__arrow { color: var(--yellow); }
.plan__tag { padding: 0; border-radius: 0; background: none !important; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.plan--free .plan__tag { color: oklch(0.92 0 0); }
.plan--premium .plan__tag { color: var(--yellow); }
.plan h3 { color: oklch(0.97 0 0); }
.plan--free li svg { color: oklch(0.92 0 0); }
.plan--premium li svg { color: var(--yellow); }
.plan li { color: oklch(0.9 0.008 262); }
.plan__note { color: var(--muted); opacity: 1; }

.guide { background: var(--surface); border-color: var(--line); color: var(--ink); }
.guide:hover { border-color: var(--lamp); }
.guide svg { color: var(--lamp); }

/* ---- FAQ ---- */

.faq { border-color: var(--line); }
.faq details { border-color: var(--line); }
.faq summary { color: var(--ink); }
.faq summary::after {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid oklch(0.97 0 0);
  background: var(--yellow);
  transform: rotate(45deg);
}
.faq details[open] summary::after { transform: rotate(135deg) scale(0.85); background: transparent; }
.faq details p { color: var(--muted); }
.sourcing { background: var(--surface); border: 1px solid var(--line); color: var(--muted); }

/* ---- Arrival: the city at night under Ararat (Masis on the right, Sis on the left) ---- */

.go {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  /* Room for the whole of Ararat below the copy: its art height plus its lift above the road. */
  padding-bottom: calc(max(130vw, 640px) * 0.1654 + clamp(3.2rem, 6vw, 5rem) + 1rem);
  background: linear-gradient(var(--bg), oklch(0.1 0.03 266) 30%, oklch(0.2 0.045 275) 78%, oklch(0.27 0.05 285));
}
.go__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.go__stars {
  position: absolute;
  inset: 0 0 40%;
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, oklch(1 0 0 / 0.8), transparent),
    radial-gradient(1px 1px at 27% 42%, oklch(1 0 0 / 0.6), transparent),
    radial-gradient(1.4px 1.4px at 44% 12%, oklch(1 0 0 / 0.75), transparent),
    radial-gradient(1px 1px at 58% 30%, oklch(1 0 0 / 0.55), transparent),
    radial-gradient(1.3px 1.3px at 71% 9%, oklch(1 0 0 / 0.8), transparent),
    radial-gradient(1px 1px at 83% 36%, oklch(1 0 0 / 0.6), transparent),
    radial-gradient(1.2px 1.2px at 93% 20%, oklch(1 0 0 / 0.7), transparent),
    radial-gradient(1px 1px at 6% 52%, oklch(1 0 0 / 0.5), transparent),
    radial-gradient(1px 1px at 36% 64%, oklch(1 0 0 / 0.45), transparent),
    radial-gradient(1px 1px at 65% 58%, oklch(1 0 0 / 0.45), transparent);
}
.go__ararat, .go__snow {
  position: absolute;
  left: 50%;
  bottom: clamp(3.2rem, 6vw, 5rem);
  width: max(130%, 640px);
  aspect-ratio: 2342.7451 / 387.38446;
  transform: translateX(-46%);
  -webkit-mask: url('scene/svg/ararat-body.svg') no-repeat 0 0 / 100% 100%;
  mask: url('scene/svg/ararat-body.svg') no-repeat 0 0 / 100% 100%;
  background: linear-gradient(oklch(0.36 0.04 280), oklch(0.24 0.04 278));
}
.go__snow {
  -webkit-mask-image: url('scene/svg/ararat-snow.svg');
  mask-image: url('scene/svg/ararat-snow.svg');
  background: linear-gradient(oklch(0.72 0.03 270), oklch(0.5 0.03 272));
  opacity: 0.85;
}
.go__city {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(2.6rem, 5vw, 4rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 2vw;
  padding-inline: 2vw;
}
.go__city::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 40%;
  background: linear-gradient(transparent, oklch(0.27 0.05 285 / 0.55));
}
.go__block, .go__poplar {
  position: relative;
  flex-shrink: 0;
  background: oklch(0.08 0.02 266);
  -webkit-mask: var(--art) no-repeat 0 0 / 100% 100%;
  mask: var(--art) no-repeat 0 0 / 100% 100%;
}
.go__block::after {
  content: '';
  position: absolute;
  inset: 0;
  background: oklch(0.86 0.12 72);
  -webkit-mask: var(--lights) no-repeat 0 0 / 100% 100%;
  mask: var(--lights) no-repeat 0 0 / 100% 100%;
}
.go__block--1 { --art: url('scene/layered/block-1.svg'); --lights: url('scene/layered/block-1-lights.svg'); height: clamp(1.8rem, 5vw, 4.4rem); aspect-ratio: 920 / 319; }
.go__block--2 { --art: url('scene/layered/block-2.svg'); --lights: url('scene/layered/block-2-lights.svg'); height: clamp(3.4rem, 10vw, 9rem); aspect-ratio: 840 / 695; }
.go__block--3 { --art: url('scene/layered/block-3.svg'); --lights: url('scene/layered/block-3-lights.svg'); height: clamp(3rem, 9vw, 8rem); aspect-ratio: 793 / 733; }
.go__block--4 { --art: url('scene/layered/block-4.svg'); --lights: url('scene/layered/block-4-lights.svg'); height: clamp(3.3rem, 9.6vw, 8.6rem); aspect-ratio: 869 / 866; }
.go__poplar { --art: url('scene/svg/poplar-1.svg'); height: clamp(3rem, 9vw, 8rem); aspect-ratio: 344 / 1471; background: oklch(0.06 0.02 266); }
.go__poplar--b { --art: url('scene/svg/poplar-2.svg'); aspect-ratio: 306 / 1457; height: clamp(3.4rem, 8vw, 7rem); }
.go__road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(2.7rem, 5vw, 4.1rem);
  background:
    repeating-linear-gradient(90deg, oklch(0.93 0 0 / 0.7) 0 40px, transparent 40px 86px) 0 55% / 100% 3px no-repeat,
    linear-gradient(oklch(0.9 0 0 / 0.35), oklch(0.9 0 0 / 0.35)) 0 0 / 100% 2px no-repeat,
    oklch(0.12 0.012 262);
}
.go h2 { color: oklch(0.98 0 0); text-shadow: 0 2px 30px oklch(0.05 0.02 262 / 0.7); }
.go p { color: oklch(0.88 0.012 262); }
@media (min-width: 980px) { .go__grid { grid-template-columns: 1fr; } }
.go .store { background: var(--ink); color: var(--night-sky); }

/* ---- Footer: the road runs on ---- */

.footer {
  position: relative;
  background: oklch(0.12 0.012 262);
  color: var(--muted);
}
.footer a { color: var(--ink); }
.footer__fine { border-color: var(--line); }
.footer__socials a { background: var(--surface-2); }

@media (min-width: 760px) {
  .plan--premium::before {
    top: 0;
    bottom: 0;
    right: auto;
    width: 3px;
    height: auto;
    margin-left: -1.5px;
    background: repeating-linear-gradient(oklch(0.92 0 0 / 0.8) 0 34px, transparent 34px 70px);
  }
  .plan--free { padding-right: clamp(1.4rem, 3vw, 2.6rem); }
  .plan--premium { padding-left: clamp(1.4rem, 3vw, 2.6rem); }
}

@media (min-width: 980px) {
  .checkpoint__stage { padding-left: 0; }
  .lamp--tall { display: block; --h: 42rem; left: -12.5rem; }
  .lamp--tall::after { left: calc(var(--h) * 0.256 - var(--h) * 0.36); width: calc(var(--h) * 0.72); }
}

.lite .lamp.is-on::after, .lite .lamp.is-on i { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .lamp.is-on::after, .lamp.is-on i { animation: none; }
}

/* ---- Screenshot preview dialog ---- */

.is-zoomable { cursor: zoom-in; }
.is-zoomable img:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; }
.is-previewing { overflow: hidden; }

.shot-preview {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  cursor: zoom-out;
}
.shot-preview[open] { display: grid; place-items: center; align-content: center; gap: 1rem; }
.shot-preview::backdrop { background: transparent; }
.shot-preview__scrim { position: absolute; inset: 0; background: oklch(0.06 0.02 266 / 0.82); }
.shot-preview__phone {
  position: relative;
  height: min(78vh, 78dvh, 780px);
  aspect-ratio: 360 / 783;
  padding: 7px;
  border-radius: 34px;
  background: oklch(0.05 0.01 262);
  border: 1px solid oklch(1 0 0 / 0.14);
  box-shadow: 0 40px 120px -30px oklch(0 0 0 / 0.9), 0 0 0 1px oklch(0 0 0 / 0.4);
  transform-origin: center;
}
.shot-preview__phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 27px; }
.shot-preview__hint { position: relative; font-size: 0.85rem; font-weight: 650; color: oklch(0.86 0.01 262); }