/*
 * Snoka living-shark hero
 *
 * Desktop progressive enhancement only. The SVG owns the body/tail wave and
 * this layer moves the whole animal through the hero. The important visual
 * contract is translation first, scale second: the shark must read as swimming
 * across space, never as a static logo that merely grows and shrinks.
 */

@media (min-width: 1024px) {
  #top {
    position: relative;
    isolation: isolate;
    align-items: start;
    min-height: clamp(29rem, 36vw, 33rem);
    --snoka-shark-left-run: clamp(-13rem, -10.5vw, -6rem);
    --snoka-shark-right-run: clamp(-0.5rem, 1.1vw, 1.5rem);
  }

  #top > div {
    position: relative;
  }

  #top > .snoka-hero-copy {
    z-index: 4;
  }

  #top > .snoka-hero-stage {
    z-index: 1;
  }

  #top::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: clamp(2.2rem, 4.6vw, 4.9rem);
    right: clamp(-4.75rem, -3vw, -1.6rem);
    width: clamp(24rem, 34vw, 34rem);
    aspect-ratio: 754 / 370;
    pointer-events: none;
    user-select: none;
    background: url("/assets/svg/snoka-shark-swim.svg") center / contain no-repeat;
    opacity: 0.96;
    filter: drop-shadow(0 1.15rem 1.8rem rgba(9, 32, 51, 0.09));
    transform-origin: 58% 52%;
    backface-visibility: hidden;
    will-change: transform, opacity;
    animation: snoka-hero-shark-patrol 18.6s cubic-bezier(.45, .04, .55, .98) infinite;
  }
}

/* Tight two-column desktop keeps the same idea with a shorter physical run so
   the animal never collides with the headline. */
@media (min-width: 1024px) and (max-width: 1199px) {
  #top {
    min-height: 28rem;
    --snoka-shark-left-run: -3.5rem;
    --snoka-shark-right-run: 0.35rem;
  }

  #top::before {
    top: 4rem;
    right: -0.7rem;
    width: clamp(20rem, 36vw, 25rem);
  }
}

/* A real patrol: travel right, turn at the edge, travel left, turn again.
   Scale changes are intentionally small so depth never becomes the dominant
   motion. rotateY is used only during the two turns, when the shark is at the
   edge of its route and the narrow edge-on moment reads as a physical turn. */
@keyframes snoka-hero-shark-patrol {
  0%,
  100% {
    transform: perspective(1100px)
      translate3d(var(--snoka-shark-left-run), .45rem, 0)
      scale(.95) rotateY(0deg) rotateZ(-.5deg);
    opacity: .94;
  }

  9% {
    transform: perspective(1100px)
      translate3d(calc(var(--snoka-shark-left-run) + 1.5rem), -.12rem, 0)
      scale(.965) rotateY(0deg) rotateZ(-.18deg);
    opacity: .97;
  }

  36% {
    transform: perspective(1100px)
      translate3d(var(--snoka-shark-right-run), -.62rem, 0)
      scale(1.02) rotateY(0deg) rotateZ(.2deg);
    opacity: 1;
  }

  41% {
    transform: perspective(1100px)
      translate3d(calc(var(--snoka-shark-right-run) + .75rem), -.28rem, 0)
      scale(1) rotateY(74deg) rotateZ(.08deg);
    opacity: .99;
  }

  45% {
    transform: perspective(1100px)
      translate3d(calc(var(--snoka-shark-right-run) + .15rem), .08rem, 0)
      scale(.98) rotateY(180deg) rotateZ(-.12deg);
    opacity: .98;
  }

  73% {
    transform: perspective(1100px)
      translate3d(var(--snoka-shark-left-run), .7rem, 0)
      scale(.95) rotateY(180deg) rotateZ(.32deg);
    opacity: .95;
  }

  79% {
    transform: perspective(1100px)
      translate3d(calc(var(--snoka-shark-left-run) - .65rem), .42rem, 0)
      scale(.945) rotateY(106deg) rotateZ(.12deg);
    opacity: .94;
  }

  84% {
    transform: perspective(1100px)
      translate3d(var(--snoka-shark-left-run), .18rem, 0)
      scale(.95) rotateY(0deg) rotateZ(-.28deg);
    opacity: .95;
  }
}

@media (prefers-reduced-motion: reduce) {
  #top::before {
    animation: none !important;
    transform: perspective(1100px)
      translate3d(calc(var(--snoka-shark-left-run) + 5rem), 0, 0)
      scale(.99) rotateY(0deg) !important;
    opacity: .98;
    will-change: auto;
  }
}

@media print, (forced-colors: active) {
  #top::before {
    display: none !important;
  }
}