/* Scoped adaptation of temp/about-hero.css. */
@font-face { font-family: 'Urbanist'; src: url('../fonts/Urbanist-800.ttf') format('truetype'); font-style: normal; font-weight: 800; font-display: swap; }
.jn-about-hero, .jn-about-hero * { box-sizing: border-box; }
.jn-about-hero {
  position: relative;
  padding-bottom: clamp(72px, 12vh, 140px);
  color: var(--jd-color-white, #fff);
  background: #0f0f0f;
}

.jn-about-hero .about-title-wrap {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 32px), 940px);
  margin: 0 auto;
  padding-top: clamp(106px, 15.7vh, 154px);
}

.jn-about-hero .about-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: "Urbanist", Arial, sans-serif;
  font-size: clamp(82px, 9.6vw, 124px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.82;
  text-align: center;
}

.jn-about-hero .about-title img {
  display: block;
  width: clamp(350px, 38.4vw, 496px);
  height: auto;
  margin-top: clamp(-4px, -0.2vw, -2px);
}

/* Floating badges */
.jn-about-hero .hero-badge-row {
  display: contents;
}

.jn-about-hero .hero-badge {
  position: absolute;
  z-index: 2;
  --hero-badge-strength: 1;
  --hero-badge-rotate: 0deg;
  --hero-badge-float-x: 0px;
  --hero-badge-float-y: 0px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  background: rgb(255 255 255 / 10%);
  backdrop-filter: blur(6px);
  transform:
    translate3d(
      calc(var(--hero-badge-x, 0px) * var(--hero-badge-strength)),
      calc(var(--hero-badge-y, 0px) * var(--hero-badge-strength)),
      0
    )
    translate3d(var(--hero-badge-float-x), var(--hero-badge-float-y), 0)
    rotate(var(--hero-badge-rotate));
  transition: transform 260ms ease-out;
  will-change: transform;
}

.jn-about-hero .hero-badge::before {
  position: absolute;
  inset: 0;
  padding: 0.7px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgb(255 255 255 / 72%) 0%,
    rgb(255 255 255 / 18%) 34%,
    rgb(255 255 255 / 8%) 54%,
    rgb(255 255 255 / 42%) 100%
  );
  content: "";
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.jn-about-hero .hero-badge-icon {
  width: 23px;
  height: 23px;
  overflow: visible;
  fill: none;
  stroke: #ff6b00;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.3;
}

.jn-about-hero .hero-badge--about-skills {
  --hero-badge-strength: 0.65;
  --hero-badge-rotate: -1.1deg;
  top: clamp(88px, 9.3vw, 120px);
  left: max(0px, calc(50% - 399px));
}

.jn-about-hero .hero-badge--about-goal {
  --hero-badge-strength: -0.7;
  --hero-badge-rotate: 1deg;
  top: clamp(186px, 18.1vw, 224px);
  right: max(0px, calc(50% - 452px));
}

@media (max-width: 900px) {
  .jn-about-hero .about-title-wrap {
    width: min(calc(100% - 32px), 680px);
    padding-top: 128px;
  }

  .jn-about-hero .about-title {
    font-size: clamp(64px, 14vw, 94px);
  }

  .jn-about-hero .about-title img {
    width: clamp(282px, 58vw, 390px);
  }

  .jn-about-hero .hero-badge-row {
    display: flex;
    position: absolute;
    top: 92px;
    left: 50%;
    z-index: 2;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
    width: min(88%, 460px);
    transform: translateX(-50%);
  }

  .jn-about-hero .hero-badge {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    gap: 6px;
    height: clamp(32px, 8.4vw, 38px);
    padding: 0 clamp(12px, 3.4vw, 16px);
    font-size: clamp(13px, 3.6vw, 16px);
    transform: translate3d(var(--hero-badge-float-x), var(--hero-badge-float-y), 0);
  }

  .jn-about-hero .hero-badge-icon {
    width: clamp(13px, 3.4vw, 16px);
    height: clamp(13px, 3.4vw, 16px);
  }
}

@media (max-width: 520px) {
  .jn-about-hero .about-title-wrap {
    width: min(calc(100% - 32px), 390px);
    padding-top: 112px;
  }

  .jn-about-hero .about-title {
    font-size: clamp(52px, 15.8vw, 62px);
  }

  .jn-about-hero .about-title img {
    width: min(78vw, 296px);
  }

  .jn-about-hero .hero-badge-row {
    top: 76px;
    width: min(92%, 340px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jn-about-hero .hero-badge {
    transform: none;
    transition: none;
  }
}

.jn-about-hero .about-title img { max-width: 100%; }
.jn-about-hero__heading { max-width: 100%; overflow-wrap: anywhere; }
.jn-about-hero[data-floating="yes"] .hero-badge { animation: jn-about-float 7s ease-in-out infinite; }
.jn-about-hero[data-floating="yes"] .hero-badge--about-goal { animation-delay: -3.5s; }
@keyframes jn-about-float {
  0%, 100% { transform: translate3d(-3px, 0, 0) rotate(var(--hero-badge-rotate, 0deg)); }
  50% { transform: translate3d(3px, -7px, 0) rotate(var(--hero-badge-rotate, 0deg)); }
}
.jn-about-hero:has([contenteditable="true"]:focus) .hero-badge { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .jn-about-hero[data-floating="yes"] .hero-badge { animation: none; }
}