/* Storune Labs V3.3.1 — Preview Experience Polish */

.hero {
  min-height: 706px;
  background:
    linear-gradient(180deg, transparent 0 72%, rgba(2, 8, 17, .42) 100%),
    radial-gradient(ellipse at 78% 43%, rgba(29, 86, 132, .28), transparent 31%),
    radial-gradient(ellipse at 90% 63%, rgba(40, 74, 122, .16), transparent 24%),
    radial-gradient(ellipse at 58% 20%, rgba(12, 47, 82, .26), transparent 32%),
    linear-gradient(132deg, #030b14 3%, #061421 52%, #020811 92%);
}

.hero::after {
  -webkit-mask-image:
    linear-gradient(90deg, rgba(0, 0, 0, .77) 0 38%, #000 60%),
    linear-gradient(180deg, #000 0 calc(100% - 110px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, rgba(0, 0, 0, .77) 0 38%, #000 60%),
    linear-gradient(180deg, #000 0 calc(100% - 110px), transparent 100%);
  mask-composite: intersect;
}

.about {
  position: relative;
  isolation: isolate;
  min-height: 0;
  padding-top: 100px;
  align-items: start;
  border-top: 0;
  background:
    linear-gradient(180deg, #070e18 0, rgba(7, 14, 24, 0) 48px),
    radial-gradient(ellipse at 60% -8%, rgba(24, 76, 113, .34), transparent 64%),
    linear-gradient(180deg, #020811 0, #041421 56px, rgba(6, 17, 28, 0) 100px),
    radial-gradient(circle at 11% 82%, rgba(229, 171, 47, .055), transparent 20%),
    radial-gradient(circle at 87% 54%, rgba(36, 101, 148, .13), transparent 24%),
    linear-gradient(90deg, #06111c, #081928 54%, #06111c);
}

.about::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 100px;
  pointer-events: none;
  opacity: .24;
  background-image:
    radial-gradient(circle at 18% 24%, #dbefff 0 .65px, transparent 1.25px),
    radial-gradient(circle at 72% 38%, #e0a737 0 .65px, transparent 1.3px);
  background-size: 103px 91px, 149px 137px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .72), transparent 96%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .72), transparent 96%);
}

.about-character {
  opacity: 0;
  visibility: hidden;
}

.about-character.is-fully-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity .24s ease;
}

.about-inner {
  position: relative;
  z-index: 1;
  min-height: 340px;
  padding-top: 40px;
}

@media (max-width: 760px) {
  .hero { min-height: 684px; }

  .hero::after {
    -webkit-mask-image:
      linear-gradient(90deg, rgba(0, 0, 0, .8) 0 44%, #000 72%),
      linear-gradient(180deg, #000 0 calc(100% - 96px), transparent 100%);
    mask-image:
      linear-gradient(90deg, rgba(0, 0, 0, .8) 0 44%, #000 72%),
      linear-gradient(180deg, #000 0 calc(100% - 96px), transparent 100%);
  }

  .about { padding-top: 92px; }
  .about-inner { min-height: 438px; padding-top: 40px; }
}

@media (max-width: 520px) {
  .about { padding-top: 84px; }
  .about-inner { min-height: 0; padding: 36px 0 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .trace-scene img { animation: none !important; }
  .about-character.is-fully-visible { transition: none; }
}