/* Aimlink | "Ready. Set. Aim." the start call of the film intro, fifth version: quiet, with a little more motion
   (motion: assets/film/ras.js).
   One file for two places: the start page (film.js seeks the timeline by scroll) and the HyperFrames composition in
   videos/ready-set-aim/ (the same timeline, rendered to video). Everything is sized in em of the word size, so the host only
   sets font-size on .ras.
   The scene: the empty range (the film's first frame without the shooter; the logo's push ends on the same picture), and in
   the middle of the screen one line. Its letters come into focus one after the other and close up; a hairline under the line
   fills a third per word; the full stop of AIM. is a lime dot that a fine sight draws itself round; a light passes over
   the words once. Then the line goes out of focus and the range dissolves into the film: the shooter appears where he stands. */
.ras {
  --ras-lime: #A0E020; --ras-snow: #F4F6F8;
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; contain: layout paint;
  font-family: "Teko", "Teko Fallback", sans-serif; font-weight: 500; line-height: 0.8; text-transform: uppercase; letter-spacing: 0.035em;
  color: var(--ras-snow);
}
.ras-cam, .ras-shade { position: absolute; inset: 0; }
.ras-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }   /* the start page frames it from film.js (style.objectPosition) */
/* the haze drifts a little, and a soft shade stands behind the line so it reads on the lit haze */
.ras-fog { position: absolute; left: -20%; top: 8%; width: 140%; height: 84%; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(120, 170, 210, 0.13), rgba(120, 170, 210, 0)); }
.ras-fog.b { top: 30%; background: radial-gradient(closest-side, rgba(160, 224, 32, 0.035), rgba(160, 224, 32, 0)); }
.ras-shade { background: radial-gradient(60% 46% at 50% 50%, rgba(8, 14, 20, 0.58), rgba(8, 14, 20, 0) 100%); opacity: 0; }

/* the line: three words side by side in the middle of the screen (one under the other on a tall screen) */
.ras-line { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.34em; }
.ras-wbox { position: relative; display: block; white-space: nowrap; padding-top: 0.09em; }
.ras-wbox.aim { color: var(--ras-lime); }
.ras-ch { display: inline-block; opacity: 0; }
/* layers only while the line plays: film.js sets .is-on a moment before it and takes it off after (the HyperFrames composition
   has its own copy of this file) */
.ras.is-on .ras-wbox { will-change: opacity; }
.ras.is-on .ras-ch { will-change: transform, opacity, filter; }
/* a slow machine (film.js measures it, .film.is-lite): the letters come in without their blur, the rest is the same */
.film.is-lite .ras-ch { filter: none !important; }
/* the light that passes over a word once: a white copy of it, seen only through a narrow slanted band that travels */
.ras-gl {
  position: absolute; left: 0; top: 0; padding-top: 0.09em; color: #fff; opacity: 0; --ras-sx: 100%;
  -webkit-mask-image: linear-gradient(105deg, transparent 0 42%, #000 50%, transparent 58% 100%); mask-image: linear-gradient(105deg, transparent 0 42%, #000 50%, transparent 58% 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: var(--ras-sx) 0; mask-position: var(--ras-sx) 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* the ripple a word sends out under itself when it lands */
.ras-plop { position: absolute; left: 50%; top: 100%; width: 1.7em; height: 0.34em; margin: -0.2em 0 0 -0.85em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(244, 246, 248, 0.8); opacity: 0; }
.ras-wbox.aim .ras-plop { box-shadow: inset 0 0 0 1px var(--ras-lime); }

/* the hairline under the line: it fills a third per word */
.ras-rule { position: absolute; left: 50%; top: 50%; width: 5.3em; height: 1px; margin: 0.62em 0 0 -2.65em; background: rgba(244, 246, 248, 0.22); }
.ras-fill { position: absolute; inset: 0; background: var(--ras-lime); transform-origin: 0 50%; }

/* the full stop of AIM. is drawn: a lime dot, the fine sight that draws itself round it, the ring it sends */
.ras-stop { position: relative; display: inline-block; width: 0.13em; height: 0.13em; margin-left: 0.05em; vertical-align: baseline; }
.ras-dot { position: absolute; inset: 0; border-radius: 50%; background: var(--ras-lime); }
.ras-sight { position: absolute; left: 50%; top: 50%; width: 0.62em; height: 0.62em; margin: -0.31em 0 0 -0.31em; overflow: visible; }
.ras-sight circle { fill: none; stroke: var(--ras-lime); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ras-sight path { fill: none; stroke: rgba(244, 246, 248, 0.85); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; }
.ras-ring { position: absolute; left: 50%; top: 50%; width: 0.62em; height: 0.62em; margin: -0.31em 0 0 -0.31em; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ras-lime); opacity: 0; }

@media (max-aspect-ratio: 4/5) {
  .ras-line { flex-direction: column; gap: 0.08em; }
  .ras-rule { width: 2.5em; margin: 1.5em 0 0 -1.25em; }
}