/* ==========================================================================
   Cyber City · "Why Cyber City" (page-why-cyber-city.php, assets/js/why.js)
   The film from noise to glow at the head, who we are, what you can count on, what we carry, what customers say on
   Google, the call to come in, the store. Built 3 Oct 2026 on Rayan's film; the mouse effects take their ideas from
   21st.dev (a light that follows the cursor along a card's edge, a gentle tilt, a pull on the main button) and are
   drawn in the identity: lime on graphite, square voxels, calm motion.
   Without the script, or on a phone, with reduced motion, with "Pause motion" or with Save-Data, the head is five
   stills of the film with their lines: the page is complete without the film.
   Same rules as every sheet of the theme: tokens only, classes start with ecc- (or is-).
   ========================================================================== */

.ecc-why { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ecc-gap); }
.ecc-why > * { grid-column: 1 / -1; min-width: 0; }
.ecc-why__label { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; }
.ecc-why__h { margin: 0; max-width: 16em; text-wrap: balance; }
.ecc-why__lead { margin: 0; max-width: 34em; }

/* ---- 1 · the film: five stills with their lines (the resting state) ----
   A row the thumb swipes through, one still at a time with the next one showing at the edge, so the whole story takes
   one screen instead of five; from 1181px (a wide screen where the film does not play) the five sit side by side. */
.ecc-why__stage { position: relative; }
.ecc-why__poster, .ecc-why__video, .ecc-why__shade, .ecc-why__meter { display: none; }
.ecc-why__over { display: grid; gap: var(--ecc-s-5); padding: var(--ecc-s-5) var(--ecc-s-4) var(--ecc-s-6); }
.ecc-why__title { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; }
.ecc-why__lines {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: var(--ecc-gap);
  margin: 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.ecc-why__lines::-webkit-scrollbar { display: none; }
/* the whole frame of every still (16:9, never cropped: the products on the stand stay whole), its line under it */
.ecc-why__line { display: grid; align-content: start; gap: var(--ecc-s-3); scroll-snap-align: start; }
.ecc-why__still { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ecc-r-sm); background: var(--ecc-screen); }
.ecc-why__say { margin: 0; font-size: var(--ecc-t-h2); font-weight: var(--ecc-fw-display); line-height: var(--ecc-lh-display); color: var(--ecc-ink); text-wrap: balance; }
@media (min-width: 761px) {
  .ecc-why__over { padding: var(--ecc-s-7); }
  .ecc-why__lines { grid-auto-columns: 46%; }
}
@media (min-width: 1181px) {
  .ecc-why__lines { grid-auto-flow: row; grid-template-columns: repeat(var(--why-n), minmax(0, 1fr)); overflow: visible; }
}

/* ---- 1 · the film that follows the scroll (why.js puts .is-film on the section) ----
   The section is as tall as the film needs to scroll through (about nine tenths of a screen per line); the stage stays
   on screen while it scrolls. The stage shares its own box with nothing but the film and the words over it, so the
   sticky stage never rides over another part of the page. */
.ecc-why__film.is-film { height: calc(var(--why-n) * 90vh + 100vh); }
.is-film .ecc-why__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; border-radius: inherit; }
.is-film .ecc-why__poster, .is-film .ecc-why__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.is-film .ecc-why__video { opacity: 0; transition: opacity var(--ecc-d-slow) var(--ecc-ease-out); }
.is-film.is-ready .ecc-why__video { opacity: 1; }
.is-film .ecc-why__shade {
  position: absolute; inset: 0; display: block; pointer-events: none;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--ecc-panel) 82%, transparent), transparent 52%),
    linear-gradient(to right, color-mix(in srgb, var(--ecc-panel) 58%, transparent), transparent 46%);
}
/* the words sit in the lower third, high enough to be seen on the first screen, under the header and the notice */
.is-film .ecc-why__over { position: absolute; inset: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); padding: var(--ecc-s-7) var(--ecc-s-8) max(var(--ecc-s-8), 21vh); }
.is-film .ecc-why__title { grid-column: 1 / -1; }
.is-film .ecc-why__lines { position: relative; align-self: end; display: block; min-height: 18em; }
.is-film .ecc-why__still { display: none; }
.is-film .ecc-why__line { position: absolute; left: 0; bottom: 0; display: block; opacity: 0; transform: translate3d(0, var(--ecc-s-5), 0); filter: blur(0.35em); }
/* the lines ease in and out only once the film is ready: when the stills turn into the film, the four hidden lines are
   gone at once instead of fading out over the first one */
.is-film.is-ready .ecc-why__line { transition: opacity var(--ecc-d-fast) var(--ecc-ease-out), transform var(--ecc-d-fast) var(--ecc-ease-out), filter var(--ecc-d-fast) var(--ecc-ease-out); }
.is-film.is-ready .ecc-why__line.is-on { transition: opacity var(--ecc-d-slow) var(--ecc-ease-out) var(--ecc-d-fast), transform var(--ecc-d-slow) var(--ecc-ease-out) var(--ecc-d-fast), filter var(--ecc-d-slow) var(--ecc-ease-out) var(--ecc-d-fast); }
.is-film .ecc-why__line.is-on { opacity: 1; transform: none; filter: none; }
.is-film .ecc-why__say { max-width: 11em; font-size: var(--ecc-t-display-xl); }
.is-film .ecc-why__meter { display: flex; align-self: end; gap: var(--ecc-s-1); margin: 0; }
.ecc-why__tick { width: var(--ecc-s-3); height: var(--ecc-s-3); background: color-mix(in srgb, var(--ecc-ink) 24%, transparent); transition: background-color var(--ecc-d-base) var(--ecc-ease-out); }
.ecc-why__tick.is-on { background: var(--ecc-lime); box-shadow: var(--ecc-lime-edge); }

/* ---- 2 · who we are ---- */
.ecc-why__who { display: grid; gap: var(--ecc-s-4); padding-top: var(--ecc-s-6); padding-bottom: var(--ecc-s-6); }
@media (min-width: 761px) { .ecc-why__who { padding-top: var(--ecc-s-8); padding-bottom: var(--ecc-s-8); } }

/* ---- the light that follows the mouse: the shared .ecc-spot (spot.css, spot.js) on the pillars and the reviews;
   the tiles keep only the lit edge, drawn over their photo ---- */
.ecc-why__tile { isolation: isolate; }
.ecc-why__tile::before {
  content: ""; position: absolute; inset: 0; z-index: var(--ecc-z-raised); border: 1px solid transparent; border-radius: inherit; pointer-events: none;
  background: radial-gradient(24em circle at var(--spot-mx, 50%) var(--spot-my, 50%), var(--ecc-lime), transparent 42%) border-box;
  -webkit-mask: linear-gradient(black 0 0) padding-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--ecc-d-base) var(--ecc-ease-out);
}
.ecc-why__tile.is-spot::before { opacity: 1; }

/* ---- 3 · what you can count on ---- */
.ecc-why__pillars { display: grid; gap: var(--ecc-s-6); }
.ecc-why__grid { display: grid; gap: var(--ecc-gap); margin: 0; padding: 0; list-style: none; }
.ecc-why__card {
  position: relative; display: grid; gap: var(--ecc-s-2); align-content: start;
  padding: var(--ecc-s-4); border-radius: var(--ecc-r);
  background-color: var(--ecc-surface-2);
}
.ecc-why__num { font-size: var(--ecc-t-h1); color: var(--ecc-spark); }
.ecc-why__name { margin: 0; font-size: var(--ecc-t-body); }
.ecc-why__line-text { margin: 0; font-size: var(--ecc-t-small); color: var(--ecc-ink-2); }
.ecc-why__more { justify-self: start; margin-top: var(--ecc-s-1); font-size: var(--ecc-t-small); }
/* two short columns on a phone (six promises in about one screen), roomier from 760px, three across from 1181px */
.ecc-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 761px) {
  .ecc-why__card { gap: var(--ecc-s-3); min-height: calc(var(--ecc-s-9) * 2.4); padding: var(--ecc-s-6); }
  .ecc-why__num { font-size: var(--ecc-t-display); }
  .ecc-why__name { font-size: var(--ecc-t-h3); }
  .ecc-why__line-text, .ecc-why__more { font-size: var(--ecc-t-body); }
  .ecc-why__more { margin-top: var(--ecc-s-2); }
}
@media (min-width: 1181px) { .ecc-why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- 4 · what we carry: the film's own stations ---- */
.ecc-why__carry { display: grid; gap: var(--ecc-s-6); }
.ecc-why__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ecc-gap); margin: 0; padding: 0; list-style: none; }
.ecc-why__tile {
  position: relative; display: grid; align-items: end; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--ecc-r); background: var(--ecc-panel); color: var(--ecc-ink); text-decoration: none;
}
.ecc-why__tile--bench { background: var(--ecc-panel-2); }
.ecc-why__tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ecc-why__tile-icon { position: absolute; top: var(--ecc-s-4); right: var(--ecc-s-4); display: grid; color: var(--ecc-lime); }
.ecc-why__tile-words {
  position: relative; z-index: var(--ecc-z-raised); display: grid; gap: var(--ecc-s-1); padding: var(--ecc-s-6) var(--ecc-s-4) var(--ecc-s-4);
  background: linear-gradient(to top, color-mix(in srgb, var(--ecc-panel) 88%, transparent), transparent);
}
.ecc-why__tile-name { margin: 0; color: var(--ecc-ink); }
.ecc-why__tile-go { display: inline-flex; align-items: center; gap: var(--ecc-s-1); font-size: var(--ecc-t-small); font-weight: var(--ecc-fw-medium); color: var(--ecc-lime); }
.ecc-why__tile:focus-visible { outline: var(--ecc-focus-ring); outline-offset: var(--ecc-focus-offset); }
@media (min-width: 1181px) { .ecc-why__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- 5 · from our Google reviews: the real rating, four reviews word for word ---- */
.ecc-why__reviews { display: grid; gap: var(--ecc-s-6); }
.ecc-why__rhead { display: grid; gap: var(--ecc-s-3); justify-items: start; }
.ecc-why__rating { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecc-s-2) var(--ecc-s-3); margin: 0; }
/* the rating is written in Archivo: the dot-matrix face never carries punctuation, and 4.3 needs its point */
.ecc-why__rate { font-size: var(--ecc-t-display); font-weight: var(--ecc-fw-display); line-height: 1; color: var(--ecc-ink); }
.ecc-why__count { color: var(--ecc-ink-2); }
.ecc-why__stars {
  --why-sq: var(--ecc-s-3);
  display: inline-block; flex: none; width: calc(var(--why-sq) * 5 + var(--ecc-s-1) * 4); height: var(--why-sq);
  background: linear-gradient(90deg, var(--ecc-spark) var(--why-fill, 100%), var(--ecc-line-strong) var(--why-fill, 100%));
  -webkit-mask: repeating-linear-gradient(90deg, black 0 var(--why-sq), transparent var(--why-sq) calc(var(--why-sq) + var(--ecc-s-1)));
  mask: repeating-linear-gradient(90deg, black 0 var(--why-sq), transparent var(--why-sq) calc(var(--why-sq) + var(--ecc-s-1)));
}
.ecc-why__stars--sm { --why-sq: var(--ecc-s-2); }
.ecc-why__quotes {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16em, 84%); gap: var(--ecc-gap);
  margin: 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.ecc-why__quotes::-webkit-scrollbar { display: none; }
.ecc-why__quote {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--ecc-s-4); padding: var(--ecc-s-5);
  border-radius: var(--ecc-r); background-color: var(--ecc-surface-2); scroll-snap-align: start;
}
.ecc-why__q { margin: 0; }
.ecc-why__q p { margin: 0; font-size: var(--ecc-t-body-lg); line-height: var(--ecc-lh-body); text-wrap: pretty; }
.ecc-why__by { display: flex; align-items: center; gap: var(--ecc-s-3); margin: 0; }
.ecc-why__badge {
  display: grid; place-items: center; flex: none; width: var(--ecc-s-7); height: var(--ecc-s-7); border-radius: var(--ecc-r-sm);
  background: var(--ecc-panel); color: var(--ecc-on-panel); font-family: var(--ecc-f-dot); font-size: var(--ecc-t-h3);
}
.ecc-why__who-said { display: grid; }
.ecc-why__name-said { font-weight: var(--ecc-fw-strong); }
.ecc-why__src { font-size: var(--ecc-t-small); color: var(--ecc-ink-2); }
@media (min-width: 761px) {
  .ecc-why__quotes { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
}
@media (min-width: 1181px) { .ecc-why__quotes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- 6 · come see it: on the film's last frame (the grid that runs on), with the voxel grid under the mouse ---- */
.ecc-why__cta { position: relative; display: grid; gap: var(--ecc-s-4); justify-items: start; overflow: hidden; isolation: isolate; padding-top: var(--ecc-s-7); padding-bottom: var(--ecc-s-7); }
@media (min-width: 761px) { .ecc-why__cta { padding-top: var(--ecc-s-9); padding-bottom: var(--ecc-s-9); } }
.ecc-why__cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--ecc-panel) 38%, color-mix(in srgb, var(--ecc-panel) 30%, transparent)), url("../img/why/film-5.webp") 70% 40% / cover no-repeat;
}
.ecc-why__cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ecc-lime) 26%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ecc-lime) 26%, transparent) 1px, transparent 1px);
  background-size: var(--ecc-s-5) var(--ecc-s-5);
  -webkit-mask: radial-gradient(16em circle at var(--spot-mx, 50%) var(--spot-my, 50%), black, transparent 70%);
  mask: radial-gradient(16em circle at var(--spot-mx, 50%) var(--spot-my, 50%), black, transparent 70%);
  opacity: 0; transition: opacity var(--ecc-d-base) var(--ecc-ease-out);
}
.ecc-why__cta.is-spot::after { opacity: 1; }
.ecc-why__cta > * { position: relative; z-index: var(--ecc-z-raised); }
@media (min-width: 761px) {
  .ecc-why__cta::before { background: linear-gradient(90deg, var(--ecc-panel) 30%, color-mix(in srgb, var(--ecc-panel) 15%, transparent)), url("../img/why/film-5.webp") 80% 50% / cover no-repeat; }
}
.ecc-why__acts { display: flex; flex-wrap: wrap; gap: var(--ecc-s-3); margin-top: var(--ecc-s-2); }

/* ---- 7 · the store ---- */
.ecc-why__store { scroll-margin-top: var(--ecc-s-8); }

/* ---- reduced motion: the lines just show (the cards are still by spot.css) ---- */
@media (prefers-reduced-motion: reduce) {
  .is-film .ecc-why__line { transition: none; filter: none; }
}