/* =========================================================================
   perfectGF — animation service landing page
   Direction: ink and newsprint. The page chrome stays achromatic so the only
   colour on screen comes from the work itself; a single vermilion seal is the
   one accent, spent twice. Screentone (halftone dots) is the structural
   texture, borrowed from the medium being sold.
   ========================================================================= */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-400-800.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --ink: #0c0b10;
  --ink-2: #131219;
  --ink-3: #1c1a24;
  --rule: #292632;
  --paper: #f3f0e7;
  --dim: #9b96a6;
  --seal: #d8402f;

  --gut: clamp(20px, 5vw, 64px);
  --band: clamp(76px, 10vw, 148px);
  --max: 1240px;

  --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Screentone: the dot grid that shades a manga panel. */
  --tone: radial-gradient(circle at 1px 1px, rgba(243, 240, 231, .13) 1px, transparent 1.6px);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(15px, .55vw + 13.4px, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }

a { color: inherit; }

h1, h2, h3 {
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: .96;
  margin: 0;
  text-wrap: balance;
}

.shell { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 99;
  background: var(--paper); color: var(--ink); padding: .7rem 1rem;
  font: 500 .8rem/1 var(--mono);
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; }

/* --- Shared type roles --------------------------------------------------- */

.eyebrow {
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0;
}

.lede {
  font-size: clamp(1rem, .5vw + .92rem, 1.18rem);
  line-height: 1.55;
  color: #cfcad8;
  max-width: 46ch;
}

.band-head { display: grid; gap: 1.1rem; max-width: 62ch; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.band-head h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 500 .78rem/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  padding: .95rem 1.5rem;
  border: 1px solid var(--rule);
  text-decoration: none; white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.btn--solid { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--solid:hover { background: #fff; transform: translateY(-2px); }
.btn--ghost:hover { border-color: var(--paper); background: rgba(243, 240, 231, .06); }

/* =========================================================================
   Top bar
   ========================================================================= */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: clamp(1rem, 4vw, 3rem);
  padding: .85rem var(--gut);
  background: rgba(12, 11, 16, .72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.topbar[data-stuck='true'] { border-bottom-color: var(--rule); background: rgba(12, 11, 16, .93); }

.mark {
  font-stretch: 118%; font-weight: 800; font-size: 1.02rem;
  letter-spacing: -.02em; text-decoration: none; line-height: 1;
  display: flex; align-items: baseline; gap: .5rem;
}
.mark b { font-weight: 800; }
.mark span { color: var(--dim); font-weight: 400; }
.mark em {
  font: 400 .62rem/1 var(--mono); font-style: normal;
  letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
  border-left: 1px solid var(--rule); padding-left: .5rem;
}

.topbar nav { margin-left: auto; display: flex; gap: clamp(.9rem, 2.2vw, 2rem); }
.topbar nav a {
  font: 400 .76rem/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim); text-decoration: none;
  padding: .4rem 0; border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.topbar nav a:hover { color: var(--paper); border-bottom-color: var(--seal); }
.topbar .btn { padding: .7rem 1.1rem; }

@media (max-width: 860px) {
  .topbar nav { display: none; }
  .topbar .btn { margin-left: auto; }
}
@media (max-width: 520px) {
  /* Stacked buttons of different widths read as an accident; matching them
     turns the pair back into one deliberate block. */
  .cta-row .btn { flex: 1 1 100%; justify-content: center; }
  .topbar { padding-inline: 16px; }
  .mark em { display: none; }
  .topbar .btn { font-size: .66rem; padding: .6rem .75rem; letter-spacing: .06em; }
}

/* =========================================================================
   Hero — the signature: live webtoon strips drifting behind the thesis
   ========================================================================= */

.hero { position: relative; overflow: clip; border-bottom: 1px solid var(--rule); }

.strips {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 10px; padding: 0 10px;
  pointer-events: none;
}
.strip { overflow: hidden; }
/* The run holds the same clips twice, so translating it by exactly half its
   height lands on the start of the second copy and the loop never jumps.
   The spacing therefore lives on each clip, not in a grid gap — a gap would
   add one extra interval to the whole and break that exact half. */
.strip__run { display: block; will-change: transform; }
/* The drift only starts once the second copy has been cloned in; with one copy
   it would scroll off into empty space. No JS, no clone, no animation — the
   strips simply sit still, which is a fine still life. */
.strips[data-ready='true'] .strip__run { animation: drift var(--dur, 90s) linear infinite; }
.strips[data-ready='true'] .strip:nth-child(even) .strip__run { animation-direction: reverse; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
.strip video {
  width: 100%; height: auto; margin-bottom: 10px;
  background: var(--ink-2);
  filter: saturate(.92) contrast(1.03);
}

/* The scrim: the strips are atmosphere, the words are the message. */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, var(--ink) 14%, rgba(12, 11, 16, .82) 46%, rgba(12, 11, 16, .5) 72%, rgba(12, 11, 16, .88) 100%),
    linear-gradient(to bottom, var(--ink) 0%, transparent 22%, transparent 74%, var(--ink) 100%);
}

.hero__copy {
  position: relative; z-index: 2;
  max-width: var(--max); margin-inline: auto;
  padding: clamp(5rem, 15vh, 10rem) var(--gut) clamp(3rem, 7vh, 5rem);
  display: grid; gap: 1.5rem; justify-items: start;
}
.hero__copy > * { max-width: 100%; }

h1 {
  font-size: clamp(2.9rem, 8.6vw, 7.4rem);
  font-stretch: 118%;
  text-transform: uppercase;
  letter-spacing: -.035em;
}
h1 .line { display: block; overflow: hidden; }
h1 .line > span { display: block; }
/* The width axis carries the contrast, not a slant: Archivo has no italic, so
   an <i> here would be a browser-synthesised oblique — the giveaway of a font
   being asked for something it does not have. */
h1 .thin { font-weight: 400; font-stretch: 88%; font-style: normal; letter-spacing: -.005em; }

.hero .lede { max-width: 40ch; }

.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .6rem; }

/* Spec rail — the honest numbers, set like a production sheet.
   The 1px gap over a --rule background draws the hairline grid between cells
   without any cell needing its own borders. */
.rail-wrap {
  position: relative; z-index: 2;
  max-width: var(--max); margin-inline: auto;
  padding: 0 var(--gut) clamp(2.5rem, 6vh, 4rem);
}
.rail {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  margin: 0; background: var(--rule); border: 1px solid var(--rule);
}
.rail > div { background: var(--ink); padding: 1.1rem 1.2rem; }
.rail dt { font: 400 .68rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
/* These cells hold words now, not figures: a phrase set at headline size wraps
   into a block and stops reading as one beat, so the type comes down and the
   qualifier drops to its own line. */
.rail dd { margin: .45rem 0 0; font-stretch: 110%; font-weight: 800; font-size: clamp(1.15rem, 1.9vw, 1.5rem); letter-spacing: -.02em; line-height: 1.15; }
.rail dd small { display: block; margin-top: .35rem; font-weight: 400; font-size: .7rem; font-family: var(--mono); font-stretch: 100%; color: var(--dim); letter-spacing: .04em; }

/* Fewer, wider columns as the viewport narrows. The constraint is geometric:
   a column of width w holds clips about w/ratio tall, and one copy of the run
   has to stay taller than the hero or the loop opens a gap at the end of its
   travel. Keeping five columns while the page narrows is what breaks it —
   measured empty at 781px before this tier existed. */
@media (max-width: 1023px) {
  .strips { grid-template-columns: repeat(3, 1fr); }
  .strips .strip:nth-child(n+4) { display: none; }
}

@media (max-width: 780px) {
  /* Narrow screens have no side room: the strips stop sitting beside the words
     and go behind them, so the scrim turns from a side wipe into a flat veil.
     One full-width column is also six decoders instead of thirty, on the
     device least able to afford them. */
  .strips { grid-template-columns: 1fr; opacity: .5; }
  .strips .strip:nth-child(n+2) { display: none; }
  .hero::after {
    background:
      linear-gradient(to bottom, var(--ink) 0%, rgba(12, 11, 16, .58) 30%, rgba(12, 11, 16, .58) 70%, var(--ink) 100%);
  }
  .rail { grid-template-columns: 1fr; }
}

/* =========================================================================
   The cut — scanned panel wiped against the animated scene
   ========================================================================= */

.cut { padding: var(--band) 0; background: var(--ink-2); border-bottom: 1px solid var(--rule); }

.cut__stage {
  position: relative;
  display: grid; place-items: center;
  background: var(--ink); border: 1px solid var(--rule);
  padding: clamp(14px, 2.5vw, 34px);
  background-image: var(--tone); background-size: 7px 7px;
}
/* Bound BOTH axes. A webtoon panel is tall: sizing on width alone gives a
   frame around 1030px high, which is off-screen on a laptop — you cannot drag
   a handle you have to scroll to reach. calc() may divide by a unitless
   number, so the ratio arrives as two separate custom properties. */
.cut__frame {
  position: relative;
  --arw: 4; --arh: 3;
  aspect-ratio: var(--arw) / var(--arh);
  width: min(100%, 780px, calc(min(66vh, 620px) * var(--arw) / var(--arh)));
  overflow: hidden; background: #000;
  touch-action: pan-y;
  cursor: ew-resize;
}
.cut__frame img,
.cut__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cut__frame video { clip-path: inset(0 0 0 var(--wipe, 50%)); }

.cut__handle {
  position: absolute; top: 0; bottom: 0; left: var(--wipe, 50%);
  width: 2px; background: var(--paper); transform: translateX(-1px);
  pointer-events: none;
}
.cut__handle::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 2px solid var(--paper); border-radius: 50%;
  background: rgba(12, 11, 16, .55);
  backdrop-filter: blur(3px);
}
.cut__tag {
  position: absolute; top: 12px; z-index: 3;
  font: 500 .64rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  padding: .45rem .6rem; background: rgba(12, 11, 16, .72); border: 1px solid var(--rule);
}
.cut__tag--a { left: 12px; }
.cut__tag--b { right: 12px; }

/* Plain inline flow, not flex: these lines are one sentence of metadata with
   its own separators, and a flex gap would open a second space beside every
   inline <b> in it. */
.cut__meta {
  margin-top: 1.1rem;
  font: 400 .72rem/1.5 var(--mono); color: var(--dim);
}
.cut__meta b { color: var(--paper); font-weight: 500; }

.cut__picker { display: flex; gap: .6rem; margin-top: 1.4rem; flex-wrap: wrap; }
.cut__picker button {
  font: 500 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); background: transparent; border: 1px solid var(--rule);
  padding: .7rem .9rem; cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.cut__picker button:hover { color: var(--paper); border-color: var(--paper); }
.cut__picker button[aria-pressed='true'] { color: var(--ink); background: var(--paper); border-color: var(--paper); }

/* =========================================================================
   Work — the gallery, in the shape of the medium (uneven vertical panels)
   ========================================================================= */

.work { padding: var(--band) 0; border-bottom: 1px solid var(--rule); }

.work__head { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: end; justify-content: space-between; margin-bottom: 2.4rem; }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; }
.filters button {
  font: 500 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); background: transparent; border: 1px solid var(--rule);
  padding: .65rem .85rem; cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.filters button:hover { color: var(--paper); border-color: var(--paper); }
.filters button[aria-pressed='true'] { color: var(--ink); background: var(--paper); border-color: var(--paper); }

.grid { columns: 4 220px; column-gap: 14px; }
@media (max-width: 640px) { .grid { columns: 2 140px; column-gap: 10px; } }

.card {
  break-inside: avoid; margin-bottom: 14px;
  position: relative; display: block; width: 100%; padding: 0;
  background: var(--ink-2); border: 1px solid var(--rule);
  cursor: pointer; overflow: hidden;
  transition: border-color .3s, transform .3s;
}
.card:hover { border-color: #4a4557; transform: translateY(-3px); }
/* display:block is load-bearing — aspect-ratio is ignored on an inline box,
   and these wrappers are spans (a button may not contain a div). */
.card__media { display: block; position: relative; width: 100%; aspect-ratio: var(--ar, 3 / 4); background: var(--ink-3); }
.card__media img,
.card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__media video { opacity: 0; transition: opacity .35s; }
.card[data-playing='true'] .card__media video { opacity: 1; }
.card__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; gap: .6rem;
  padding: 1.6rem .6rem .5rem;
  font: 400 .64rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--paper);
  background: linear-gradient(to top, rgba(12, 11, 16, .88), transparent);
  opacity: 0; transition: opacity .3s;
}
.card:hover .card__bar, .card:focus-visible .card__bar { opacity: 1; }

/* =========================================================================
   Lightbox — where the sound finally plays
   ========================================================================= */

.viewer {
  position: fixed; inset: 0; z-index: 90;
  display: none; place-items: center;
  padding: clamp(12px, 4vw, 48px);
  background: rgba(6, 5, 9, .93);
  backdrop-filter: blur(8px);
}
.viewer[open], .viewer.is-open { display: grid; }
.viewer__box { position: relative; display: grid; gap: .9rem; max-height: 100%; }
.viewer video {
  max-width: min(92vw, 900px); max-height: 78vh; width: auto; height: auto;
  border: 1px solid var(--rule); background: #000;
}
.viewer__meta { margin: 0; font: 400 .72rem/1.5 var(--mono); color: var(--dim); }
.viewer__meta b { color: var(--paper); font-weight: 500; }
.viewer__close {
  position: absolute; top: -2.6rem; right: 0;
  font: 500 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--rule); color: var(--paper);
  padding: .6rem .8rem; cursor: pointer;
}
.viewer__close:hover { border-color: var(--paper); }

/* =========================================================================
   Process — a real sequence, so it is numbered
   ========================================================================= */

.process { padding: var(--band) 0; background: var(--ink-2); border-bottom: 1px solid var(--rule); }
.steps { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.step {
  display: grid; grid-template-columns: 4.5rem minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem); align-items: start;
  padding: clamp(1.5rem, 3.4vw, 2.4rem) 0;
  border-bottom: 1px solid var(--rule);
}
.step__no { font: 500 .78rem/1.4 var(--mono); color: var(--seal); letter-spacing: .1em; }
.step h3 { font-size: clamp(1.15rem, 2vw, 1.55rem); font-stretch: 108%; }
.step p { margin: 0; color: #c6c1d0; }
.step p + p { margin-top: .6rem; font: 400 .78rem/1.6 var(--mono); color: var(--dim); }
@media (max-width: 760px) {
  .step { grid-template-columns: 3rem minmax(0, 1fr); }
  .step p, .step__body { grid-column: 2; }
}

/* =========================================================================
   Scope — deliverables and the spec sheet
   ========================================================================= */

.scope { padding: var(--band) 0; border-bottom: 1px solid var(--rule); }
.scope__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem); }

.panelcard { border: 1px solid var(--rule); padding: clamp(1.3rem, 2.6vw, 2rem); background: var(--ink-2); }
.panelcard h3 { font-size: 1.15rem; font-stretch: 108%; margin-bottom: 1rem; }
.panelcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.panelcard li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .6rem; color: #c6c1d0; font-size: .95rem; }
.panelcard li::before { content: '—'; color: var(--seal); font-family: var(--mono); }

.spec { width: 100%; border-collapse: collapse; font: 400 .8rem/1.5 var(--mono); }
.spec th, .spec td { text-align: left; padding: .7rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.spec th { color: var(--dim); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; font-size: .68rem; width: 42%; }

/* =========================================================================
   FAQ
   ========================================================================= */

.faq { padding: var(--band) 0; background: var(--ink-2); border-bottom: 1px solid var(--rule); }
.qa { border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary {
  list-style: none; cursor: pointer;
  padding: 1.3rem 2.5rem 1.3rem 0; position: relative;
  font-stretch: 108%; font-weight: 800; font-size: clamp(1rem, 1.6vw, 1.2rem);
  letter-spacing: -.015em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '+'; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  font: 400 1.3rem/1 var(--mono); color: var(--seal);
}
.qa details[open] summary::after { content: '–'; }
.qa p { margin: 0 0 1.3rem; color: #c6c1d0; max-width: 68ch; }

/* =========================================================================
   Quote
   ========================================================================= */

.quote { padding: var(--band) 0; }
.quote__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 880px) { .quote__grid { grid-template-columns: 1fr; } }

.form { display: grid; gap: 1rem; }
.form__row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.field { display: grid; gap: .45rem; }
.field label { font: 400 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.field input, .field textarea, .field select {
  font: 400 .95rem/1.5 var(--display); color: var(--paper);
  background: var(--ink-2); border: 1px solid var(--rule);
  padding: .8rem .9rem; width: 100%; border-radius: 0;
  transition: border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--paper); outline: none; }
.field textarea { resize: vertical; min-height: 6.5rem; }
.form__note { font: 400 .72rem/1.6 var(--mono); color: var(--dim); }

.seal {
  display: inline-grid; place-items: center;
  width: 6.6rem; height: 6.6rem; padding: .4rem;
  border: 2px solid var(--seal); color: var(--seal);
  font: 500 .68rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  text-align: center; transform: rotate(-7deg);
}

/* =========================================================================
   Footer
   ========================================================================= */

footer { border-top: 1px solid var(--rule); padding: clamp(2.5rem, 6vw, 4rem) 0 3.5rem; }
.foot { display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; justify-content: space-between; align-items: start; }
.foot p { margin: 0; font: 400 .74rem/1.7 var(--mono); color: var(--dim); max-width: 62ch; }
.foot a { color: var(--paper); }

/* =========================================================================
   Motion — one orchestrated entrance, then quiet scroll reveals
   ========================================================================= */

.rise { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1); }
.rise.in { opacity: 1; transform: none; }

h1 .line > span { transform: translateY(105%); transition: transform .95s cubic-bezier(.16, .84, .28, 1); }
body.ready h1 .line > span { transform: none; }
body.ready h1 .line:nth-child(2) > span { transition-delay: .1s; }

.hero__copy .eyebrow,
.hero__copy .lede,
.hero__copy .cta-row,
.rail-wrap { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
body.ready .hero__copy .eyebrow { opacity: 1; transform: none; transition-delay: .05s; }
body.ready .hero__copy .lede { opacity: 1; transform: none; transition-delay: .32s; }
body.ready .hero__copy .cta-row { opacity: 1; transform: none; transition-delay: .44s; }
body.ready .rail-wrap { opacity: 1; transform: none; transition-delay: .56s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rise, h1 .line > span, .hero__copy .eyebrow, .hero__copy .lede, .hero__copy .cta-row, .rail-wrap { opacity: 1; transform: none; }
  .strip__run { animation: none; }
}