/* ==========================================================================
   Hero — layered portrait art, background shape, intro animation
   At 1920px: section 930px tall, art box 698 × 766 at (1089, 147),
   overhanging the 1420px content column by 117px on the right.
   ========================================================================== */

.hero {
  --art-w: calc(var(--container-w) * 0.4915);
  position: relative;
  overflow: hidden;
  background: var(--c-mist);
}

.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 112px;
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 643px;
}

.hero-title .accent {
  color: var(--c-gold);
}

/* ---------- Art (all children placed in % of the 698 × 766 box) ---------- */
.hero-art {
  position: relative;
  z-index: 1;
  width: min(100%, 540px);
  aspect-ratio: 698 / 766;
  margin: 40px auto 0;
}

.hero-art > * {
  position: absolute;
  display: block;
  max-width: none;
}

/* Background shape (Figma "Union"), sized and placed relative to the art box
   so the circular bump always sits behind the portrait at every viewport.
   The SVG spans design-x −720…2140 (curved ends past the 1920 frame).
   In art-box units: left = (−720 − 1089.15) / 698 = −2.5919 × art width,
   width = 2860 / 698 = 4.0974 × art width,
   top = 110.73 / 766 = 14.456% of the art height. */
.hero-wave {
  left: -259.191%;
  top: 14.456%;
  width: 409.742%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.hero-portrait {
  left: 0;
  top: 0;
  width: 97.35%;
  height: auto;
}

.hero-badge-wrap {
  left: 69.75%;
  top: 72.45%;
  width: 30.23%;
  aspect-ratio: 1;
}

.hero-badge {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
}

.hero-cord {
  z-index: 2;
  left: 73.47%;
  top: 74.02%;
  width: 6.3%;
  height: auto;
}

/* Soft "incoming call" ripple around the telephone badge */
.hero-badge-wrap::before,
.hero-badge-wrap::after {
  content: "";
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  border: 2px solid rgba(224, 132, 122, 0.6);
  opacity: 0;
  animation: call-ripple 3.6s var(--ease-out) 2.4s infinite;
}

.hero-badge-wrap::after {
  animation-delay: 4.2s;
}

@keyframes call-ripple {
  0% { transform: scale(1); opacity: 0.7; }
  70%, 100% { transform: scale(1.4); opacity: 0; }
}

/* ---------- Desktop: two-column composition matching the 1920 frame ---------- */
@media (min-width: 1024px) {
  .hero-inner {
    justify-content: center;
    min-height: calc(var(--art-w) * 766 / 698 + clamp(110px, 7.66vw, 147px) + 17px);
    /* symmetric, so the copy stays centred in the 930px frame at 1920
       while always clearing the floating navbar on shorter layouts */
    padding-block: clamp(120px, 7.66vw, 147px);
  }

  .hero-copy {
    width: min(643px, 51%);
  }

  .hero-art {
    position: absolute;
    margin: 0;
    width: var(--art-w);
    /* overhang 117px at 1920, but never past the viewport edge */
    right: max(-8.24%, (var(--container-w) - 100vw) / 2 + 1rem);
    bottom: 17px;
  }
}

/* ---------- Intro animation (runs once on load) ----------
   Only the *start* state is described and fill-mode is `backwards`:
   once an animation ends the element falls back to its normal styles,
   so no transform is left applied and images re-render at full sharpness. */
.js .hero-intro {
  animation: hero-rise 1s var(--ease-out) var(--d, 0ms) backwards;
}

/* Portrait, telephone badge and the cord piece that bridges them arrive
   together, with an identical translate-only motion, so the cord never
   shows without its telephone and the pieces stay aligned mid-animation. */
.js .hero-portrait,
.js .hero-badge-wrap,
.js .hero-cord {
  animation: hero-portrait-in 1.3s var(--ease-out) 0.25s backwards;
}

.js .hero-wave {
  animation: hero-fade 1.6s var(--ease-out) 0.1s backwards;
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(28px); }
}

@keyframes hero-portrait-in {
  from { opacity: 0; transform: translateY(24px); }
}

@keyframes hero-fade {
  from { opacity: 0; }
}