/*
 * Copa MG — presentation layer.
 *
 * The page is a deck, not a document. Each .panel holds ONE idea; scroll-snap
 * advances between them so the experience reads as moving through a
 * presentation rather than scrolling a manual.
 *
 * Three rules govern everything below.
 *
 * COMPOSITION CARRIES MEANING. No two consecutive panels share a layout: the
 * deck runs left-heavy -> centred diagram -> dense grid -> wide band -> split ->
 * flow -> centred. Uniform panels are what made an earlier pass read as a
 * document even after the type was fixed.
 *
 * THE ACCENT MARKS ONE THING PER PANEL. --accent is a loud colour. It is spent
 * only on the terminal or decisive element — the final, the launch market, the
 * last step — and never on ornament. Structure is carried by hairlines and tone.
 *
 * ONE SPACING SCALE. Every vertical gap resolves to a --s-* step. Nothing is
 * spaced by feel; if a value is not on the scale it is a mistake.
 *
 * Tokens and type primitives come from @mg/design; everything here is Copa's
 * own composition.
 */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(1.5rem, 6vw, 5rem);

  /* --- The spacing scale ------------------------------------------------
     Six steps, each with a fixed job. Roughly 20% tighter than the previous
     pass: the deck was breathing so widely that every panel read as its own
     screen, which made a seven-minute presentation feel like a long site. */
  --s-1: 0.5rem;                          /* index -> label, inside one unit  */
  --s-2: 0.7rem;                          /* label -> supporting detail       */
  --s-3: clamp(1rem, 2vh, 1.35rem);       /* eyebrow -> heading               */
  --s-4: clamp(1.4rem, 2.8vh, 2rem);      /* row padding, item to item        */
  --s-5: clamp(1.9rem, 4.2vh, 3rem);      /* heading -> its content block     */
  --s-6: clamp(2.5rem, 5.5vh, 3.75rem);   /* content -> closing note          */
}

/* --- Contrast -------------------------------------------------------------
   Overrides on @mg/design's tokens, applied here rather than in the shared
   package so no other estate surface is touched.

   The muted tone was measurably too weak: #6f706b on the light background is
   4.48:1, below the 4.5:1 floor, and the dark equivalent sat at 6.44:1 with
   nothing in hand. Both are raised. Hairlines are raised with them, because the
   deck's entire structure is carried by 1px rules — a rule too faint to see is
   a composition that reads as drifting text. */

:root {
  --text-muted: #a9a9a6;                  /* was #929292 — 6.44:1 -> 8.50:1   */
  --text-soft: #d2d2ce;
  --border: rgba(255, 255, 255, 0.14);    /* was 0.10                          */
  --border-strong: rgba(255, 255, 255, 0.26); /* was 0.17                      */
}

html[data-theme='light'] {
  --text-muted: #575852;                  /* was #6f706b — 4.48:1 -> 6.45:1   */
  --text-soft: #3a3b37;
  --border: rgba(17, 17, 17, 0.14);
  --border-strong: rgba(17, 17, 17, 0.26);
}

/* Small type never runs lighter than 400. Inter at 300 is beautiful at display
   sizes and illegible at 0.8rem, which is where the "washed out" feeling
   actually came from — weight, as much as colour. */

/* --- Deck ---------------------------------------------------------------- */

.deck {
  scroll-snap-type: y proximity;
}

html {
  scroll-behavior: smooth;
}

.panel {
  align-items: center;
  border-top: 1px solid var(--border);
  display: flex;
  /* Capped rather than locked to the viewport. A panel still commands the
     screen, but a tall display no longer inflates the whole deck: on a 900px
     viewport this alone takes the page from ~7200px to ~5600px. */
  min-height: min(100svh, 44rem);
  padding: clamp(4.75rem, 10vh, 6.75rem) 0 clamp(2.75rem, 7vh, 4.5rem);
  scroll-snap-align: center;
  scroll-snap-stop: normal;
}

.panel:first-child {
  border-top: 0;
}

.panel-inner {
  margin: 0 auto;
  max-width: 66rem;
  padding: 0 var(--gutter);
  width: 100%;
}

.panel-wide .panel-inner {
  max-width: 84rem;
}

.panel-title {
  margin-top: var(--s-3);
  max-width: 17ch;
  text-wrap: balance;
}

.panel-foot {
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.6;
  margin: var(--s-6) 0 0;
  max-width: 52ch;
}

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
}

/* Reveal. Armed only by deck.js adding .is-live, so a browser without
   IntersectionObserver — or with reduced motion — shows everything at once. */
.deck.is-live .panel-inner > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
}

.deck.is-live .panel-inner > *:nth-child(2) { transition-delay: 90ms; }
.deck.is-live .panel-inner > *:nth-child(3) { transition-delay: 170ms; }
.deck.is-live .panel-inner > *:nth-child(4) { transition-delay: 240ms; }
.deck.is-live .panel-inner > *:nth-child(5) { transition-delay: 300ms; }

.deck.is-live .panel.is-visible .panel-inner > * {
  opacity: 1;
  transform: none;
}

/* --- Progress rail ------------------------------------------------------- */

.rail {
  bottom: 0;
  display: none;
  flex-direction: column;
  gap: 0.55rem;
  justify-content: center;
  padding-right: clamp(1rem, 2.2vw, 1.9rem);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 15;
}

@media (min-width: 1040px) and (min-height: 620px) {
  .rail {
    display: flex;
  }
}

.rail a {
  display: block;
  padding: 0.3rem 0;
}

.rail a span {
  background: var(--border-strong);
  display: block;
  height: 1px;
  transition: background-color 200ms ease, width 320ms var(--ease-out);
  width: 12px;
}

.rail a:hover span {
  background: var(--text-muted);
}

.rail a[aria-current] span {
  background: var(--text);
  width: 26px;
}

/* --- 1 · Opening --------------------------------------------------------- */

.panel-open {
  position: relative;
}

.open-title {
  margin-top: var(--s-3);
}

.open-statement {
  margin-top: var(--s-5);
}

.open-meta {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.74rem;
  font-weight: 500;
  gap: 0.7rem;
  letter-spacing: 0.18em;
  margin: var(--s-6) 0 0;
  text-transform: uppercase;
}

.scroll-cue {
  animation: cue 2.6s var(--ease-out) infinite;
  background: var(--text-muted);
  bottom: clamp(1.6rem, 4vh, 2.75rem);
  height: 2.4rem;
  left: 50%;
  position: absolute;
  transform-origin: top;
  width: 1px;
}

@keyframes cue {
  0%   { opacity: 0; transform: scaleY(0); }
  40%  { opacity: 0.9; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

/* --- 2 · The setting ----------------------------------------------------- */

.venue-name {
  font-size: clamp(3rem, 10vw, 8rem);
  margin-top: var(--s-3);
}

.venue-place {
  color: var(--text-soft);
  font-size: clamp(0.88rem, 1.5vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  margin: 0.9rem 0 0;
  text-transform: uppercase;
}

.scale {
  border-top: 1px solid var(--border);
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  margin-top: var(--s-6);
  padding-top: var(--s-5);
}

.numeral-label {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  margin-top: 0.9rem;
}

.kickoffs {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.kickoff {
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.scale-times .numeral-label {
  margin-top: 1.15rem;
}

/* --- 3 · The bracket ----------------------------------------------------- */

/* A convergence, read left to right: eight places -> two semi-finals -> a
   final. Not redesigned in this pass — only made legible: the stage labels were
   0.64rem muted, the slot numbers were muted AND at 0.55 opacity (2.07:1 in
   light mode, effectively invisible), and the rules that carry the whole
   diagram were the faintest in the system. */
.bracket {
  align-items: start;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, 1fr);
  margin-top: var(--s-5);
}

.bracket-zones {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zone,
.bracket-stage {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.zone-name {
  border-top: 1px solid var(--border-strong);
  color: var(--text-soft);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  margin-bottom: 0.6rem;
  padding-top: 0.8rem;
  text-transform: uppercase;
}

/* An empty slot is deliberate: the eight places are real, the schools are not
   confirmed. A named placeholder would be a fabrication. Numbering them makes
   the emptiness read as a standings table waiting to be filled. */
.slot {
  align-items: center;
  border-bottom: 1px solid var(--border-strong);
  display: flex;
  height: clamp(2.1rem, 4.6vh, 2.75rem);
}

.slot-index {
  color: var(--text-muted);
  font-feature-settings: 'tnum' 1;
  font-size: 0.76rem;
  font-weight: 400;
  /* No opacity. It compounded with --text-muted and put these numerals below
     any usable contrast in both themes. */
}

.bracket-stage {
  position: relative;
}

.bracket-stage::before {
  color: var(--border-strong);
  content: '→';
  font-size: 0.95rem;
  left: clamp(-2rem, -2.4vw, -1.1rem);
  position: absolute;
  top: clamp(2.2rem, 5vh, 2.9rem);
}

.bracket-final .zone-name {
  border-top-color: var(--accent);
  color: var(--accent);
}

.bracket-final .slot {
  border-bottom-color: var(--accent);
  height: clamp(2.6rem, 6vh, 3.4rem);
}

/* --- 4 · The standard ---------------------------------------------------- */

.standard {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
}

.standard-item {
  border-top: 1px solid var(--border);
  padding: var(--s-4) clamp(1.5rem, 3vw, 2.5rem) var(--s-4) 0;
}

.standard-index {
  color: var(--text-muted);
  display: block;
  font-feature-settings: 'tnum' 1;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  /* Opacity removed — see .slot-index. */
}

.standard-label {
  display: block;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.15;
  margin-top: var(--s-2);
}

.standard-detail {
  color: var(--text-muted);
  display: block;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
  margin-top: var(--s-1);
  max-width: 30ch;
}

/* --- 5 · The nights ------------------------------------------------------ */

.nights {
  display: grid;
  gap: clamp(1.4rem, 2.6vw, 2.5rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
}

.night {
  border-top: 1px solid var(--border);
  padding-top: var(--s-4);
}

.night-final {
  border-top-color: var(--accent);
}

.night-day {
  display: block;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.88;
}

.night-final .night-day {
  color: var(--accent);
}

.night-stage {
  color: var(--text-muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  margin-top: 0.85rem;
  text-transform: uppercase;
}

.night-note {
  color: var(--text-soft);
  display: block;
  font-size: 0.76rem;
  font-weight: 400;
  margin-top: 0.45rem;
}

/* --- 6 · The ambition ---------------------------------------------------- */

.panel-split {
  align-items: start;
  display: grid;
  gap: clamp(2.25rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.split-lead .panel-title {
  max-width: 14ch;
}

.split-statement {
  margin-top: var(--s-5);
  max-width: 28ch;
}

.split-body {
  padding-top: clamp(0.4rem, 2.5vh, 1.6rem);
}

.markets {
  list-style: none;
  margin: 0;
  padding: 0;
}

.market {
  align-items: baseline;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  justify-content: space-between;
  padding: var(--s-4) 0;
}

.market-live {
  border-top-color: var(--accent);
  color: var(--text);
}

.market-name {
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.032em;
  line-height: 1.05;
}

.market-note {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.market-live .market-note {
  color: var(--accent);
}

.split-foot {
  margin-top: var(--s-5);
  max-width: 46ch;
}

/* --- 7 · The path -------------------------------------------------------- */

.path {
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
}

.step {
  border-top: 1px solid var(--border);
  padding-top: var(--s-4);
  position: relative;
}

.step::before {
  background: var(--border-strong);
  content: '';
  height: 5px;
  left: 0;
  position: absolute;
  top: -3px;
  width: 5px;
}

.step:last-child::before {
  background: var(--accent);
}

.step-index {
  color: var(--text-muted);
  display: block;
  font-feature-settings: 'tnum' 1;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.step-label {
  display: block;
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.15;
  margin-top: var(--s-2);
}

.step-detail {
  color: var(--text-muted);
  display: block;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.5;
  margin-top: var(--s-1);
}

/* --- 8 · Close ----------------------------------------------------------- */

.panel-close {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.panel-close .statement {
  margin: var(--s-3) auto 0;
}

.close-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  justify-content: center;
  margin-top: var(--s-6);
}

/* --- Formato · spec sheet ------------------------------------------------ */

/* The whole page now resolves to the scale: eyebrow -> --s-3 -> heading ->
   --s-5 -> block, rows at --s-4, closing note at --s-6. Previously each of
   these carried its own hand-picked clamp, which is why the page read as
   almost-aligned rather than aligned. */
.spec {
  margin: var(--s-5) 0 0;
  max-width: 52rem;
}

.spec-row {
  border-top: 1px solid var(--border);
  padding: var(--s-4) 0;
}

.spec-row dd {
  font-size: clamp(0.98rem, 1.5vw, 1.15rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.5;
  margin: 0;
  max-width: 54ch;
}

/* --- Calendario · timeline ----------------------------------------------- */

.timeline {
  display: grid;
  gap: clamp(1.4rem, 2.8vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
}

.tl-node {
  border-top: 1px solid var(--border);
  padding-top: var(--s-4);
  position: relative;
}

.tl-knockout {
  border-top-color: var(--border-strong);
}

.tl-final {
  border-top-color: var(--accent);
}

.tl-marker {
  background: var(--border-strong);
  border-radius: 50%;
  height: 5px;
  left: 0;
  position: absolute;
  top: -3px;
  width: 5px;
}

.tl-final .tl-marker {
  background: var(--accent);
}

.tl-day {
  display: block;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-size: clamp(2.6rem, 5.5vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.tl-final .tl-day {
  color: var(--accent);
}

.tl-weekday {
  color: var(--text-muted);
  display: block;
  font-size: 0.76rem;
  font-weight: 400;
  margin-top: 0.55rem;
  text-transform: capitalize;
}

.tl-stage {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: var(--s-2);
}

.tl-detail {
  color: var(--text-muted);
  display: block;
  font-feature-settings: 'tnum' 1;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 0.35rem;
}

.tl-note {
  color: var(--accent);
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-top: 0.6rem;
  text-transform: uppercase;
}

/* --- Topbar -------------------------------------------------------------- */

/* Weightless over the opening statement; it takes on its surface only once the
   deck has started moving. Chrome should never compete with the first slide. */
.topbar {
  align-items: center;
  background: transparent;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto 1fr auto;
  left: 0;
  padding: 1.05rem var(--gutter);
  position: fixed;
  right: 0;
  top: 0;
  transition: background-color 240ms ease, backdrop-filter 240ms ease;
  z-index: 20;
}

.topbar.is-lifted {
  backdrop-filter: saturate(140%) blur(14px);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
}

.topbar-brand {
  align-items: center;
  display: inline-flex;
}

.topbar-brand .mg-logo {
  max-height: 22px;
}

/* Tighter and more even than before: the items were set at a 3vw gap that grew
   to 2.2rem on a wide screen, which read as three unrelated links rather than
   as one navigation. */
.topbar-nav {
  display: flex;
  gap: clamp(1.4rem, 2.2vw, 2rem);
  justify-content: center;
}

.topbar-nav a {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding-bottom: 2px;
  position: relative;
  text-decoration: none;
  transition: color 180ms ease;
}

.topbar-nav a:hover {
  color: var(--text-soft);
}

/* The active state was a colour change alone, which is nearly invisible against
   muted text. A hairline under the item marks position without shouting. */
.topbar-nav a.is-active {
  color: var(--text);
}

.topbar-nav a.is-active::after {
  background: var(--text);
  bottom: -3px;
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
}

.topbar-tools {
  align-items: center;
  display: flex;
  gap: 0.7rem;
  justify-self: end;
}

.logout-form {
  margin: 0;
}

.logout-btn {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0;
  transition: color 160ms ease;
}

.logout-btn:hover {
  color: var(--text);
}

/* --- Footer -------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.74rem;
  font-weight: 500;
  gap: 0.8rem;
  justify-content: space-between;
  letter-spacing: 0.1em;
  margin: 0 auto;
  max-width: 84rem;
  padding: var(--s-4) var(--gutter) var(--s-5);
  text-transform: uppercase;
}

/* --- Access gate --------------------------------------------------------- */

.gate {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100svh;
  padding: 2rem;
}

.gate-card {
  max-width: 19rem;
  width: 100%;
}

.gate-mark {
  display: inline-flex;
  margin-bottom: var(--s-6);
}

.gate-mark .mg-logo {
  max-height: 30px;
}

.gate-title {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.035em;
  margin: 0;
}

.gate-note {
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 400;
  margin: 0.5rem 0 var(--s-6);
}

.gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.gate-form .fact-label {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gate-form input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  color: var(--text);
  padding: 0.6rem 0;
  transition: border-color 160ms ease;
}

.gate-form input:focus {
  border-bottom-color: var(--accent);
  outline: none;
}

.gate-error {
  color: var(--danger);
  font-size: 0.8rem;
  margin: 0;
}

.gate-submit {
  background: var(--text);
  border: 0;
  border-radius: 999px;
  color: var(--bg);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  margin-top: var(--s-3);
  padding: 0.7rem 1rem;
  transition: opacity 160ms ease;
}

.gate-submit:hover {
  opacity: 0.82;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1000px) {
  .bracket {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.6rem, 3.5vh, 2.4rem);
  }

  .bracket-stage {
    display: grid;
    gap: 0.3rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bracket-stage .zone-name {
    grid-column: 1 / -1;
  }

  .bracket-stage::before {
    content: none;
  }

  .panel-split {
    gap: var(--s-5);
    grid-template-columns: minmax(0, 1fr);
  }

  .path {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }
}

@media (max-width: 760px) {
  .deck {
    scroll-snap-type: none;
  }

  .panel {
    min-height: 0;
    padding: clamp(4rem, 9vh, 5.25rem) 0 clamp(2.25rem, 5vh, 3rem);
  }

  .topbar {
    gap: 0.6rem;
    grid-template-columns: auto auto;
    grid-template-areas: 'brand tools' 'nav nav';
  }

  .topbar-brand { grid-area: brand; }
  .topbar-tools { grid-area: tools; }

  .topbar-nav {
    grid-area: nav;
    justify-content: flex-start;
  }

  .bracket-zones {
    grid-template-columns: minmax(0, 1fr);
  }

  .nights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .path {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .deck {
    scroll-snap-type: none;
  }

  .scroll-cue {
    animation: none;
    opacity: 0.4;
  }
}