/* ══════════════════════════════════════
   AURA AESTHETIC — Hero Section
   Mobile-first → Desktop @1024px
   Pencil: Mobile 390x720, Desktop 1440x900
   CRITICAL: Desktop uses ABSOLUTE positioning
   ══════════════════════════════════════ */

/* ══════════════════════════════════
   MOBILE (390px frame)
   ══════════════════════════════════ */

/* ── Section: fills mobile viewport, bg #0C0C0C ── */
.hero {
  background: var(--c-bg-dark);
  position: relative;
  overflow: hidden;
  min-height: calc(100dvh - 56px);
  /* Mobile uses flex column layout */
  display: flex;
  flex-direction: column;
}

/* ── Decorative "AURA": x:-10, y:20, 90px ── */
.hero__bg-text {
  position: absolute;
  top: 60px;
  left: -10px;
  font-family: var(--ff-display);
  font-size: 90px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.03);
  letter-spacing: 10px;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ── Inner container ── */
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ── Portrait: 200x300 at x:95, y:60, centered, border-radius 100px ── */
.hero__portrait {
  width: 260px;
  height: 340px;
  margin: 100px auto 0;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  order: 1;
}

.hero__portrait-wrapper {
  width: 100%;
  height: 100%;
  border-radius: 130px;
  overflow: hidden;
  position: relative;
}

.hero__portrait-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__portrait-fade {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, var(--c-bg-dark) 5%, transparent);
  pointer-events: none;
}

/* ── Headline block: starts around y:380 ── */
.hero__headline {
  padding: 6px;
  margin-top: 8px;
  z-index: 2;
  order: 2;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ── Overline "AESTHETIC SURGERY" ── */
.hero__overline--mobile {
  position: absolute;
  top: 120px;
  left: 24px;
  display: block;
  font-size: 10px;
  margin-bottom: 0;
  z-index: 3;
  letter-spacing: 6px;
}

.hero__overline--desktop {
  display: none;
}

/* ── Title ── */
.hero__title {
  font-family: var(--ff-heading);
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-white);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* "重塑": responsive 48px → 88px */
.hero__title-line {
  display: block;
  font-size: clamp(48px, 10vw, 88px);
}

/* "你的美": 64px, #C4967A at y:450 */
.hero__title-line--accent {
  color: var(--c-accent);
  margin-top: 6px;
}

/* ── Description: x:24, y:540, width 300px, 13px, #FFFFFF88 ── */
.hero__desc {
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.53);
  line-height: 1.9;
  max-width: 300px;
}

/* ── Mobile description: x:24, y:540 ── */
.hero__desc--mobile {
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.53);
  line-height: 1.8;
  max-width: 300px;
  margin-top: 28px;
  letter-spacing: 0.5px;
}

/* ── Mobile CTA button: x:24, y:640, pill, #C4967A ── */
.hero__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-accent);
  padding: 14px 32px;
  border-radius: var(--r-pill);
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-white);
  letter-spacing: 1px;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}

.hero__cta-btn:active {
  transform: scale(0.97);
}

/* Mobile CTA — pushed to bottom of hero via flex margin-top:auto */
.hero__cta-btn--mobile {
  margin-top: 32px;
  margin-bottom: 40px;
}

/* ── Right aside: HIDDEN on mobile ── */
.hero__aside {
  display: none;
}

/* ── Bottom stats: HIDDEN on mobile ── */
.hero__stats {
  display: none;
}

/* ── Mobile Scroll Indicator ── */
.hero__scroll-mobile {
  position: absolute;
  right: 24px;
  top: calc(100dvh - 56px - 80px); /* Anchored to initial viewport to avoid being pushed out by long content */
  z-index: 10;
}

.hero__scroll-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--c-accent);
  font-size: 14px;
  animation: bounceDown 2s infinite ease-in-out;
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}


/* ══════════════════════════════════════
   TABLET — 768px to 1023px
   ══════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__headline {
    width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .hero__overline--mobile {
    left: calc(50% - 160px);
  }
  
  .hero__portrait {
    width: 320px;
    height: 420px;
  }
}

/* ══════════════════════════════════════
   DESKTOP — Absolute positioned layers
   Frame: 1440x900 (minus 72px nav = 828px)
   Pencil coordinates (within 1440px frame):
   - "AURA" bg text: x:-40, y:300, 240px
   - Portrait: 500x660 at x:470, y:120 (centered)
   - Headline: 460px at x:64, y:340
   - Aside: 340px at x:1020, y:420
   - Stats: 1312px at x:64, y:800
   ══════════════════════════════════════ */
@media (min-width: 1024px) {

  .hero {
    min-height: calc(100vh - 72px);
    display: block;
    padding: 0;
  }

  /* ── Decorative "AURA": x:-40, y:300, 240px, #FFFFFF08 ── */
  .hero__bg-text {
    top: 300px;
    left: -40px;
    font-size: 240px;
    color: rgba(255, 255, 255, 0.03);
    letter-spacing: 20px;
  }

  /* ── Inner: relative context for absolute children ── */
  .hero__inner {
    display: block;
    position: relative;
    height: calc(100vh - 72px);
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 64px;
  }

  /* ── Portrait: 500x660 at x:470, y:120
       Center calc: 470 + 250 = 720 = 50% of 1440
       So left: 50%, transform: translateX(-50%)
       top: 120px, border-radius: 250px ── */
  .hero__portrait {
    position: absolute;
    left: 50%;
    top: 120px;
    transform: translateX(-50%);
    width: 500px;
    height: 660px;
    margin: 0;
    z-index: 1;
    order: unset;
  }

  .hero__portrait-wrapper {
    border-radius: var(--r-portrait);
  }

  /* ── Headline: 460px wide at x:64, y:340 ──
       x:64 is handled by container padding
       y:340 from section top */
  .hero__headline {
    position: absolute;
    left: 8%;
    top: 340px;
    width: 460px;
    text-align: left;
    margin: 0;
    padding: 0;
    z-index: 2;
    order: unset;
    display: block;
    flex-grow: 0;
  }

  .hero__overline--mobile,
  .hero__scroll-mobile {
    display: none;
  }

  .hero__overline--desktop {
    display: block;
    position: static;
    top: auto;
    left: auto;
    font-size: 11px;
    margin-bottom: 20px;
  }

  .hero__title-line {
    letter-spacing: -2px;
  }

  /* Hide mobile-only elements on desktop */
  .hero__cta-btn--mobile,
  .hero__desc--mobile {
    display: none;
  }

  /* ── Aside: 340px wide placed flush with the portrait's right side ── */
  .hero__aside {
    display: block;
    position: absolute;
    left: calc(50% + 300px);
    top: 450px;
    width: 340px;
    z-index: 2;
  }

  .hero__desc {
    font-size: 14px;
    max-width: none;
    margin-bottom: 24px;
  }

  .hero__aside .hero__cta-btn {
    display: inline-flex;
  }

  .hero__cta-btn:hover {
    background: #b88568;
    transform: translateY(-1px);
  }

  /* ── Stats bar: 1312px at x:64, y:800 ──
       Positioned at bottom of 900px section
       y:800 → bottom: 900-800 = 100px from bottom */
  .hero__stats {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding-bottom: 80px;
  }

  .hero__stats-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .hero__stat {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .hero__stat-number,
  .hero__stat-label {
    font-family: var(--ff-body);
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.33);
    letter-spacing: 3px;
  }

  .hero__stat--scroll {
    gap: 8px;
  }

  .hero__stat-arrow {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.27);
  }
}