/* --------------------------------------------------------------------------
   The hero's drawn scene
   A suspension bridge over a bay, generated by scripts/build_hero_scene.py.
   The drawing carries no colour of its own: everything below this line that
   is not layout is palette, and the palette is what turns the same geometry
   into a night scene or a day one.
   -------------------------------------------------------------------------- */

.omb-hero {
  /* The scene is never narrower than 760px. On a phone it is cropped to its
     middle, which keeps both towers in frame instead of shrinking the whole
     bay into a strip 120px tall. */
  --omb-bleed: 0px;
  --omb-scene-w: calc(max(100vw, 760px) + 2 * var(--omb-bleed));
  --omb-scene-h: calc(var(--omb-scene-w) * 460 / 1440);
  /* How much of the scene shows below the content. */
  --omb-stage: calc(var(--omb-scene-h) * 0.7);

  /* ------------------------------------------------------------------
     Night: a violet dusk with a moon rising behind the cables and
     the deck strung with sodium lamps.
     ------------------------------------------------------------------ */
  --omb-star: #f1ecff;
  --omb-horizon: #ff7d6b;
  --omb-haze: #6a3c8f;
  --omb-orb-halo: #ffd9b0;
  --omb-moon: #fff2dc;
  --omb-moon-shade: #e2cdb0;
  --omb-sun: #fff6dc;
  --omb-cloud: #b9a3ff;
  --omb-cloud-shade: #8c77d6;
  --omb-wisp-opacity: 0.12;
  --omb-bird: #2c3a4f;
  --omb-hill-far: #2f2157;
  --omb-hill-rim: #7c62c9;
  --omb-hill-mid: #1c1438;
  --omb-city: #ffc37a;
  --omb-house: #f6f1e7;
  --omb-water-top: #4a2d6e;
  --omb-water-mid: #1f1740;
  --omb-water-deep: #0d0b1c;
  --omb-sheen: #d9a0c8;
  --omb-reflect: #09070f;
  --omb-ripple: rgba(170, 146, 255, 0.5);
  --omb-glint: #ffe6c2;
  --omb-boat: #0b0913;
  --omb-sail: #1a1528;
  --omb-bridge: #3d2f63;
  --omb-bridge-shade: #2a2047;
  --omb-lamp: #ffc27a;
  --omb-lamp-head: #fff0cf;
  --omb-necklace: #ffe7bd;
  --omb-car-body: #120e1e;
  --omb-headlight: #fff6dd;
  --omb-taillight: #ff4f5e;
  --omb-beacon: #ff4155;
  --omb-beacon-glow: rgba(255, 65, 85, 0.55);
  --omb-fog: #b8a2ff;
  --omb-fog-opacity: 0.14;
  --omb-shore: #06050b;
  --omb-firefly: #fff3b0;
  --omb-firefly-glow: rgba(255, 226, 120, 0.6);
  --omb-bridge-lit: #6d5aa8;
  --omb-far-top: #3a2a6b;
  --omb-far-base: #5b3f80;
  --omb-mid-top: #1e1640;
  --omb-mid-base: #2e2050;
  --omb-plane: #0d0b16;
  --omb-contrail: rgba(255, 255, 255, 0.85);
  --omb-headland: #150f2b;
  --omb-lh: #2b2249;
  --omb-lh-trim: #3c3061;
  --omb-lh-lamp: #fff1c9;
  --omb-beam: rgba(255, 236, 190, 0.55);
  --omb-bldg: #241b46;
  --omb-bldg-shade: #1a1336;
  --omb-ferry-hull: #0c0a15;
  --omb-ferry-stripe: #1f1836;
  --omb-ferry-cabin: #181330;
  --omb-ferry-win: #ffcf86;
  --omb-shore-top: #19132e;
  --omb-shore-base: #050409;
}

@media screen and (min-width: 60em) {
  .omb-hero {
    --omb-stage: clamp(9rem, calc(var(--omb-scene-h) * 0.6), 26rem);
  }
}

/* With a mouse, the layers also drift sideways with the pointer, so they
   are cut a little wider than the screen to keep their edges out of view. */
@media (hover: hover) and (pointer: fine) {
  .omb-hero {
    --omb-bleed: 18px;
  }
}

/* ------------------------------------------------------------------
   Day: late afternoon, the bridge in International Orange, because in
   daylight the drawing is allowed to look like what it is quoting.
   ------------------------------------------------------------------ */
[data-md-color-scheme="default"] .omb-hero {
  --omb-horizon: #ffd89c;
  --omb-haze: #fbe6c9;
  --omb-orb-halo: #ffd27a;
  --omb-sun: #ffefb8;
  --omb-cloud: #fff;
  --omb-cloud-shade: #dbe5f0;
  --omb-bird: #33445a;
  --omb-hill-far: #9fb8cf;
  --omb-hill-rim: #c9d9e8;
  --omb-hill-mid: #6d9585;
  --omb-water-top: #a9cde6;
  --omb-water-mid: #5b98c6;
  --omb-water-deep: #2d6899;
  --omb-sheen: #fff;
  --omb-reflect: #1f4f7a;
  --omb-ripple: rgba(236, 246, 255, 0.55);
  --omb-glint: #fffbef;
  --omb-boat: #f4f1ea;
  --omb-sail: #fff;
  --omb-bridge: #c0392b;
  --omb-bridge-shade: #93291f;
  --omb-lamp-head: #7e2419;
  --omb-car-body: #e9e5dc;
  --omb-beacon: #ff5a4f;
  --omb-beacon-glow: rgba(255, 90, 79, 0.3);
  --omb-fog: #fff;
  --omb-fog-opacity: 0.5;
  --omb-shore: #213629;
  --omb-bridge-lit: #e5654a;
  --omb-far-top: #93adc6;
  --omb-far-base: #c7d8e5;
  --omb-mid-top: #5d8876;
  --omb-mid-base: #93b3a3;
  --omb-plane: #5d6c80;
  --omb-headland: #4c7664;
  --omb-lh: #fbfaf6;
  --omb-lh-trim: #c0392b;
  --omb-lh-lamp: #3d5a78;
  --omb-bldg: #8ea2b8;
  --omb-bldg-shade: #74889f;
  --omb-ferry-hull: #f3f1ea;
  --omb-ferry-stripe: #2f7d5a;
  --omb-ferry-cabin: #fbfaf6;
  --omb-ferry-win: #3d5a78;
  --omb-shore-top: #4b7b4d;
  --omb-shore-base: #1c2f23;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.omb-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* The soft colour washes behind everything. */
.omb-hero__layer {
  position: absolute;
  top: -25%;
  right: 0;
  left: 0;
  height: 150%;
  will-change: transform;
}

.omb-hero__layer--glow-a {
  background-image: radial-gradient(ellipse 70% 55% at 20% 18%, var(--omb-glow-a), transparent 70%);
}

.omb-hero__layer--glow-b {
  background-image: radial-gradient(ellipse 55% 50% at 85% 42%, var(--omb-glow-b), transparent 70%);
}

.omb-hero {
  --omb-glow-a: rgba(140, 70, 230, 0.3);
  --omb-glow-b: rgba(230, 60, 140, 0.14);
}

[data-md-color-scheme="default"] .omb-hero {
  --omb-glow-a: rgba(255, 212, 146, 0.5);
  --omb-glow-b: rgba(116, 186, 240, 0.34);
}

/* Every scene layer is the same box — the scene's width, centred, sitting on
   the hero's bottom edge — so anything placed in percentages lands on the
   same spot of the drawing in every layer. */
.omb-scene,
.omb-scene__stage {
  position: absolute;
  bottom: 0;
  left: calc(50% - var(--omb-scene-w) / 2);
  width: var(--omb-scene-w);
  height: var(--omb-scene-h);
}

.omb-scene {
  line-height: 0;
  will-change: transform;
}

.omb-scene svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Sub-layers pinned to a region of the drawing: the generator gives them a
   top and height in percent, and their SVG fills them exactly. */
.omb-ripples,
.omb-glints,
.omb-necklace,
.omb-lane,
.omb-drift--fog,
.omb-flock,
.omb-boat,
.omb-sailing,
.omb-beacon,
.omb-firefly,
.omb-shoot,
.omb-plane-track,
.omb-plane,
.omb-nav,
.omb-contrail,
.omb-ferry-track,
.omb-ferry,
.omb-lighthouse,
.omb-beam,
.omb-flash {
  position: absolute;
}

.omb-ripples,
.omb-glints,
.omb-necklace,
.omb-plane-track,
.omb-ferry-track {
  left: 0;
  width: 100%;
}

.omb-ripples svg,
.omb-glints svg,
.omb-necklace svg {
  height: 100%;
}

/* One drawing, two times of day. */
body:not([data-md-color-scheme="default"]) .omb-hero .omb-d,
[data-md-color-scheme="default"] .omb-hero .omb-n,
[data-md-color-scheme="default"] .omb-scene--stars {
  display: none;
}

/* --------------------------------------------------------------------------
   Layers, far to near
   -------------------------------------------------------------------------- */

/* Stars fill the sky above the horizon, and fade out before they reach it.
   On a phone they are kept to the stage: above it the hero is text, and a
   star field the height of the whole page would cost more than it shows. */
.omb-scene--stars {
  top: 0;
  height: auto;
  bottom: calc(var(--omb-scene-h) * 0.42);
  color: var(--omb-star);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

@media screen and (max-width: 59.99em) {
  .omb-scene--stars {
    top: auto;
    height: calc(var(--omb-scene-h) * 0.62 + 6rem);
  }
}

.omb-stars {
  position: absolute;
  inset: 0;
}

.omb-scene .omb-stars {
  height: 100%;
}

.omb-horizon-stop {
  stop-color: var(--omb-horizon);
}

.omb-haze-stop {
  stop-color: var(--omb-haze);
}

.omb-halo-stop {
  stop-color: var(--omb-orb-halo);
}

.omb-moon {
  fill: var(--omb-moon);
}

.omb-moon__maria {
  fill: var(--omb-moon-shade);
  opacity: 0.45;
}

.omb-sun {
  fill: var(--omb-sun);
}

.omb-shoot {
  width: 7rem;
  height: 1.5px;
  margin-left: -7rem;
  background: linear-gradient(90deg, transparent, var(--omb-star));
  border-radius: 1px;
  opacity: 0;
  transform-origin: 100% 50%;
}

.omb-scene--clouds {
  color: var(--omb-cloud);
}

.omb-cloud__shade {
  fill: var(--omb-cloud-shade);
}

/* Group opacity, not per-shape: a wisp is overlapping ellipses, and shape
   by shape every overlap would show as a brighter seam. */
.omb-wisps {
  opacity: var(--omb-wisp-opacity);
}

.omb-drift {
  width: 200%;
}

.omb-flock {
  left: 0;
  width: 80px;
  height: 30px;
  color: var(--omb-bird);
}

.omb-bird {
  position: absolute;
  display: block;
  transform-origin: 50% 80%;
}

.omb-bird svg {
  overflow: visible;
}

.omb-scene--hills-far {
  color: var(--omb-hill-far);
}

.omb-rim {
  stroke: var(--omb-hill-rim);
  opacity: 0.5;
}

.omb-scene--hills-mid {
  color: var(--omb-hill-mid);
}

.omb-town.omb-n {
  fill: var(--omb-city);
}

.omb-town.omb-d {
  fill: var(--omb-house);
  opacity: 0.8;
}

.omb-water-top {
  stop-color: var(--omb-water-top);
}

.omb-water-mid {
  stop-color: var(--omb-water-mid);
}

.omb-water-deep {
  stop-color: var(--omb-water-deep);
}

.omb-sheen {
  color: var(--omb-sheen);
  opacity: 0.45;
}

.omb-reflect {
  color: var(--omb-reflect);
}

.omb-ripples {
  color: var(--omb-ripple);
}

.omb-glints__orb {
  color: var(--omb-glint);
}

.omb-glints__lamp {
  color: var(--omb-lamp);
}

.omb-boat {
  color: var(--omb-boat);
}

.omb-boat svg {
  overflow: visible;
}

.omb-sail {
  fill: var(--omb-sail);
}

.omb-masthead {
  fill: var(--omb-lamp);
}

.omb-sailing {
  left: 0;
  width: 100%;
}

.omb-sailing .omb-boat {
  top: 0;
}

.omb-scene--bridge {
  color: var(--omb-bridge);
}

.omb-bridge__shade {
  color: var(--omb-bridge-shade);
}

.omb-bridge__lamp {
  color: var(--omb-lamp-head);
}

.omb-lamp-stop {
  stop-color: var(--omb-lamp);
}

.omb-lane {
  left: 0;
  width: 200%;
}

.omb-lane svg {
  overflow: visible;
}

.omb-car {
  fill: var(--omb-car-body);
}

[data-md-color-scheme="default"] .omb-car--1 {
  fill: #4b5d73;
}

[data-md-color-scheme="default"] .omb-car--2 {
  fill: #d05a3c;
}

[data-md-color-scheme="default"] .omb-car--3 {
  fill: #2f3b4a;
}

[data-md-color-scheme="default"] .omb-car--4 {
  fill: #e7b54b;
}

.omb-car__head {
  fill: var(--omb-headlight);
}

.omb-car__tail {
  fill: var(--omb-taillight);
}

.omb-necklace {
  color: var(--omb-necklace);
}

.omb-beacon {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--omb-beacon);
  border-radius: 50%;
  box-shadow: 0 0 6px 2px var(--omb-beacon-glow);
}

.omb-scene--fog {
  color: var(--omb-fog);
  opacity: var(--omb-fog-opacity);
}

.omb-drift--fog {
  left: 0;
}

.omb-scene--shore {
  color: var(--omb-shore);
}

.omb-shore__bulb {
  fill: var(--omb-lamp-head);
}

.omb-firefly {
  width: 3px;
  height: 3px;
  background: var(--omb-firefly);
  border-radius: 50%;
  box-shadow: 0 0 6px 2px var(--omb-firefly-glow);
  opacity: 0;
}

.omb-bridge__lit {
  color: var(--omb-bridge-lit);
}

.omb-far-top { stop-color: var(--omb-far-top); }
.omb-far-base { stop-color: var(--omb-far-base); }
.omb-mid-top { stop-color: var(--omb-mid-top); }
.omb-mid-base { stop-color: var(--omb-mid-base); }
.omb-shore-top { stop-color: var(--omb-shore-top); }
.omb-shore-base { stop-color: var(--omb-shore-base); }

/* The airliner: 24px whatever the width, like the birds — at scene scale it
   would be a speck on a phone. */
.omb-plane {
  top: 0;
  left: 0;
  width: 24px;
  color: var(--omb-plane);
}

.omb-plane svg {
  overflow: visible;
}

.omb-nav {
  width: 2px;
  height: 2px;
  border-radius: 50%;
}

.omb-nav--port {
  top: 8.4px;
  left: 7.8px;
  background: #ff5566;
  box-shadow: 0 0 4px 1px rgba(255, 85, 102, 0.7);
}

.omb-nav--strobe {
  top: -0.4px;
  left: 1.6px;
  background: #fff;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.8);
}

.omb-contrail {
  top: 4px;
  right: 70%;
  width: calc(var(--omb-scene-w) * 0.16);
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--omb-contrail));
}

.omb-headland {
  fill: var(--omb-headland);
}

.omb-lh {
  fill: var(--omb-lh);
}

.omb-lh__trim {
  fill: var(--omb-lh-trim);
}

.omb-lh__lamp {
  fill: var(--omb-lh-lamp);
}

.omb-lighthouse {
  width: 0;
  height: 0;
}

/* The beam, seen from the side as it turns: long to one side, shortening
   to a flash as it swings through the viewer, long to the other side. */
.omb-beam {
  top: -7px;
  left: 0;
  width: calc(var(--omb-scene-w) * 0.12);
  height: 14px;
  background: linear-gradient(90deg, var(--omb-beam), transparent);
  clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%);
  transform-origin: 0 50%;
}

.omb-flash {
  top: -7px;
  left: -7px;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, var(--omb-lh-lamp), transparent 70%);
  border-radius: 50%;
  opacity: 0;
}

.omb-city {
  fill: var(--omb-bldg);
}

.omb-city__shade {
  fill: var(--omb-bldg-shade);
}

.omb-city__windows {
  color: var(--omb-city);
}

.omb-beacon--sm {
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
}

.omb-ferry {
  top: 0;
}

.omb-ferry svg {
  overflow: visible;
}

.omb-ferry__hull {
  fill: var(--omb-ferry-hull);
}

.omb-ferry__stripe {
  fill: var(--omb-ferry-stripe);
}

.omb-ferry__cabin {
  fill: var(--omb-ferry-cabin);
}

.omb-ferry__win {
  fill: var(--omb-ferry-win);
}

.omb-ferry__glow {
  color: var(--omb-lamp);
}

.omb-grass {
  color: var(--omb-shore-top);
}

.omb-flowers--0 { color: #f6cf4f; }
.omb-flowers--1 { color: #f28bab; }
.omb-flowers--2 { color: #fff; }

/* Keeps the text column readable over the drawing. It gives out above the
   stage, which is there to be seen. On a phone the content sits over plain
   sky, so there is nothing to hold back. */
.omb-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(var(--omb-scrim), var(--omb-scrim-near)) 0%,
    rgba(var(--omb-scrim), var(--omb-scrim-mid)) 32%,
    rgba(var(--omb-scrim), var(--omb-scrim-far)) 54%,
    rgba(var(--omb-scrim), 0) 72%
  );
  -webkit-mask-image: linear-gradient(to top, transparent calc(var(--omb-stage) - 3rem), #000 calc(var(--omb-stage) + 1rem));
  mask-image: linear-gradient(to top, transparent calc(var(--omb-stage) - 3rem), #000 calc(var(--omb-stage) + 1rem));
}

@media screen and (max-width: 59.99em) {
  .omb-hero__scrim {
    display: none;
  }
}

/* Fade the hero into the page background instead of cutting it off. */
.omb-hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3rem;
  pointer-events: none;
  content: "";
  background: linear-gradient(to bottom, transparent, var(--md-default-bg-color));
}

/* --------------------------------------------------------------------------
   Motion
   Everything here animates transform or opacity and nothing else, so the
   compositor runs it without repainting a pixel. The loops pause while the
   hero is off screen (hero-scene.js) and are off entirely for anyone who
   has asked their system for less motion.
   -------------------------------------------------------------------------- */

.omb-stars--a {
  animation: omb-fade 4.6s ease-in-out infinite alternate;
}

.omb-stars--b {
  animation: omb-fade 6.3s ease-in-out -3.1s infinite alternate;
}

.omb-shoot {
  animation: omb-shoot 13s ease-in 5s infinite;
}

.omb-drift {
  animation: omb-drift 260s linear infinite;
}

.omb-drift--fog {
  animation-duration: 120s;
}

.omb-flock {
  animation: omb-fly 70s linear -26s infinite;
}

.omb-bird {
  animation: omb-flap 0.34s ease-in-out var(--d) infinite alternate;
}

.omb-ripples {
  animation: omb-sway 9s ease-in-out infinite alternate;
}

.omb-glints--a {
  animation: omb-fade 1.8s ease-in-out infinite alternate;
}

.omb-glints--b {
  animation: omb-fade 1.8s ease-in-out -0.9s infinite alternate;
}

.omb-boat {
  animation: omb-bob 4.4s ease-in-out infinite;
}

.omb-sailing {
  animation: omb-sail 170s linear -52s infinite;
}

.omb-sailing .omb-boat {
  animation-duration: 3.6s;
}

.omb-lane--east {
  animation: omb-east 74s linear infinite;
}

.omb-lane--west {
  animation: omb-west 88s linear infinite;
}

.omb-necklace--a {
  animation: omb-fade 3.4s ease-in-out infinite alternate;
}

.omb-necklace--b {
  animation: omb-fade 3.4s ease-in-out -1.7s infinite alternate;
}

.omb-beacon {
  animation: omb-beacon 2.2s ease-in-out var(--d) infinite;
}

.omb-firefly {
  animation: omb-firefly var(--t) ease-in-out var(--d) infinite;
}

.omb-plane-track {
  animation: omb-cross 130s linear -48s infinite;
}

.omb-nav--strobe {
  animation: omb-strobe 1.6s steps(1) infinite;
}

.omb-ferry-track {
  animation: omb-ferry 170s linear -74s infinite;
}

.omb-beam {
  animation: omb-sweep 7s linear infinite;
}

.omb-flash {
  animation: omb-flash 7s linear infinite;
}

.omb-hero--idle .omb-amb {
  animation-play-state: paused;
}

@keyframes omb-fade {
  from { opacity: 1; }
  to { opacity: 0.2; }
}

@keyframes omb-shoot {
  0% { opacity: 0; transform: rotate(16deg) translateX(0); }
  1.5% { opacity: 1; }
  6% { opacity: 0; transform: rotate(16deg) translateX(16rem); }
  100% { opacity: 0; transform: rotate(16deg) translateX(16rem); }
}

@keyframes omb-drift {
  to { transform: translateX(-50%); }
}

@keyframes omb-fly {
  from { transform: translateX(calc(var(--omb-scene-w) * -0.06)); }
  to { transform: translateX(calc(var(--omb-scene-w) * 1.02)); }
}

@keyframes omb-flap {
  from { transform: scaleY(1); }
  to { transform: scaleY(-0.35); }
}

@keyframes omb-sway {
  from { transform: translateX(-10px); }
  to { transform: translateX(10px); }
}

@keyframes omb-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(1.5px) rotate(2deg); }
}

@keyframes omb-sail {
  from { transform: translateX(-8%); }
  to { transform: translateX(108%); }
}

@keyframes omb-east {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@keyframes omb-west {
  to { transform: translateX(-50%); }
}

@keyframes omb-cross {
  from { transform: translateX(-6%); }
  to { transform: translateX(106%); }
}

@keyframes omb-ferry {
  from { transform: translateX(0); }
  to { transform: translateX(-108%); }
}

@keyframes omb-strobe {
  0%, 6% { opacity: 1; }
  7%, 14% { opacity: 0; }
  15%, 20% { opacity: 1; }
  21%, 100% { opacity: 0; }
}

@keyframes omb-sweep {
  0% { transform: scaleX(1); opacity: 0.5; }
  12% { transform: scaleX(0.7); opacity: 0.6; }
  24% { transform: scaleX(0.04); opacity: 0.9; }
  26% { transform: scaleX(-0.04); opacity: 0.9; }
  38% { transform: scaleX(-0.7); opacity: 0.6; }
  50% { transform: scaleX(-1); opacity: 0.5; }
  75% { transform: scaleX(0); opacity: 0.06; }
  100% { transform: scaleX(1); opacity: 0.5; }
}

@keyframes omb-flash {
  0%, 18% { opacity: 0; transform: scale(0.4); }
  25% { opacity: 1; transform: scale(1.3); }
  32%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes omb-beacon {
  0%, 38% { opacity: 1; }
  50%, 100% { opacity: 0.1; }
}

@keyframes omb-firefly {
  0% { opacity: 0; transform: translate(0, 0); }
  25% { opacity: 1; }
  50% { opacity: 0.3; transform: translate(9px, -11px); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(0, 0); }
}

/* --------------------------------------------------------------------------
   Scroll parallax
   Each layer resists a fraction `--r` of the scroll, measured against the
   stage: at rest when the hero's bottom meets the bottom of the screen, and
   drifting apart on either side of it. Done with a view timeline where the
   browser has one, which runs off the main thread and is what keeps it
   smooth on a phone; hero-scene.js does the same arithmetic elsewhere.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) and (timeline-scope: --a) {
  @media (prefers-reduced-motion: no-preference) {
    .omb-hero {
      timeline-scope: --omb-stage;
    }

    .omb-scene__stage {
      view-timeline: --omb-stage block;
    }

    .omb-par {
      animation: omb-parallax linear both;
      animation-timeline: --omb-stage;
    }

    .omb-par[data-anchor="top"] {
      animation-name: omb-parallax-top;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }
}

@keyframes omb-parallax {
  from { transform: translate3d(0, calc(var(--r) * var(--omb-scene-h) * -1), 0); }
  to { transform: translate3d(0, calc(var(--r) * 100vh), 0); }
}

@keyframes omb-parallax-top {
  from { transform: none; }
  to { transform: translate3d(0, calc(var(--r) * 100vh), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .omb-hero .omb-amb {
    animation: none;
  }

  .omb-shoot,
  .omb-firefly,
  .omb-beam {
    display: none;
  }
}