/* ===================================================================
   Solutions · Brands — page-specific layer.
   Loads AFTER base.css (tokens, reset, primitives, buttons, nav, footer).
   Shares the Solutions design system with solutions-entertainment.css and
   solutions-sports.css: dark default, .section-light blocks flip to cream +
   field green via base.css's token swap, and .hl follows --accent (electric
   green on dark, field green on light). The beat visuals are pure CSS/markup
   — real art can drop into the same .s-art slots later.
   =================================================================== */

.hl { color: var(--accent); }

/* Shared section primitives ----------------------------------------- */
.s-block { padding: 14vh 0; position: relative; }
.s-block-inner { max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px); }

.s-split {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.05fr);
  gap: 6vw;
  align-items: center;
}
/* reverse column order: visual on the left, copy on the right */
.s-split-rl .s-art { order: -1; }

.s-stack-center { display: flex; flex-direction: column; align-items: center; gap: 7vh; }

/* band-flow — the content bands, in normal document flow.

   This was a "paper-stack": every band pinned with position:sticky at exactly
   100vh, sliding over the previous one, with a scroll-snap in the page JS
   settling between them.

   It was removed because of what 100vh cost. Measured on the Sports page,
   which carried the same construct, content filled 58-72% of each pinned band
   — about two screens of the page empty by construction. The height could not
   simply be reduced: the snap math was one viewport per paper, so a shorter
   band pushed every later pin point out of position. Pinning and the empty
   space were the same decision.

   Worse for the reader, a band that is exactly the viewport can never show
   what is coming. Bands in flow end above the fold and the next one peeks,
   which is what actually pulls someone down a long page.

   What did NOT go with it: the reveal-on-scroll, the word-stagger headlines,
   the IQ tag stagger. That was always the motion here; the pinning was
   scaffolding around it.

   Several rules elsewhere in this file existed only to squeeze a band into
   one viewport — height caps on the IQ and Engage art, tightened IQ card
   padding. Those are gone too: in flow the art can run at its natural size,
   which fills the band with content instead of leaving a void around it. If
   you are tempted to reintroduce a fixed height, that is the trade you are
   making. */
.band-flow > .s-block { padding-block: 8vh; }

.s-art-img, .s-hero-art-img { display: block; width: 100%; height: auto; }

.eyebrow { display: block; margin-bottom: 26px; }

.s-headline {
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.02;
  max-width: 22ch;
  margin-bottom: 22px;
}
.s-copy-center .s-headline { max-width: 24ch; margin-left: auto; margin-right: auto; }

.s-body {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--dim);
  max-width: 52ch;
}
.s-copy-center { text-align: center; }
.s-body-center { margin-left: auto; margin-right: auto; max-width: 64ch; }

/* ===================================================================
   HERO
   =================================================================== */
.s-hero {
  position: relative;
  background: #000;
  padding: 22vh 0 0;
  overflow: hidden;
  border-bottom: 1px solid var(--hair);
  isolation: isolate;
}
.s-hero-grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(ellipse at 30% 30%, black 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, black 0%, transparent 72%);
}
.s-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px);
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(320px, 1fr);
  gap: 4vw;
  align-items: center;
  padding-bottom: 10vh;
}
/* Hero art column — holds the designed entertainment composition (transparent
   PNG → WebP, sits on the black signal-grid canvas). */
.s-hero-art { position: relative; display: flex; align-items: center; justify-content: center; }

.breadcrumb {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--dim);
  margin-bottom: 30px;
}
.breadcrumb a { color: var(--dim); transition: color .2s var(--ease); }
.breadcrumb a:hover { color: var(--text); }
.crumb-sep { color: var(--dim-2); }

.s-hero-headline { margin-bottom: 30px; }
.s-hero-lead {
  display: block;
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1.04;
  color: var(--text);
}
/* "Entertainment" is a long single word sharing the row with the art column —
   dial the clamp back so it never overflows the copy column on any viewport. */
.s-hero-sport {
  display: block;
  font-size: clamp(36px, 5.6vw, 84px);
  line-height: .9;
  margin-top: .06em;
}
.s-hero-sub {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.5;
  color: var(--dim);
  max-width: 46ch;
  margin-bottom: 30px;
}

.aud-line {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 18px;
  margin-bottom: 38px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dim);
}
.aud-line li { display: inline-flex; align-items: center; }
.aud-line li:not(:last-child)::after {
  content: "·"; margin-left: 18px; color: var(--accent);
}

.s-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Customer strip */
.customer-strip {
  position: relative; z-index: 2;
  margin: 0 max(5vw, calc((100vw - var(--max)) / 2 + 72px));
  border-top: 1px solid var(--hair);
  padding: 30px 0 40px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 32px;
}
.customer-marks {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 28px;
}
.customer-marks li {
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: clamp(15px, 1.5vw, 20px); letter-spacing: .03em;
  color: var(--text); opacity: .55;
  transition: opacity .2s var(--ease), color .2s var(--ease);
}
.customer-marks li:hover { opacity: 1; color: var(--accent); }

/* ---- Hero entrance: each line wipes in left→right, staggered top→bottom;
   words fade-rise on top. Auto-plays on load; disabled under reduced motion. */
.s-hero-lead .hl-line { display: block; }

/* The settled state uses a NEGATIVE inset so it leaves room for glyph
   overshoot: the display faces' ink box is taller than their line box, so a
   settled `inset(0 0 0 0)` shaves the curve off the bottom of the big hero
   word (the flat-bottomed "S"). Only the right edge animates — the wipe.
   clip-path can't transition to `none`; `em` scales with the clamped sizes. */
@keyframes heroTextIn {
  from { clip-path: inset(-0.4em 100% -0.4em -0.4em); transform: translateX(-18px); }
  to   { clip-path: inset(-0.4em);                    transform: translateX(0); }
}
@keyframes heroWordRise {
  from { opacity: 0; transform: translateY(0.5em); }
  to   { opacity: 1; transform: none; }
}
.s-hero-lead .hw, .s-hero-sport .hw {
  display: inline-block;
  animation: heroWordRise .6s cubic-bezier(.16,1,.3,1) both;
}
.s-hero-lead .hl-line:nth-child(1) .hw { animation-delay: calc(.30s + var(--i) * 70ms); }
.s-hero-lead .hl-line:nth-child(2) .hw { animation-delay: calc(.42s + var(--i) * 70ms); }
.s-hero-sport .hw                       { animation-delay: calc(.56s + var(--i) * 60ms); }

@keyframes heroPrintReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes heroPrintBar {
  0%   { left: 0;    opacity: 0; }
  10%  { opacity: .55; }
  90%  { opacity: .55; }
  100% { left: 100%; opacity: 0; }
}

.s-hero-copy .breadcrumb,
.s-hero-lead .hl-line,
.s-hero-sport,
.s-hero-sub,
.aud-line,
.s-hero-ctas {
  animation: heroTextIn .7s cubic-bezier(.16,1,.3,1) both;
}
.s-hero-copy .breadcrumb            { animation-delay: .15s; }
.s-hero-lead .hl-line:nth-child(1)  { animation-delay: .30s; }
.s-hero-lead .hl-line:nth-child(2)  { animation-delay: .42s; }
.s-hero-sport                       { animation-delay: .56s; animation-duration: .85s; }
.s-hero-sub                         { animation-delay: .85s; }
.aud-line                           { animation-delay: .98s; }
.s-hero-ctas                        { animation-delay: 1.12s; }

/* Hero art prints in left→right behind a glowing print-head line that tracks
   the leading edge — the same entrance solutions-sports.css,
   solutions-entertainment.css and solutions-live-events.css use, so every
   vertical hero reads as one system. */
.s-hero-art-img {
  animation: heroPrintReveal 1.5s cubic-bezier(.45,0,.12,1) .5s both;
}
.s-hero-art::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 1px;
  background: var(--accent);
  box-shadow: 0 0 7px 0 rgba(182,245,0,.35);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  animation: heroPrintBar 1.5s cubic-bezier(.45,0,.12,1) .5s both;
}

@media (prefers-reduced-motion: reduce) {
  .s-hero-copy .breadcrumb,
  .s-hero-lead .hl-line,
  .s-hero-sport,
  .s-hero-sub,
  .aud-line,
  .s-hero-ctas,
  .s-hero-art-img { animation: none; }
  .s-hero-lead .hw, .s-hero-sport .hw { animation: none; }
  .s-hero-art::after { display: none; }
}

/* ===================================================================
   BEAT 1 — "ONE PLATFORM" convergence visual (every source → one library)
   =================================================================== */
.converge {
  position: relative;
  aspect-ratio: 1.25 / 1;
  border: 1px solid var(--hair);
  background: var(--bg-2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 32px;
  overflow: hidden;
}

#fans .s-headline { max-width: 40ch; }
#fans .s-body { max-width: 92ch; }


/* ===================================================================
   BEAT 4 — IQ SUITE: framed asset + resolving tags, definition cards
   =================================================================== */
.iq-head {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-bottom: 40px;
}
.iq-eyebrow { margin-bottom: 0; display: inline-flex; align-items: center; gap: 12px; }
.iq-eyebrow::before {
  content: ""; width: 9px; height: 9px; background: var(--accent); flex: 0 0 auto;
}
.iq-headline { max-width: 34ch; margin-bottom: 56px; }

/* Even columns: the 0.8fr was sized for the tall CSS .iq-frame. The
   composition that replaced it is landscape, so it needs the width to keep its
   detail panel legible — same reason solutions-entertainment.css evens out. */
.iq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: start; }
.iq-asset { display: flex; align-items: flex-start; justify-content: center; }

/* The intelligence composition carries its own tags and detail panel, so it
   goes straight into the .s-art slot — no CSS frame, no positioned .iq-tag
   overlays. Capped by width in the column; it used to be capped by HEIGHT on
   top of that, to stop the row driving the band past a single viewport back
   when bands were pinned to one. In flow it runs at its natural size. */
.iq-asset .s-art-img { max-width: 100%; }

.iq-detail { display: flex; flex-direction: column; }
.iq-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair); border-left: 1px solid var(--hair);
}
.iq-card {
  border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  padding: 24px 26px;
}
.iq-card h3 {
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: 20px; letter-spacing: .01em; color: var(--text); margin-bottom: 12px;
}
.iq-card p {
  font-family: var(--body); font-weight: 400;
  font-size: 14px; line-height: 1.5; color: var(--dim);
}
.reveal .iq-card {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.reveal.is-in .iq-card { opacity: 1; transform: none; }
.reveal.is-in .iq-card:nth-child(1) { transition-delay: .20s; }
.reveal.is-in .iq-card:nth-child(2) { transition-delay: .32s; }
.reveal.is-in .iq-card:nth-child(3) { transition-delay: .44s; }
.iq-body { margin-top: 28px; max-width: none; }

/* ===================================================================
   BEAT 5 — ENGAGE: shares solutions-sports' Engage artwork.

   Brands has its own light-band cut of the Engage artwork with real
   transparency, so it sits straight on the cream — no dark stage, and the
   band sequence's light/dark alternation is untouched.
   =================================================================== */
.fan-stage { display: flex; justify-content: center; }
.fan-img { display: block; width: 100%; height: auto; max-width: min(100%, 900px); }


/* ===================================================================
   BAND FIT — no band may fill the viewport
   ===================================================================
   In flow, a band taller than the screen shows nothing of the next one, and
   the peek is the whole point of unpinning. Two shapes push past it: the IQ
   row, whose artwork is the tallest on the page, and the engage band,
   which stacks its copy ABOVE its art instead of beside it.

   Measured at 1440x813 before these rules, iq ran 771px (42px of peek) and engage 942px — 129px PAST the screen.

   These caps are viewport-relative, NOT fixed pixels. That distinction is the
   whole lesson of the pinned layout that used to live here: it capped art to
   fit a 100vh box, so the art was hostage to a height the content never
   chose. A vh cap just keeps the band proportional to whatever screen it
   lands on — at a taller window the art grows with it.

   34vh is not a guess: it is the value solutions-sports.css uses, and it is
   what brings this page's tallest band to 646px — the same as the tallest
   band on Sports. The four Solutions pages are meant to scroll alike. */
.band-flow #iq .iq-asset .s-art-img { width: auto; max-height: 44vh; }
#engage .s-stack-center { gap: 5vh; }
.band-flow #engage .fan-img { width: auto; max-height: 34vh; margin: 0 auto; }
/* ===================================================================
   SILO STAGE — full black, generous negative space, never explained
   =================================================================== */
.silo {
  position: relative; background: #000; color: #fff;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.silo-track { height: auto; }
.silo-stage {
  position: relative;
  min-height: 78vh;
  overflow: hidden;
  isolation: isolate;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: 8vh 5vw;
  gap: 5vh;
}
.silo-stage::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 56% 60% at 50% 50%, rgba(182,245,0,.10), transparent 70%);
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.silo.is-in .silo-stage::before { opacity: 1; transition-delay: .55s; }

.silo-hex {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, transparent 26%, #000 88%);
          mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, transparent 26%, #000 88%);
}
.silo-line {
  position: relative; z-index: 1;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: .98;
  font-size: clamp(34px, 5.4vw, 82px);
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .7s var(--ease-out);
}
.silo-line:nth-of-type(1) { transform: translateX(-60vw); }
.silo-line:nth-of-type(2) { transform: translateX(60vw); }
.silo.is-in .silo-line { transform: none; opacity: 1; }

.silo-line .hl { color: var(--accent); }
@keyframes siloIgnite {
  0%   { text-shadow: 0 0 0 rgba(182,245,0,0); }
  45%  { text-shadow: 0 0 46px rgba(182,245,0,.95), 0 0 16px rgba(182,245,0,.85); }
  100% { text-shadow: 0 0 20px rgba(182,245,0,.42); }
}
.silo.is-in .hl { animation: siloIgnite 1.1s var(--ease) both; animation-delay: .8s; }
.silo-quote { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .silo-line { opacity: 1; transform: none; transition: none; }
  .silo-line .hl { color: #B6F500; animation: none; text-shadow: 0 0 20px rgba(182,245,0,.42); }
  .silo-stage::before { opacity: 1; transition: none; }
  .silo-track { height: auto; }
  .silo-stage { position: static; height: auto; min-height: 60vh; }
}

/* ===================================================================
   CLOSE
   =================================================================== */
.s-close {
  background: #000; padding: 18vh 0; text-align: center;
  border-top: 1px solid var(--hair);
}
.s-close-inner { max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px); }
.close-stack {
  font-family: 'Oswald', sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: -0.015em; line-height: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.close-line {
  font-size: clamp(40px, 6.6vw, 104px);
  color: #fff;
  opacity: 0; transform: translateY(30px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.close-line.is-shown { opacity: 1; transform: none; }
.close-line.final { margin-top: 28px; }
.close-line.final .hl { color: #B6F500; }

.close-typing-line { color: #fff; }
.typewriter { display: inline-block; white-space: nowrap; }
.typewriter-word { color: #fff; font-variant-ligatures: none; }
.typewriter-caret {
  display: inline-block;
  width: .055em; height: .82em;
  margin-left: .06em; vertical-align: -0.06em;
  background: #B6F500;
  animation: typewriter-blink 1.05s steps(2, end) infinite;
}
@keyframes typewriter-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .close-line { transition: none; }
  .typewriter-caret { animation: none; opacity: .6; }
}
.s-close-ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 48px; }
.signature { margin-top: 44px; color: var(--dim-2); font-size: 11px; letter-spacing: .24em; }

/* ===================================================================
   SCROLL REVEAL
   =================================================================== */
/* The fade-up is on the INNER wrapper, never on the section.

   It used to sit on .reveal itself, which meant an unrevealed section was
   fully transparent — background included. That was invisible while every
   band was pinned at 100vh, because you never saw a band before you were
   inside it. In flow it broke the thing flow is for: the band peeking at the
   bottom of the screen was still at opacity 0, so instead of the next
   section's colour arriving you saw the dark body background through it. A
   cream band read as a black gap.

   Fading .s-block-inner instead keeps the section's own background painted at
   all times. The peek shows the real colour of what is coming, and the
   content animates in on top of it as you scroll. Everything keyed off
   .reveal.is-in (the IQ cards, the combo headlines) is unaffected — the class
   still lands on the section. */
.reveal > .s-block-inner {
  opacity: 0; transform: translateY(40px);
  transition: opacity .8s var(--ease-out), transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal.is-in > .s-block-inner { opacity: 1; transform: none; }

.reveal .s-art {
  opacity: 0;
  clip-path: inset(-80px 100% -80px -80px);
  transform: scale(1.07);
  transition: opacity .8s var(--ease-out) .2s,
              clip-path 1.1s cubic-bezier(.16,1,.3,1) .2s,
              transform 1.1s cubic-bezier(.16,1,.3,1) .2s;
}
.reveal.is-in .s-art { opacity: 1; clip-path: inset(-80px); transform: none; }

/* Scroll-in headline / body — "combo": wipe left→right while words fade-rise. */
/* Negative inset on the three non-animating edges, as in `heroTextIn` above —
   a settled `inset(0 0 0 0)` shaves the ink of the section headlines. */
[data-anim="combo"] {
  clip-path: inset(-0.4em 100% -0.4em -0.4em);
  transition: clip-path .85s cubic-bezier(.16,1,.3,1);
}
.reveal.is-in [data-anim="combo"] { clip-path: inset(-0.4em); }
[data-anim="combo"] .w {
  display: inline-block;
  opacity: 0; transform: translateY(1em);
  transition: opacity .6s var(--ease-out), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i) * 70ms);
  will-change: transform, opacity;
}
.reveal.is-in [data-anim="combo"] .w { opacity: 1; transform: none; }
.s-body[data-anim="combo"] { transition-delay: .18s; }
.s-body[data-anim="combo"] .w {
  transform: translateY(0.5em);
  transition-delay: calc(.22s + var(--i) * 10ms);
}

@media (prefers-reduced-motion: reduce) {
  .reveal > .s-block-inner { opacity: 1; transform: none; transition: none; }
  .reveal .s-art { opacity: 1; clip-path: none; transform: none; transition: none; }
  .reveal .iq-card { opacity: 1; transform: none; transition: none; }
  [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-anim] .w { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1024px) {
  .s-split { gap: 5vw; }
}

@media (max-width: 900px) {
  .s-hero { padding-top: 18vh; }
  .s-hero-inner { grid-template-columns: 1fr; gap: 7vh; }
  .s-hero-art-img { max-width: 520px; margin: 0 auto; }
  .s-split, .s-split-rl { grid-template-columns: 1fr; gap: 48px; }
  .s-split .s-art, .s-split-rl .s-art { order: -1; }   /* visuals lead when stacked */
  .s-split .s-copy { order: 1; }
  .iq-grid { grid-template-columns: 1fr; gap: 40px; }
  .iq-headline { max-width: 24ch; }
  .iq-asset { order: -1; }
  /* Grid/flex items default to min-width:auto and won't shrink below content —
     let every stacked column shrink so nothing overflows the viewport. */.iq-asset,
.iq-detail,
.iq-card,
.s-copy,
.s-art,
.s-hero-copy,
.s-hero-art { min-width: 0; }
  .s-art-img { max-width: 100%; }
}

@media (max-width: 600px) {
  .s-block { padding: 11vh 0; }
  .iq-cards { grid-template-columns: 1fr; }
  .iq-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .silo-track { height: auto; }
  .silo-stage { position: static; height: auto; min-height: 84vh; gap: 11vh; }
  .silo-line { white-space: normal; }
  .silo-line:nth-of-type(1), .silo-line:nth-of-type(2) { transform: none; }
}

@keyframes heroFeedIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ===================================================================
   PROOF / RECEIPTS — stat band. Same component as solutions-sports:
   3 × 2 grid, each metric fades up in sequence, detail on hover.
   =================================================================== */
.receipts-head { margin-bottom: 7vh; }
.receipts-head .s-headline { max-width: 26ch; }

/* The line that lands after the metrics. */

@media (max-width: 600px) {
}
@media (prefers-reduced-motion: reduce) {
}