.hero::after,
.k2-mara-sequence {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: min(29.3vw, 400px);
  aspect-ratio: 2 / 3;
  overflow: visible;
  pointer-events: none;
  contain: layout paint;
}

/* A real frame remains visible even while JavaScript is late or unavailable. */
.hero::after {
  content: '';
  background: url('/images/mara-animation/frame-1.png') right bottom / contain no-repeat;
}
.hero:has(.k2-mara-sequence.is-ready)::after { opacity: 0; }

.k2-mara-sequence__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  opacity: 0;
  backface-visibility: hidden;
  will-change: opacity;
}

.k2-mara-sequence.is-ready:not(.is-playing) .k2-mara-sequence__frame.is-current {
  opacity: 1;
}

.k2-mara-sequence.is-playing .k2-mara-sequence__frame {
  animation-duration: 8s;
  animation-delay: 3s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

.k2-mara-sequence.is-playing .k2-mara-sequence__frame--1 {
  animation-name: k2-mara-frame-1;
}

.k2-mara-sequence.is-playing .k2-mara-sequence__frame--2 {
  animation-name: k2-mara-frame-2;
}

.k2-mara-sequence.is-playing .k2-mara-sequence__frame--3 {
  animation-name: k2-mara-frame-3;
}

.k2-mara-sequence.is-playing .k2-mara-sequence__frame--4 {
  animation-name: k2-mara-frame-4;
}

@keyframes k2-mara-frame-1 {
  0% {
    opacity: 1;
  }
  12.6667% {
    opacity: 1;
  }
  16.6667%,
  100% {
    opacity: 0;
  }
}

@keyframes k2-mara-frame-2 {
  0%,
  12.6667% {
    opacity: 0;
  }
  16.6667% {
    opacity: 1;
  }
  29.3333% {
    opacity: 1;
  }
  33.3333%,
  100% {
    opacity: 0;
  }
}

@keyframes k2-mara-frame-3 {
  0%,
  29.3333% {
    opacity: 0;
  }
  33.3333% {
    opacity: 1;
  }
  46% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes k2-mara-frame-4 {
  0%,
  46% {
    opacity: 0;
  }
  50.6667%,
  100% {
    opacity: 1;
  }
}

@media (width <= 1180px) {
  .hero::after, .k2-mara-sequence {
    width: min(31vw, 350px);
  }
}

@media (width <= 900px) {
  .hero::after, .k2-mara-sequence {
    width: min(34vw, 300px);
  }
}

@media (width <= 760px) {
  .hero::after, .k2-mara-sequence {
    right: max(4px, env(safe-area-inset-right));
    bottom: max(-14px, calc(100% - 100svh - 14px));
    width: min(36vw, 154px);
    opacity: 0.86;
  }
}

@media (width <= 480px) {
  .hero::after, .k2-mara-sequence {
    width: min(35vw, 133px);
    opacity: 0.84;
  }
}

@media (width > 760px) and (height <= 720px) {
  .hero::after, .k2-mara-sequence {
    width: min(27vw, 300px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .k2-mara-sequence .k2-mara-sequence__frame {
    animation: none !important;
    opacity: 0;
  }

  .k2-mara-sequence .k2-mara-sequence__frame.is-current {
    opacity: 1;
  }
}