/* =============================================================================
   KAR — background effects
   Layers are added by /scripts/bg-effects.js (switches and how to turn each
   effect off are listed at the top of that file).

   Rules every effect here follows:
   - It sits behind the section's content and is never clickable.
   - It only animates transform and opacity.
   - It stays out of text columns (masks, fixed bands) and is fainter or gone
     on small screens.
   - Reduced motion: no animation (a still version, or nothing).
   - Colours come from the brand palette: navy #0f1b3d (--kar-navy-800),
     #1e3a5f (--kar-navy-700), #3b6fa0 (--kar-navy-600), ice #c4cee8,
     gold #c9a24b.

   Contents
   1. Shared            5. Footer glint
   2. Homepage hero     6. About: hero streaks, blueprint, closing glow
   3. Homepage dividers 7. Editorial header line
   4. Homepage close    8. 404 road
                        9. Reduced motion
   ============================================================================= */

/* ── 1. Shared ─────────────────────────────────────────────────────────── */
.bgfx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
}
.bgfx * { pointer-events: none; }
.bgfx.is-paused *,
.bgfx.is-paused,
.bgfx-tab-hidden .bgfx *,
.bgfx-tab-hidden .bgfx { animation-play-state: paused !important; }
[data-bgfx="off"] .bgfx,
.bgfx[data-bgfx="off"] { display: none !important; }

/* Streaks (headlights, speed lines). Each streak is a full-width track that
   slides by its own width; the visible light is the ::before at its left
   end. Travel takes the first ~60% of each cycle, then the track rests
   unseen, so only one or two are ever in view. Colours, length and timing
   come from custom properties set per effect. */
.bgfx-streak {
  position: absolute; left: 0; width: 100%; height: 1px;
  opacity: 0;
  animation: bgfx-streak var(--bgfx-dur, 17s) linear infinite;
  will-change: transform, opacity;
}
.bgfx-streak::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: var(--bgfx-len, clamp(120px, 14vw, 240px)); height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--bgfx-streak) 70%, var(--bgfx-streak-head) 100%);
}
@keyframes bgfx-streak {
  0%   { transform: translate3d(-20%, 0, 0); opacity: 0; }
  8%   { opacity: 1; }
  52%  { opacity: 1; }
  60%  { transform: translate3d(100%, 0, 0); opacity: 0; }
  100% { transform: translate3d(100%, 0, 0); opacity: 0; }
}

/* Glows: a soft radial wash that drifts very slowly. */
.bgfx-glow {
  position: absolute;
  background: radial-gradient(closest-side, var(--bgfx-glow) 0%, transparent 100%);
  animation: bgfx-glow-drift 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes bgfx-glow-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-4%, 3%, 0) scale(1.06); }
}

/* Sweeps: a short light that runs once along an existing rule. The layer is
   the rule's own 1px (or 3px) strip, so it never touches anything else. */
.bgfx--rule-sweep,
.bgfx--footer-glint,
.bgfx--ed-sweep { inset: auto 0 auto 0; height: 1px; top: -1px; }
.bgfx-sweep {
  position: absolute; inset: 0;
  opacity: 0;
  will-change: transform, opacity;
}
.bgfx-sweep::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 24%;
  background: linear-gradient(90deg, transparent 0%, var(--bgfx-sweep-a) 35%, var(--bgfx-sweep-b) 80%, transparent 100%);
}
.is-run > .bgfx-sweep { animation: bgfx-sweep 2.2s cubic-bezier(0.45, 0, 0.25, 1) 0.15s 1 both; }
@keyframes bgfx-sweep {
  0%   { transform: translate3d(-24%, 0, 0); opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate3d(100%, 0, 0); opacity: 0; }
}

/* ── 2. Homepage hero: headlight streaks and a soft glow ──────────────── */
/* The headline column is the left half: the mask keeps the layer clear of
   it (fully transparent until 50% of the width, full only from 66%). The
   streaks run in the open bands above and below the console, like
   headlights on a road behind it; the console card is opaque, so nothing
   ever shows through it. */
.bgfx--hero-streaks {
  --bgfx-streak: rgba(59, 111, 160, 0.34);
  --bgfx-streak-head: rgba(30, 58, 95, 0.5);
  --bgfx-glow: rgba(59, 111, 160, 0.11);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 50%, #000 66%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 50%, #000 66%, #000 96%, transparent 100%);
}
html[data-theme="dark"] .bgfx--hero-streaks {
  --bgfx-streak: rgba(196, 206, 232, 0.2);
  --bgfx-streak-head: rgba(231, 235, 246, 0.42);
  --bgfx-glow: rgba(59, 111, 160, 0.16);
}
.bgfx--hero-streaks .bgfx-glow { top: 2%; right: 0; width: 56%; height: 96%; }
.bgfx--hero-streaks .bgfx-streak:nth-of-type(1) { top: 22px; animation-delay: -3s; }
.bgfx--hero-streaks .bgfx-streak:nth-of-type(2) { top: 44px; --bgfx-dur: 23s; animation-delay: -14s; }
.bgfx--hero-streaks .bgfx-streak:nth-of-type(3) { bottom: 5%; --bgfx-dur: 19s; animation-delay: -7s; }

/* Tablet: the console sits under the copy. Keep only the glow, still, low
   behind the console. */
@media (max-width: 1079px) {
  .bgfx--hero-streaks { -webkit-mask-image: none; mask-image: none; }
  .bgfx--hero-streaks .bgfx-streak { display: none; }
  .bgfx--hero-streaks .bgfx-glow { top: auto; bottom: 0; right: -10%; width: 80%; height: 55%; animation: none; }
}
/* Phones: the headline fills the width; nothing new here. */
@media (max-width: 767px) {
  .bgfx--hero-streaks { display: none; }
}

/* ── 3. Homepage section dividers ──────────────────────────────────────── */
.bgfx-host--rule-sweep { position: relative; }
.bgfx--rule-sweep {
  --bgfx-sweep-a: rgba(59, 111, 160, 0.55);
  --bgfx-sweep-b: rgba(201, 162, 75, 0.85);
}
html[data-theme="dark"] .bgfx--rule-sweep {
  --bgfx-sweep-a: rgba(196, 206, 232, 0.5);
  --bgfx-sweep-b: rgba(220, 189, 108, 0.85);
}

/* ── 4. Homepage closing band ──────────────────────────────────────────── */
/* Speed lines only in the empty strips along the band's top and bottom
   edges (inside its padding, which is never less than 56px), and a glow in
   the gap between the copy and the buttons. The copy and buttons sit above
   the layer. */
.bgfx-host--close-band { position: relative; }
.bgfx-host--close-band > .h-close__inner { position: relative; z-index: 1; }
.bgfx--close-band {
  --bgfx-streak: rgba(196, 206, 232, 0.16);
  --bgfx-streak-head: rgba(231, 235, 246, 0.38);
  --bgfx-glow: rgba(59, 111, 160, 0.17);
  --bgfx-len: clamp(80px, 10vw, 180px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.bgfx--close-band .bgfx-glow { top: 8%; left: 44%; width: 26%; height: 84%; animation-duration: 34s; }
.bgfx--close-band .bgfx-streak:nth-of-type(1) { top: 16px; --bgfx-dur: 11s; animation-delay: -2s; }
.bgfx--close-band .bgfx-streak:nth-of-type(2) { top: 30px; --bgfx-dur: 14s; animation-delay: -9s; }
.bgfx--close-band .bgfx-streak:nth-of-type(3) { bottom: 30px; --bgfx-dur: 13s; animation-delay: -5s; }
.bgfx--close-band .bgfx-streak:nth-of-type(4) { bottom: 16px; --bgfx-dur: 16s; animation-delay: -12s; }
/* Below 1000px the buttons drop under the copy: no glow (it would sit behind
   them). Phones: two still, fainter lines in the edge strips. */
@media (max-width: 999px) {
  .bgfx--close-band .bgfx-glow { display: none; }
}
@media (max-width: 767px) {
  .bgfx--close-band { --bgfx-streak: rgba(196, 206, 232, 0.1); --bgfx-streak-head: rgba(231, 235, 246, 0.22); }
  .bgfx--close-band .bgfx-streak { animation: none; opacity: 1; }
  .bgfx--close-band .bgfx-streak:nth-of-type(1) { transform: translate3d(55%, 0, 0); }
  .bgfx--close-band .bgfx-streak:nth-of-type(4) { transform: translate3d(12%, 0, 0); }
  .bgfx--close-band .bgfx-streak:nth-of-type(2),
  .bgfx--close-band .bgfx-streak:nth-of-type(3) { display: none; }
}

/* ── 5. Footer glint ───────────────────────────────────────────────────── */
/* Runs once along the footer's top border (gold on most pages, a hairline
   on the homepage); the script sets the strip's exact height. */
.bgfx-host--footer-glint { position: relative; }
.bgfx--footer-glint {
  --bgfx-sweep-a: rgba(244, 228, 186, 0.55);
  --bgfx-sweep-b: rgba(255, 246, 222, 0.95);
}
.bgfx--footer-glint .bgfx-sweep::before { width: 16%; }

/* ── 6. About ──────────────────────────────────────────────────────────── */

/* 6a. Hero streaks. The hero's photo shows the car from about a quarter of
   the way down; the streaks live only in the plain navy band above its
   roofline and above the hero's first line of text (the top 80px; the hero's
   top padding is at least 97px on desktop), so no headline, in English or
   the longer Greek, can reach them. The mask also keeps them right of the
   headline column. The script moves them up gently while scrolling
   (parallax), so they only ever move further from the car. Desktop only. */
.bgfx--about-streaks {
  z-index: 0;
  --bgfx-streak: rgba(196, 206, 232, 0.2);
  --bgfx-streak-head: rgba(231, 235, 246, 0.45);
  bottom: auto; height: 100px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 54%, #000 68%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 54%, #000 68%, #000 94%, transparent 100%);
}
.bgfx--about-streaks .bgfx-drift { position: absolute; inset: 0; will-change: transform; }
.bgfx--about-streaks .bgfx-streak:nth-of-type(1) { top: 24px; --bgfx-dur: 18s; animation-delay: -4s; }
.bgfx--about-streaks .bgfx-streak:nth-of-type(2) { top: 50px; --bgfx-dur: 24s; animation-delay: -15s; }
.bgfx--about-streaks .bgfx-streak:nth-of-type(3) { top: 76px; --bgfx-dur: 21s; animation-delay: -9s; }
@media (max-width: 1079px) {
  .bgfx--about-streaks { display: none; }
}

/* 6b. Blueprint in the dark chapters (04, 05, 07). A still drawing in the
   empty top-right corner, right of the headline (which never runs past half
   the width), above the chapter's demo panel or timeline. It fades in once.
   Wide screens only. */
.bgfx-host--blueprint > .wrap { position: relative; z-index: 1; }
.bgfx--blueprint { color: rgba(196, 206, 232, 0.13); }
.bgfx-blueprint {
  position: absolute;
  top: 48px; right: 3%;
  width: min(34%, 460px); height: auto;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 1.4s ease, transform 1.4s ease;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 55%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 60% at 50% 55%, #000 55%, transparent 100%);
}
.bgfx--blueprint.is-run .bgfx-blueprint { opacity: 1; transform: none; }
.bgfx-host--blueprint#intelligence .bgfx-blueprint { transform: scaleX(-1) translate3d(0, 10px, 0); }
.bgfx-host--blueprint#intelligence .bgfx--blueprint.is-run .bgfx-blueprint { transform: scaleX(-1); }
@media (max-width: 1199px) {
  .bgfx--blueprint { display: none; }
}

/* 6c. Closing section: a soft glow behind the centred copy and two speed
   lines in the empty strip along the bottom edge. */
.bgfx-host--about-end > .wrap { position: relative; z-index: 1; }
.bgfx--about-end {
  --bgfx-streak: rgba(196, 206, 232, 0.16);
  --bgfx-streak-head: rgba(231, 235, 246, 0.36);
  --bgfx-glow: rgba(59, 111, 160, 0.15);
  --bgfx-len: clamp(80px, 10vw, 180px);
}
.bgfx--about-end .bgfx-glow { top: 8%; left: 22%; width: 56%; height: 84%; animation-duration: 36s; }
.bgfx--about-end .bgfx-streak {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.bgfx--about-end .bgfx-streak:nth-of-type(1) { bottom: 34px; --bgfx-dur: 14s; animation-delay: -3s; }
.bgfx--about-end .bgfx-streak:nth-of-type(2) { bottom: 20px; --bgfx-dur: 18s; animation-delay: -11s; }
@media (max-width: 767px) {
  .bgfx--about-end .bgfx-glow { animation: none; }
  .bgfx--about-end .bgfx-streak { display: none; }
}

/* ── 7. Editorial header line ──────────────────────────────────────────── */
/* Articles list: along the masthead's bottom rule. Article page: along the
   top rule of the byline row. Once, on load; nothing else on these pages. */
.bgfx-host--ed-sweep { position: relative; }
.bgfx--ed-sweep.bgfx--at-bottom { top: auto; bottom: -1px; }
/* The rule is dark navy, so the light is gold: it reads as a glint on it. */
.bgfx--ed-sweep {
  --bgfx-sweep-a: rgba(201, 162, 75, 0.7);
  --bgfx-sweep-b: rgba(236, 211, 150, 1);
}
html[data-theme="dark"] .bgfx--ed-sweep {
  --bgfx-sweep-a: rgba(196, 206, 232, 0.55);
  --bgfx-sweep-b: rgba(220, 189, 108, 0.9);
}

/* ── 8. 404 road ───────────────────────────────────────────────────────── */
/* A road seen in perspective in the empty strip at the bottom of the page,
   meeting the footer. The script sizes the strip to the free space under the
   buttons (24px clear of them) and hides the road when there is too little. */
.bgfx-host--road { position: relative; }
.bgfx-host--road > .nf-shell { position: relative; z-index: 1; }
.bgfx--road {
  top: auto; height: 0;
  --bgfx-road-edge: rgba(15, 27, 61, 0.16);
  --bgfx-road-dash: rgba(201, 162, 75, 0.5);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
}
html[data-theme="dark"] .bgfx--road {
  --bgfx-road-edge: rgba(196, 206, 232, 0.16);
  --bgfx-road-dash: rgba(220, 189, 108, 0.45);
}
.bgfx-road {
  position: absolute; left: 50%; bottom: 0;
  width: 420px; height: 720px; margin-left: -210px;
  transform-origin: 50% 100%;
  transform: perspective(300px) rotateX(72deg);
  border-left: 2px solid var(--bgfx-road-edge);
  border-right: 2px solid var(--bgfx-road-edge);
}
.bgfx-road i {
  position: absolute; left: 50%; top: -120px; bottom: 0; width: 6px; margin-left: -3px;
  background: repeating-linear-gradient(180deg, var(--bgfx-road-dash) 0 56px, transparent 56px 120px);
  animation: bgfx-road 3.2s linear infinite;
  will-change: transform;
}
@keyframes bgfx-road { to { transform: translate3d(0, 120px, 0); } }
@media (max-width: 767px) {
  .bgfx-road { width: 300px; margin-left: -150px; }
  .bgfx-road i { animation: none; }
}

/* ── 9. Reduced motion ─────────────────────────────────────────────────── */
/* No animation anywhere. Streaks and sweeps disappear (a still streak reads
   as a stray line); glows, the blueprint and the road stay, still. */
@media (prefers-reduced-motion: reduce) {
  .bgfx, .bgfx * { animation: none !important; transition: none !important; }
  .bgfx-streak, .bgfx-sweep { display: none !important; }
  .bgfx-blueprint { opacity: 1; transform: none; }
  .bgfx-host--blueprint#intelligence .bgfx-blueprint { transform: scaleX(-1); }
  .bgfx--about-streaks .bgfx-drift { transform: none !important; }
}