/* ============================================================
   panel-beauty.css
   Beauty salon mockup — hot pink background with a CSS-only
   star field, Cedarville Cursive title, and a semicircular arch
   navigation with five stylised circle buttons.

   Z-index layering within this panel:
     0  — panel hot-pink background
     0  — .beauty__stars (pseudo-element star field, same plane)
     1  — .beauty__content (title, arch nav, tagline)

   Arch Nav Technique:
   ─────────────────
   Five buttons are placed along a 140° arc (from 160° to 20°,
   measured from the positive X-axis / 3 o'clock position).
   The arc centre is anchored at the BOTTOM of the .beauty__arch-nav
   container, so buttons fan upward in a halo above the title.

   For item N with --angle:
     left = 50%  +  R·cos(--angle)  −  btn_half
     top  = 100% −  R·sin(--angle)  −  btn_half

   CSS sin()/cos() is used (CSS Level 4, supported Chrome 111+,
   Firefox 108+, Safari 15.4+). No JavaScript required.

   Star Field Technique:
   ─────────────────────
   .beauty__stars uses two ::before / ::after pseudo-elements, each
   holding multiple repeating-radial-gradient layers at different tile
   sizes and phase offsets. The hard colour-to-transparent stop on each
   radial-gradient produces a crisp dot, and the varying tile sizes
   create the illusion of randomly scattered stars.
   ============================================================ */

/* ---------- Panel Background ---------- */
.panel--beauty {
  background-color: var(--beauty-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* allow arch buttons near edges to bleed slightly */
}

/* ---------- Star Field ---------- */
.beauty__stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Layer A: dense, small (1 px) star dots in mixed pink tones */
.beauty__stars::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, var(--beauty-star-light) 1px, transparent 1px),
    radial-gradient(circle, var(--beauty-star-mid)   1px, transparent 1px),
    radial-gradient(circle, var(--beauty-star-dark)  1px, transparent 1px);
  background-size:
    26px 26px,
    51px 51px,
    79px 79px;
  background-position:
    3px  6px,
    17px 38px,
    60px 11px;
  opacity: 0.55;
}

/* Layer B: sparser, slightly larger (2 px) accent dots + white sparkles */
.beauty__stars::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, var(--beauty-star-light)   2px, transparent 2px),
    radial-gradient(circle, var(--beauty-star-sparkle) 2px, transparent 2px);
  background-size:
    97px  97px,
    143px 143px;
  background-position:
    44px 68px,
    88px 22px;
  opacity: 0.4;
}

/* ---------- Content Wrapper ---------- */
.beauty__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Pull content up slightly so the arch sits above the title naturally */
  margin-top: -1rem;
}

/* ---------- Arch Navigation ---------- */
.beauty__arch-nav {
  position: relative;
  width: 100%;
  /* Height must accommodate the full arc (radius = 120px, apex item ~152px above bottom) */
  height: 170px;
  /* Slight negative bottom margin draws the title closer to the arch */
  margin-bottom: -0.25rem;
}

.beauty__arch-nav ul {
  position: absolute;
  bottom: 0;  /* Arc pivot anchored here — items arc upward from this line */
  left: 0;
  width: 100%;
  height: 100%;
  list-style: none;
}

/* Each <li> is positioned on the arc using CSS sin/cos */
.beauty__arch-nav li {
  --arch-r:   120px;  /* radius of the circular arc            */
  --btn-size:  64px;  /* circle button diameter                 */
  --btn-half: calc(var(--btn-size) / 2);

  position: absolute;
  width:  var(--btn-size);
  height: var(--btn-size);

  /*
    Formula (center of button placed on the arc point):
      left = 50%  +  R·cos(angle)  −  half_btn_width
      top  = 100% −  R·sin(angle)  −  half_btn_height
  */
  left: calc(50%   + var(--arch-r) * cos(var(--angle)) - var(--btn-half));
  top:  calc(100%  - var(--arch-r) * sin(var(--angle)) - var(--btn-half));
}

/* Spread 5 buttons over a 140° arc: 160° → 125° → 90° (apex) → 55° → 20° */
.beauty__arch-nav li:nth-child(1) { --angle: 160deg; }
.beauty__arch-nav li:nth-child(2) { --angle: 125deg; }
.beauty__arch-nav li:nth-child(3) { --angle: 90deg;  } /* apex */
.beauty__arch-nav li:nth-child(4) { --angle: 55deg;  }
.beauty__arch-nav li:nth-child(5) { --angle: 20deg;  }

/* Circle button styling */
.beauty__nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--beauty-nav-bg);
  border: 1.5px solid var(--beauty-nav-border);
  color: var(--beauty-text);
  font-family: var(--font-beauty);
  font-size: 0.5rem;
  line-height: 1.35;
  text-align: center;
  padding: 0.2rem;
  cursor: default; /* non-interactive */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* Subtle inner glow */
  box-shadow: inset 0 0 8px var(--beauty-nav-glow);
}

/* French translation line — smaller, lighter */
.beauty__nav-btn em {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.4rem;
  opacity: 0.72;
  letter-spacing: 0.02em;
}

/* ---------- Title ---------- */
.beauty__title {
  font-family: var(--font-beauty);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  color: var(--beauty-text);
  text-align: center;
  line-height: 1.2;
  text-shadow:
    0 2px 10px var(--beauty-shadow-deep),
    0 0  24px rgba(255, 255, 255, 0.18);
  letter-spacing: 0.01em;
}

/* ---------- Tagline ---------- */
.beauty__tagline {
  font-family: var(--font-beauty);
  font-size: clamp(0.65rem, 1.4vw, 0.95rem);
  color: var(--beauty-tagline);
  text-align: center;
  letter-spacing: 0.14em;
  margin-top: 0.4rem;
}