/* ==========================================================================
   Opaya · home hero, "Mesh v2" (with hero.js)
   ========================================================================== */
/* The Mesh network of agents, filmed. Full-bleed, 100svh,
   under the transparent header (margin-top: -header), leaving --overlap at the
   bottom for the product cards. One WebGL2 canvas renders the dot terrain and
   its agents into HDR buffers, then grades them like a film frame: bloom on the
   comets, trails and decisions, depth of field on the near and far terrain,
   height fog with drifting mist and soft god-rays at the horizon, a forest/mist
   grade, vignette, fine grain and a faint edge chromatic aberration. On load the
   camera glides in from high over the lattice and tilts up into the resting
   frame. First paint is a WebP still of that resting frame (the fly-in ends on it). */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  height: 100vh; height: 100svh; min-height: 640px;
  margin-top: calc(-1 * var(--header));
  background: linear-gradient(180deg, #0B201E 0%, #163E39 13%, #11332F 26%, #0D2B27 60%, #0A211F 100%);   /* the still's tones, until it paints */
  color: var(--white);
}
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-still img, .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-still img { object-fit: cover; object-position: 50% 50%; }
.hero-canvas { opacity: 0; transition: opacity 420ms var(--ease); }
.hero.is-live .hero-canvas { opacity: 1; }
.hero.is-live .hero-still { visibility: hidden; transition: visibility 0s linear 480ms; }
/* The fly-in dissolves from the still over a second while the camera is already moving. */
.hero.is-flying .hero-canvas { transition: opacity 1100ms cubic-bezier(0.33, 0, 0.2, 1); }
.hero.is-flying.is-live .hero-still { transition-delay: 1200ms; }
/* Functional scrim: a band under the header, a pool behind the copy and a band behind the foot (4.5:1+). */
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 26, 24, .66) 0, rgba(8, 26, 24, .26) 10%, rgba(8, 26, 24, 0) 20%),
    radial-gradient(75% 60% at 22% 48%, rgba(8, 26, 24, .76) 0, rgba(8, 26, 24, .64) 45%, rgba(8, 26, 24, .46) 62%, rgba(8, 26, 24, 0) 100%),
    linear-gradient(0deg, rgba(8, 26, 24, .6) 0, rgba(8, 26, 24, .36) 14%, rgba(8, 26, 24, 0) 30%);
}
.hero-copy {
  position: relative;
  margin-block: auto;
  padding-top: calc(var(--header) + 24px);
  padding-bottom: calc(var(--overlap) + 76px);
}
.hero-title {
  max-width: 9.6em;
  font-size: clamp(42px, calc(16px + 5.6vw), 108px); line-height: .92;
  color: var(--stone);
  text-wrap: balance;
}
.hero-sub {
  margin-top: 30px; max-width: 34em;
  display: flex; align-items: baseline; gap: 12px;
  font: 400 13.5px/20px var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: rgba(246, 245, 243, .9);
}
.hero-sub::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--sage); transform: translateY(-1px); }
.hero-ctas { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero :focus-visible { outline-color: var(--white); }
/* Tall frames (portrait tablets): the terrain stands up top and the copy sits at the foot. */
@media (max-aspect-ratio: 4/5) and (min-width: 768px) {
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(8, 26, 24, .62) 0, rgba(8, 26, 24, 0) 12%),
      linear-gradient(0deg, rgba(8, 26, 24, .9) 0%, rgba(8, 26, 24, .76) 28%, rgba(8, 26, 24, .3) 46%, rgba(8, 26, 24, 0) 58%);
  }
  .hero-copy { margin-top: auto; margin-bottom: 0; padding-bottom: calc(var(--overlap) + 96px); }
}
@media (max-width: 767px) {
  .hero { min-height: 600px; }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(8, 26, 24, .62) 0, rgba(8, 26, 24, 0) 14%),
      linear-gradient(0deg, rgba(8, 26, 24, .9) 0%, rgba(8, 26, 24, .78) 30%, rgba(8, 26, 24, .34) 50%, rgba(8, 26, 24, 0) 62%);
  }
  .hero-copy { margin-top: auto; margin-bottom: 0; padding-bottom: calc(var(--overlap) + 64px); }
  .hero-title { font-size: clamp(38px, calc(10px + 8vw), 56px); line-height: .98; }
  .hero-sub { margin-top: 20px; font-size: 11.5px; line-height: 17px; letter-spacing: .03em; }
  .hero-ctas { margin-top: 26px; }
  .hero-ctas .mini-btn--lg { height: 44px; padding: 0 16px 0 14px; font-size: 14px; }
}
.hero-foot {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--overlap) + 26px);
  display: flex; justify-content: flex-end; align-items: center;
  pointer-events: none;
}
.hero-pause {
  pointer-events: auto; display: none; place-items: center;
  width: 32px; height: 32px; margin-right: -9px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 50%;
  color: var(--stone); opacity: .55; cursor: pointer;
  transition: opacity 200ms var(--ease), border-color 200ms var(--ease);
}
.hero.is-live .hero-pause, .hero.is-paused .hero-pause { display: grid; }
.hero-pause svg { width: 10px; height: 10px; fill: currentColor; }
.hero-pause .i-play, .hero-pause[aria-pressed="true"] .i-pause { display: none; }
.hero-pause[aria-pressed="true"] .i-play { display: inline; }
.hero-pause[aria-pressed="true"] { opacity: .8; }
.hero-pause:hover, .hero-pause:focus-visible { opacity: 1; border-color: rgba(246, 245, 243, .38); }
@media (max-width: 767px) { .hero-foot { bottom: calc(var(--overlap) + 14px); } }