/*
 * Well Invented film: a 32 s commercial about how we build, played by CSS
 * between the hero and the startup section. Every animation starts when film.js
 * adds .is-playing and is delayed by its scene's --start, so the whole film can
 * loop, pause and seek as one timeline (tools/film/render.mjs seeks it frame by
 * frame to export the MP4s).
 * Sizes use cqw (1% of the stage width) so the composition is the same on a
 * phone, a desktop and a 1920×1080 export.
 * Without .is-playing (no JS, reduced motion, before it scrolls in) the scenes
 * just stack and the last one, the end card, is the poster.
 */

.film {
  background: #0b0b0d;
}

.film-stage {
  position: relative;
  width: min(100%, calc((100svh - 120px) * 16 / 9));
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  container-type: inline-size;
  background: var(--paper);
}

.film-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.film-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Scene transitions: each scene wipes in over the previous one, which is
   hidden once covered. */
.film.is-playing .film-scene {
  animation: var(--wipe, film-cut) .9s cubic-bezier(.7, 0, .2, 1) both, film-out 1ms linear both;
  animation-delay: var(--start), calc(var(--end) + .9s);
}

.film.is-playing .film-frame {
  animation: film-push calc(var(--end) - var(--start) + .9s) linear both;
  animation-delay: var(--start);
}

/* Elements arrive --d after their scene starts. */
.film.is-playing .film-in {
  animation: var(--in, film-rise) .9s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--start) + var(--d, .4s));
}

.film.is-paused *,
.film.is-paused *::before,
.film.is-paused *::after {
  animation-play-state: paused !important;
}

/* Even line lengths, without a single word left alone on the last line. */
.film :is(.film-line, .film-tagline, .film-innovation-title, .film-end-text) {
  text-wrap: balance;
}

/* Opening: the logo builds itself. */
.film-open {
  background: var(--paper);
}

.film-logo {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  direction: ltr;
  font-family: "Manrope", sans-serif;
}

.film-logo-mark {
  display: flex;
  align-items: flex-end;
  gap: .55cqw;
  height: 8.6cqw;
}

.film-logo-mark i {
  display: block;
  width: 2.3cqw;
  border-radius: 2.3cqw 2.3cqw .3cqw .3cqw;
  background: var(--ink);
}

.film-logo-mark i:nth-child(1) { height: 5.2cqw; }
.film-logo-mark i:nth-child(2) { height: 8.6cqw; }
.film-logo-mark i:nth-child(3) { height: 6.9cqw; }

.film-logo-word {
  font: 700 5.2cqw/.72 "Manrope", sans-serif;
  letter-spacing: -.06em;
  text-align: left;
  text-transform: lowercase;
}

.film-logo-word em {
  font: 500 4.9cqw/.9 var(--serif);
}

.film.is-playing .film-logo-mark i {
  transform-origin: bottom;
  animation: film-grow .7s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--start) + .2s);
}

.film.is-playing .film-logo-mark i:nth-child(2) { animation-delay: calc(var(--start) + .35s); }
.film.is-playing .film-logo-mark i:nth-child(3) { animation-delay: calc(var(--start) + .5s); }

.film.is-playing .film-open .film-logo-word {
  animation: film-rise .9s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--start) + .9s);
}

/* The message, in big type on black. */
.film-message {
  --wipe: film-wipe-side;
  --in: film-slam;
  background: var(--ink);
  color: var(--paper);
}

.film-line {
  margin: 0;
  font-size: 8cqw;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.055em;
}

.film-line em {
  font-family: var(--serif);
  font-weight: 500;
}

.film-underline {
  background: linear-gradient(var(--lime), var(--lime)) no-repeat left 0 bottom .04em / 0 .12em;
}

.film.is-playing .film-underline {
  animation: film-underline .8s cubic-bezier(.6, 0, .2, 1) forwards;
  animation-delay: calc(var(--start) + 2.3s);
}

/* The process: one scene per step, the step on one side, what it does on the other. */
.film-step {
  flex-direction: row;
  justify-content: space-between;
  gap: 4cqw;
  padding: 0 8cqw;
  text-align: start;
}

.film-copy {
  width: 38cqw;
}

.film-step-number {
  display: inline-block;
  margin: 0 0 1.6cqw;
  padding: .45cqw 1.1cqw;
  border: max(.12cqw, 1px) solid currentColor;
  border-radius: 999px;
  font: 500 max(1.15cqw, 9px) var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.film-step-title {
  margin: 0;
  font-size: 7.6cqw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.06em;
}

.film-tagline {
  max-width: 34cqw;
  margin: 1.8cqw 0 0;
  font-size: max(1.85cqw, 11px);
  line-height: 1.45;
}

/* The visuals are abstract interfaces (code, checklists, pipelines): they read
   left to right in every language. */
.film-visual {
  position: relative;
  flex: none;
  width: 34cqw;
  height: 26cqw;
  direction: ltr;
}

/* 01 Understand: scattered observations converge into one idea. */
.film-step-understand {
  --wipe: film-wipe-arch;
  background: var(--paper);
}

.film-visual-understand i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.4cqw;
  height: 1.4cqw;
  margin: -.7cqw;
  border-radius: 50%;
  background: var(--ink);
  opacity: .3;
  transform: translate(var(--x), var(--y));
}

.film-visual-understand b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5.4cqw;
  height: 5.4cqw;
  margin: -2.7cqw;
  border-radius: 50%;
  background: var(--lime);
}

.film.is-playing .film-visual-understand i {
  animation: film-converge 1.3s cubic-bezier(.6, 0, .2, 1) both;
  animation-delay: calc(var(--start) + .5s + var(--o));
}

.film.is-playing .film-visual-understand b {
  animation: film-pop .5s cubic-bezier(.2, .8, .2, 1.4) both, film-ring 1.1s ease-out infinite;
  animation-delay: calc(var(--start) + 1.7s), calc(var(--start) + 2.1s);
}

/* 02 Design: a screen is drawn, then the cursor presses its button. */
.film-step-design {
  --wipe: film-wipe-side;
  background: var(--blue);
  color: #fff;
}

.film-wire {
  position: absolute;
  inset: 0;
  border: .25cqw solid rgba(255, 255, 255, .9);
  border-radius: 1.4cqw;
}

.film-wire i,
.film-wire b {
  position: absolute;
  display: block;
}

.film-wire-bar {
  inset: 0 0 auto;
  height: 3cqw;
  border-bottom: .2cqw solid rgba(255, 255, 255, .5);
}

.film-wire-side {
  left: 2cqw;
  top: 5cqw;
  bottom: 2cqw;
  width: 7cqw;
  border-radius: .6cqw;
  background: rgba(255, 255, 255, .18);
}

.film-wire-block {
  left: 11cqw;
  right: 2cqw;
  height: 3.6cqw;
  border-radius: .6cqw;
  background: rgba(255, 255, 255, .28);
}

.film-wire-block:nth-child(3) { top: 5cqw; }
.film-wire-block:nth-child(4) { top: 9.8cqw; }
.film-wire-block:nth-child(5) { top: 14.6cqw; }

.film-wire-button {
  left: 11cqw;
  top: 20cqw;
  width: 9cqw;
  height: 3cqw;
  border: .2cqw solid #fff;
  border-radius: 1.5cqw;
}

.film-cursor {
  position: absolute;
  left: 17cqw;
  top: 21.6cqw;
  width: 2.4cqw;
  height: 3cqw;
  background: #fff;
  clip-path: polygon(0 0, 0 78%, 24% 60%, 42% 100%, 56% 94%, 38% 56%, 70% 56%);
  filter: drop-shadow(0 .3cqw .4cqw rgba(0, 0, 0, .35));
}

.film.is-playing .film-wire {
  animation: film-draw 1s ease both;
  animation-delay: calc(var(--start) + .4s);
}

.film.is-playing .film-wire :where(i, b) {
  animation: film-pop .45s cubic-bezier(.2, .8, .2, 1.2) both;
}

.film.is-playing .film-wire-bar { animation-delay: calc(var(--start) + 1s); }
.film.is-playing .film-wire-side { animation-delay: calc(var(--start) + 1.12s); }
.film.is-playing .film-wire-block:nth-child(3) { animation-delay: calc(var(--start) + 1.24s); }
.film.is-playing .film-wire-block:nth-child(4) { animation-delay: calc(var(--start) + 1.36s); }
.film.is-playing .film-wire-block:nth-child(5) { animation-delay: calc(var(--start) + 1.48s); }

.film.is-playing .film-wire-button {
  animation: film-pop .45s cubic-bezier(.2, .8, .2, 1.2) both, film-press .3s ease-out both;
  animation-delay: calc(var(--start) + 1.6s), calc(var(--start) + 2.45s);
}

.film.is-playing .film-cursor {
  animation: film-cursor .8s cubic-bezier(.3, .7, .3, 1) both, film-click .25s ease-in-out both;
  animation-delay: calc(var(--start) + 1.6s), calc(var(--start) + 2.4s);
}

/* 03 Build: code is written in an editor. */
.film-step-build {
  --wipe: film-wipe-circle;
  background: var(--ink);
  color: var(--paper);
}

.film-editor {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
  padding: 5cqw 3cqw 3cqw;
  border-radius: 1.4cqw;
  background: #1d2128;
  box-shadow: 0 2.4cqw 6cqw rgba(0, 0, 0, .45);
}

.film-editor-dots {
  position: absolute;
  left: 2cqw;
  top: 1.6cqw;
  display: flex;
  gap: .7cqw;
}

.film-editor-dots i {
  width: .95cqw;
  height: .95cqw;
  border-radius: 50%;
  background: #ff5f57;
}

.film-editor-dots i:nth-child(2) { background: #febc2e; }
.film-editor-dots i:nth-child(3) { background: #28c840; }

.film-editor > i {
  display: block;
  width: var(--w);
  height: 1.15cqw;
  margin-left: calc(var(--l) * 1.4cqw);
  border-radius: .6cqw;
  background: var(--c);
  opacity: .9;
}

.film-caret {
  display: block;
  width: .55cqw;
  height: 1.8cqw;
  background: var(--lime);
}

.film.is-playing .film-editor > i {
  animation: film-type .35s steps(6, end) both;
  animation-delay: calc(var(--start) + .7s + var(--o));
}

.film.is-playing .film-caret {
  animation: film-blink .8s steps(1, end) infinite;
  animation-delay: var(--start);
}

/* 04 Validate: every check passes, then the release gets its badge. */
.film-step-validate {
  --wipe: film-wipe-arch;
  background: var(--lime);
  color: var(--ink);
}

.film-checks {
  position: absolute;
  inset: 2cqw 6cqw 2cqw 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3cqw;
  padding: 0 3cqw;
  border-radius: 1.6cqw;
  background: #fff;
  box-shadow: 0 2cqw 5cqw rgba(17, 20, 23, .18);
}

.film-checks i {
  position: relative;
  display: block;
  height: 1.4cqw;
  margin-left: 4.8cqw;
  border-radius: .7cqw;
  background: rgba(17, 20, 23, .12);
}

.film-checks i:nth-child(1) { width: 70%; }
.film-checks i:nth-child(2) { width: 52%; }
.film-checks i:nth-child(3) { width: 78%; }
.film-checks i:nth-child(4) { width: 60%; }

.film-checks i::before {
  content: "";
  position: absolute;
  left: -4.8cqw;
  top: 50%;
  width: 2.8cqw;
  height: 2.8cqw;
  margin-top: -1.4cqw;
  border: .3cqw solid rgba(17, 20, 23, .3);
  border-radius: 50%;
}

.film-checks i::after {
  content: "";
  position: absolute;
  left: -3.85cqw;
  top: 50%;
  width: .75cqw;
  height: 1.35cqw;
  margin-top: -.9cqw;
  border: solid var(--lime);
  border-width: 0 .3cqw .3cqw 0;
  transform: rotate(45deg) scale(0);
}

.film-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 9cqw;
  height: 9cqw;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 1.2cqw 3cqw rgba(17, 20, 23, .3);
}

.film-badge::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 2.2cqw;
  height: 4cqw;
  border: solid var(--lime);
  border-width: 0 .8cqw .8cqw 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.film.is-playing .film-checks i {
  animation: film-bar .45s ease-out both;
  animation-delay: calc(var(--start) + .5s + var(--o));
}

.film.is-playing .film-checks i::before {
  animation: film-check-ink .35s ease-out both;
  animation-delay: calc(var(--start) + 1.1s + var(--o));
}

.film.is-playing .film-checks i::after {
  animation: film-tick .3s ease-out both;
  animation-delay: calc(var(--start) + 1.2s + var(--o));
}

.film.is-playing .film-badge {
  animation: film-pop .6s cubic-bezier(.2, .8, .2, 1.5) both;
  animation-delay: calc(var(--start) + 2.3s);
}

/* 05 Launch: the pipeline lights up node by node, then the product is live. */
.film-step-launch {
  --wipe: film-wipe-side;
  background: #fff;
  color: var(--ink);
}

.film-visual-launch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4cqw;
}

.film-pipeline {
  display: flex;
  align-items: center;
  width: 100%;
}

.film-pipeline i {
  flex: none;
  width: 5cqw;
  height: 5cqw;
  border: .35cqw solid var(--ink);
  border-radius: 50%;
}

.film-pipeline span {
  position: relative;
  flex: 1;
  height: .35cqw;
  background: rgba(17, 20, 23, .15);
}

.film-pipeline span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}

.film-live {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  margin: 0;
  padding: 1cqw 2cqw;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: max(1.7cqw, 11px);
  font-weight: 700;
}

.film-live b {
  width: 1.2cqw;
  height: 1.2cqw;
  border-radius: 50%;
  background: var(--lime);
}

.film.is-playing .film-pipeline i {
  animation: film-node .4s ease-out both;
}

.film.is-playing .film-pipeline i:nth-child(1) { animation-delay: calc(var(--start) + .6s); }
.film.is-playing .film-pipeline i:nth-child(3) { animation-delay: calc(var(--start) + 1.3s); }
.film.is-playing .film-pipeline i:nth-child(5) { animation-delay: calc(var(--start) + 2s); }

.film.is-playing .film-pipeline span::before {
  animation: film-fill .4s ease-in-out both;
}

.film.is-playing .film-pipeline span:nth-child(2)::before { animation-delay: calc(var(--start) + .9s); }
.film.is-playing .film-pipeline span:nth-child(4)::before { animation-delay: calc(var(--start) + 1.6s); }

.film.is-playing .film-live {
  animation: film-pop .5s cubic-bezier(.2, .8, .2, 1.3) both;
  animation-delay: calc(var(--start) + 2.25s);
}

.film.is-playing .film-live b {
  animation: film-ring 1s ease-out infinite;
  animation-delay: calc(var(--start) + 2.4s);
}

/* 06 Improve: the curve keeps going up. */
.film-step-improve {
  --wipe: film-wipe-circle;
  background: var(--blue);
  color: #fff;
}

.film-visual-improve svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.film-axis {
  fill: none;
  stroke: rgba(255, 255, 255, .45);
  stroke-width: .25;
}

.film-curve {
  fill: none;
  stroke: var(--lime);
  stroke-width: .8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}

.film-visual-improve circle {
  fill: #fff;
  transform-box: fill-box;
  transform-origin: center;
}

.film-visual-improve circle:last-child {
  fill: var(--lime);
}

.film.is-playing .film-curve {
  animation: film-line 1.6s cubic-bezier(.5, 0, .3, 1) both;
  animation-delay: calc(var(--start) + .6s);
}

.film.is-playing .film-visual-improve circle {
  animation: film-pop .35s cubic-bezier(.2, .8, .2, 1.4) both;
  animation-delay: calc(var(--start) + .7s + var(--o));
}

/* Innovation: light in motion. */
.film-innovation {
  --wipe: film-wipe-arch;
  gap: 1.6cqw;
  padding: 0 10cqw;
  background:
    radial-gradient(circle at 18% 22%, rgba(169, 139, 255, .85), transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(255, 106, 168, .75), transparent 50%),
    radial-gradient(circle at 55% 95%, rgba(255, 196, 107, .8), transparent 55%),
    #0b0b12;
  background-size: 160% 160%;
  color: #fff;
}

.film-innovation-title {
  margin: 0;
  font-size: 6.8cqw;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.05em;
}

.film-sparks i {
  position: absolute;
  width: 2.2cqw;
  height: 2.2cqw;
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
}

.film-sparks i:nth-child(1) { left: 14%; top: 22%; }
.film-sparks i:nth-child(2) { left: 80%; top: 18%; width: 1.4cqw; height: 1.4cqw; }
.film-sparks i:nth-child(3) { left: 72%; top: 72%; }
.film-sparks i:nth-child(4) { left: 24%; top: 76%; width: 1.4cqw; height: 1.4cqw; }
.film-sparks i:nth-child(5) { left: 50%; top: 12%; width: 1.1cqw; height: 1.1cqw; }

.film.is-playing .film-innovation {
  animation: var(--wipe) .9s cubic-bezier(.7, 0, .2, 1) both, film-out 1ms linear both, film-aurora 3s ease-in-out infinite alternate;
  animation-delay: var(--start), calc(var(--end) + .9s), var(--start);
}

.film.is-playing .film-sparks i {
  animation: film-twinkle 1.2s ease-in-out infinite both;
  animation-delay: calc(var(--start) + .6s);
}

.film.is-playing .film-sparks i:nth-child(2) { animation-delay: calc(var(--start) + .9s); }
.film.is-playing .film-sparks i:nth-child(3) { animation-delay: calc(var(--start) + 1.1s); }
.film.is-playing .film-sparks i:nth-child(4) { animation-delay: calc(var(--start) + .75s); }
.film.is-playing .film-sparks i:nth-child(5) { animation-delay: calc(var(--start) + 1.3s); }

/* End card, also the poster before the film plays. */
.film-end {
  --wipe: film-wipe-circle;
  gap: 1.6cqw;
  padding: 0 12cqw;
  background: var(--ink);
  color: var(--paper);
}

.film-end .film-logo-mark i {
  background: var(--paper);
}

.film-end-title {
  margin: 0;
  font-size: 6cqw;
  font-weight: 800;
  letter-spacing: -.05em;
}

.film-end-text {
  max-width: 50cqw;
  margin: 0 0 .6cqw;
  font-size: max(1.8cqw, 12px);
  line-height: 1.4;
  opacity: .85;
}

.film-cta {
  display: inline-flex;
  align-items: center;
  gap: 1.4cqw;
  padding: max(1.2cqw, 10px) max(1.8cqw, 14px);
  background: var(--lime);
  color: var(--ink);
  font-size: max(1.3cqw, 12px);
  font-weight: 700;
}

.film-url {
  margin: 0;
  font: 500 max(1.1cqw, 10px) var(--mono);
  letter-spacing: .06em;
  opacity: .7;
}

/* Process rail: the six steps, lit one after the other while they play. */
.film-rail {
  position: absolute;
  top: 2.4cqw;
  left: 50%;
  display: flex;
  gap: 2.4cqw;
  margin: 0;
  padding: .9cqw 2cqw;
  border-radius: 999px;
  background: rgba(17, 20, 23, .38);
  backdrop-filter: blur(8px);
  color: #fff;
  font: 500 max(1.05cqw, 8px) var(--mono);
  letter-spacing: .06em;
  list-style: none;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%);
}

.film-rail li {
  position: relative;
  padding-inline-start: 1.4cqw;
  opacity: .5;
}

.film-rail li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: .7cqw;
  height: .7cqw;
  margin-top: -.35cqw;
  border-radius: 50%;
  background: var(--lime);
  transform: scale(0);
}

.film.is-playing .film-rail {
  animation: film-rail 18s linear both;
  animation-delay: 7s;
}

.film.is-playing .film-rail li {
  animation: film-step-on 3s linear both;
  animation-delay: var(--at);
}

.film.is-playing .film-rail li::before {
  animation: film-step-dot .35s ease-out both;
  animation-delay: var(--at);
}

/* Controls: story-style progress and a pause button. */
.film-ui {
  position: absolute;
  inset-inline: 2.6cqw;
  bottom: 2.2cqw;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding-block: .7cqw;
  padding-inline: 1.4cqw .7cqw;
  border-radius: 999px;
  background: rgba(17, 20, 23, .38);
  backdrop-filter: blur(8px);
}

.film-progress {
  display: flex;
  flex: 1;
  gap: .45cqw;
}

.film-progress i {
  position: relative;
  flex: 1;
  height: max(.3cqw, 3px);
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .3);
}

.film-progress i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}

html[dir="rtl"] .film-progress i::before {
  transform-origin: right;
}

.film.is-playing .film-progress i::before {
  animation: film-fill var(--len) linear both;
  animation-delay: var(--start);
}

.film-toggle {
  position: relative;
  flex: none;
  width: max(2.6cqw, 30px);
  height: max(2.6cqw, 30px);
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

/* Play icon by default, pause icon while playing. */
.film-toggle::before {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--ink);
  transform: translate(-50%, -50%);
}

.film.is-playing:not(.is-paused) .film-toggle::before {
  left: 50%;
  width: 10px;
  height: 12px;
  border: 0;
  border-inline: 3px solid var(--ink);
}

.film-toggle:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

/* The film's master clock: when it ends, film.js restarts the loop. */
.film-clock {
  position: absolute;
  width: 0;
  height: 0;
}

.film.is-playing .film-clock {
  animation: film-clock calc(var(--duration, 32) * 1s) linear both;
}

/* Arabic: Noto Kufi without tracking; the logo stays as it is. */
html[lang="ar"] .film :is(.film-line, .film-step-number, .film-step-title, .film-tagline, .film-innovation-title, .film-end-title, .film-end-text, .film-url, .film-rail) {
  letter-spacing: 0;
}

html[lang="ar"] .film .film-line em {
  font-family: var(--sans);
  font-style: normal;
}

html[lang="ar"] .film :is(.film-line, .film-step-title, .film-innovation-title) {
  line-height: 1.35;
}

html[dir="rtl"] .film-underline {
  background-position: right 0 bottom .04em;
}

html[dir="rtl"] :is(.film-message, .film-step-design, .film-step-launch) {
  --wipe: film-wipe-side-rtl;
}

@keyframes film-cut { from, to { opacity: 1; } }
@keyframes film-out { to { visibility: hidden; } }
@keyframes film-wipe-side { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes film-wipe-side-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes film-wipe-arch { from { clip-path: inset(100% 30% 0 30% round 50% 50% 0 0); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes film-wipe-circle { from { clip-path: circle(0% at 50% 55%); } to { clip-path: circle(120% at 50% 55%); } }
@keyframes film-push { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes film-rise { from { opacity: 0; transform: translateY(3cqw); } }
@keyframes film-slam { from { opacity: 0; transform: translateY(45%) scale(1.06); } }
@keyframes film-grow { from { transform: scaleY(0); } }
@keyframes film-underline { to { background-size: 100% .12em; } }
@keyframes film-pop { from { opacity: 0; transform: scale(0); } }
@keyframes film-converge {
  0% { opacity: .3; transform: translate(var(--x), var(--y)); }
  70% { opacity: .7; }
  100% { opacity: 0; transform: translate(0, 0) scale(.3); }
}
@keyframes film-ring {
  from { box-shadow: 0 0 0 0 rgba(209, 242, 27, .6); }
  to { box-shadow: 0 0 0 2.4cqw rgba(209, 242, 27, 0); }
}
@keyframes film-draw {
  from { clip-path: inset(0 100% 100% 0 round 1.4cqw); }
  to { clip-path: inset(0 0 0 0 round 1.4cqw); }
}
@keyframes film-press { to { background: var(--lime); border-color: var(--lime); } }
@keyframes film-cursor { from { opacity: 0; transform: translate(9cqw, 5cqw); } 30% { opacity: 1; } }
@keyframes film-click { 50% { transform: scale(.82); } }
@keyframes film-type { from { width: 0; } }
@keyframes film-blink { 50% { opacity: 0; } }
@keyframes film-bar { from { width: 0; } }
@keyframes film-check-ink { to { background: var(--ink); border-color: var(--ink); } }
@keyframes film-tick { to { transform: rotate(45deg) scale(1); } }
@keyframes film-node { to { background: var(--lime); } }
@keyframes film-fill { to { transform: scaleX(1); } }
@keyframes film-line { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes film-aurora { from { background-position: 0 0; } to { background-position: 100% 100%; } }
@keyframes film-twinkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}
@keyframes film-rail { 0%, 100% { opacity: 0; } 3%, 97% { opacity: 1; } }
@keyframes film-step-on { 0%, 100% { opacity: .5; } 8%, 92% { opacity: 1; } }
@keyframes film-step-dot { to { transform: scale(1); } }
@keyframes film-clock { from { opacity: 0; } to { opacity: 0; } }