/* A continuous polygonal ring. 2 * tan(15deg) = .5359: .53 leaves a
   narrow seam between twelve panels instead of the old wide empty gaps. */
.hero {
  --R: clamp(520px, 76vw, 1100px);
}
.hero .ring-scene { perspective-origin: 50% 28%; }
.hero .ring { top: 28%; }
.hero .rc {
  width: calc(var(--R) * .53);
  left: calc(var(--R) * -.265);
  top: calc(var(--R) * -.165625);
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--R) * .009);
}
.hero .hero-vig {
  background: linear-gradient(90deg, var(--bg), transparent 5%, transparent 95%, var(--bg));
}
.hero .figure {
  height: 102%;
  bottom: -9%;
  aspect-ratio: 2 / 3;
  pointer-events: none;
}
.hero .figure .portrait {
  object-fit: contain;
  object-position: center bottom;
  user-select: none;
  -webkit-user-drag: none;
}
.hero .hero-fade {
  height: 35%;
  background: linear-gradient(0deg, var(--bg) 4%, rgba(5, 6, 12, .36) 44%, transparent);
}

@media (min-width: 768px) and (max-width: 1099px) {
  .hero .hero-right { max-width: 16rem; }
  .hero .hero-right p { font-size: .9rem; }
  .hero h1 { font-size: clamp(1.9rem, 3.5vw, 2.7rem); }
}

@media (max-width: 767px) {
  .hero {
    /* Enough vertical room for the portrait, two-line heading and real copy. */
    height: max(820px, 100svh);
    --R: clamp(430px, 100vw, 660px);
  }
  .hero .ring-scene { perspective-origin: 50% 25%; }
  .hero .ring { top: 25%; }
  .hero .figure { height: 64%; bottom: 27%; }
  .hero .hero-fade {
    height: 48%;
    background: linear-gradient(0deg, var(--bg) 65%, transparent);
  }
  .hero .hero-ui { bottom: 1.5rem; }
  .hero .hero-ui .wrap { gap: 1rem; }
  .hero h1 { font-size: clamp(1.8rem, 8.5vw, 2.75rem); line-height: 1.08; }
  .hero .hero-right { max-width: 38ch; }
  .hero .hero-right p { font-size: .95rem; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .ring-scene, .hero .figure-in, .hero [data-in] { animation: none; }
}