/*
 * The Cartel Vivo scroll-world prototype. The engine layers its own rules in
 * `@layer sw`, which is unlayered-CSS's loser by definition — so everything
 * here wins without a single `!important`, and the engine stays swappable
 * against upstream.
 *
 * Everything is scoped under `.cartel` for the reason landing.css states: Turbo's
 * head merge copies a page sheet in and never takes it back out, so an unscoped
 * rule here would follow the visitor through the whole session.
 */

.cartel {
  /* The engine reads these six; every value is a token, none is a colour. */
  --sw-bg: var(--ink);
  --sw-ink: var(--texto);
  --sw-accent: var(--amarillo);
  --sw-font-body: var(--font-body);
  --sw-font-display: var(--font-display);
}

/* The flight is the page: no venue chrome, no footer rule, nothing beside it. */
.cartel .sw-stage {
  background: var(--ink) var(--poster);
}

/*
 * Copy sits above every layer. Without this the foreground prop (z-index 100,
 * being depth 1.0) paints over the headline — depth is worth having and text
 * you cannot read is not, so legibility wins the collision (.impeccable.md P4).
 */
.cartel .sw-copy {
  z-index: 200;

  /*
   * The engine's own scrim is pure black. Ours is the ink: a black wash over a
   * violet-tinted poster greys it out, and tinting neutrals toward the ink is
   * the standing rule (ADR 0010). color-mix is how a token gets an alpha —
   * spelling the same colour out with a literal would say it twice, and the
   * second one would not move when the token does.
   */
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--ink) 92%, transparent) 20%,
    transparent
  );
}

/*
 * The masthead. It is the only copy on the page that has to work before a
 * finger has moved, so it sits in the middle of the frame rather than in the
 * bottom band the scenes use — and the clip's first frame is empty sky, which
 * is the one composition in the whole set with room for a headline dead centre.
 */
.cartel .sw-copy--hero {
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: none;
}

.cartel .sw-copy--hero .sw-copy-inner {
  opacity: 1;
  transform: none;
}

/* The one instruction on the page: a page that only rewards scrolling has to
   say so, or its first screen looks like the whole of it. */
.cartel .sw-cue {
  margin: var(--space-5) 0 0;
  font-family: var(--font-data);
  font-size: var(--text-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--dim);
}

/* Poster type: the marquee face, tracked out, in caps. This is the single
   biggest thing keeping the page off the generic dark-purple shelf. */
.cartel .sw-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: var(--leading-tight);
  color: var(--texto);
}

/* The eyebrow is data, not prose — the note at the far end of a poster's band. */
.cartel .sw-eyebrow {
  font-family: var(--font-data);
  font-size: var(--text-micro);
  letter-spacing: var(--track-micro);
  color: var(--amarillo);
}

.cartel .sw-body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--dim);
  opacity: 1;
}

/*
 * The call, printed as the app's own bell button rather than a link: this is the
 * one thing on the page a thumb is meant to hit, so it gets the tap target the
 * design system already guarantees.
 */
.cartel .sw-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  margin-top: var(--space-4);
  padding: 0 var(--space-5);
  border: var(--border) solid var(--ink);
  background: var(--amarillo);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-body);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow-sticker);
}

.cartel .sw-cta:active {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--sombra);
}

/*
 * The route rail, squared off. The engine draws round dots; a poster has no
 * radius (ADR 0015), and these are the only persistent chrome on the page.
 */
.cartel .sw-rail button {
  width: 10px;
  height: 10px;
  border-radius: 0;
  border: var(--border-hair) solid var(--line);
  background: transparent;
}

.cartel .sw-rail button[aria-current="true"] {
  background: var(--amarillo);
  border-color: var(--amarillo);
}

.cartel .sw-rail button:focus-visible {
  outline: var(--border) solid var(--amarillo);
  outline-offset: 3px;
}

/*
 * Reduced motion (.impeccable.md P4): the engine already freezes the transforms.
 * What it cannot know is that the copy is faded in by the same scroll it just
 * stopped reading, so pin it visible or the page reads as six empty pictures.
 */
@media (prefers-reduced-motion: reduce) {
  .cartel .sw-copy-inner {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Portrait ──────────────────────────────────────────────────────────────
 *
 * The plates are 16:9 and the audience is a phone held upright (.impeccable.md:
 * mid-range Android, on the metro, one hand). Covered into a 390x844 viewport a
 * plate scales to ~1502px wide, so only the middle ~26% of it survives — and
 * every scene was composed with its subject off-centre, which is exactly the
 * part that gets cropped away.
 *
 * Until portrait plates exist, each scene is re-anchored on its own subject.
 * These percentages are not decoration: they are where the thing you are meant
 * to be looking at actually sits in each render, so a phone crops toward it
 * instead of through it.
 */
@media (orientation: portrait) {
  /* The backdrop is the first layer; the prop carries [data-fit]. */
  .cartel .sw-scene[data-id="calle"] .sw-layer:first-child {
    background-position: 30% center;
  }

  .cartel .sw-scene[data-id="cartel"] .sw-layer:first-child {
    background-position: 46% center;
  }

  .cartel .sw-scene[data-id="vestidor"] .sw-layer:first-child {
    background-position: 72% center;
  }

  .cartel .sw-scene[data-id="tunel"] .sw-layer:first-child {
    background-position: 34% center;
  }

  .cartel .sw-scene[data-id="ring"] .sw-layer:first-child {
    background-position: 50% 62%;
  }

  .cartel .sw-scene[data-id="grada"] .sw-layer:first-child {
    background-position: 68% center;
  }

  /*
   * A prop sized for a landscape stage eats a portrait one, and it sits in the
   * same bottom corner the copy occupies once the screen is this narrow.
   */
  .cartel .sw-layer[data-fit] {
    background-size: auto 24%;
  }
}

/* ── The readable page ─────────────────────────────────────────────────────
   Six stacked stills. Not a lesser version of the flight — the same scenes and
   the same words, read rather than travelled. It ships visible and the Stimulus
   controller hides it once an engine is actually mounted (ADR 0016), so a
   crawler, a link preview and a phone whose JS never arrives all get the
   argument rather than an empty div. */

.cartel__fallback {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-5);
  max-width: var(--shell);
  margin-inline: auto;
}

.cartel__still-plate {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border) solid var(--line);
}

.cartel__still-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
}