/* =====================================================================
   OSE · Planet · styles/components/planet.css
   ---------------------------------------------------------------------
   The brand planet: a navy disc with the aurora O-ring, built like the
   logo's O. The BACK half of the ring passes behind the disc, the FRONT
   half crosses in front of it, and where the front crosses the disc the
   disc is cut away by a band 1.55 × the ring stroke (the logo's gap).
   Geometry comes from the brand tokens (ratios of the planet radius
   R = D ÷ 2): ring rx 1.36 R, ry 0.28 R, stroke 0.2 R, tilt -14deg.
   Same technique as the styleguide's approved .sg-orbit demo.
   Component tokens only: --planet-*.

   Markup (decorative: always aria-hidden)
     <div class="planet [planet--sm | planet--hero]" data-part="planet" aria-hidden="true">
       <div class="planet__body">
         <span class="planet__gap" data-part="gap"></span>
       </div>
       <div class="planet__ring" data-part="ring">
         <span class="planet__ring-back"></span>
         <span class="planet__ring-front"></span>
       </div>
     </div>

   Box      .planet is (ring width) × D: D × (rx + stroke ÷ 2) wide, D tall,
            so the ring never overflows it. The disc and the ring are
            centred on the same point (the centre of .planet).
   Paint    the ring is painted ABOVE the disc. The back half hides itself
            inside the disc's circle (radial mask, radius R), so it reads as
            passing behind; the front half is the lower half of the ring box.
            Neither half needs a z-index, so [data-part="ring"] can be
            transformed as ONE element (rotate, scale, opacity) without
            breaking the overlap.
   Scenes   .planet__ring and .planet__gap carry the same rest transform,
            rotate(--planet-ring-tilt), about the same centre and have no
            other transform (centred with margins, not translate). To turn
            or tilt the ring, give BOTH the same transform
            (gsap.to([ring, gap], { rotation, scaleY })) so the cut-out
            follows the front half. Scale the whole planet via .planet.
            Fine detail: the back-half mask is a circle in the ring's own
            frame, so a strong scaleY on the ring shifts the hidden arc by a
            hair; scaling .planet as a whole is always exact.
   Sizes    default D = --planet-size · --sm (orbit-diagram centre) ·
            --hero (home hero, fluid). Any parent may set its own --_d knob
            on .planet instead.
   Surfaces navy disc on cream; on navy / night bands the disc is the
            night navy with a cream hairline rim, so it never dissolves into
            the band and the brand's planet stays navy (a cream disc would
            invert the logo and compete with the cream buttons).
   Static, no states. No JS.
   ===================================================================== */

@layer components {
  .planet {
    --_d: var(--planet-size);
    display: grid;
    grid-template-areas: "stack";
    place-items: center;
    flex: none;
    inline-size: calc(var(--_d) * (var(--planet-ring-rx) + var(--planet-ring-stroke) / 2));
    block-size: var(--_d);
    pointer-events: none;
  }

  .planet > * {
    grid-area: stack;
  }

  .planet--sm {
    --_d: var(--planet-size-sm);
  }

  .planet--hero {
    --_d: var(--planet-size-hero);
  }

  /* The disc. overflow: hidden + the round radius clip the cut-out. */
  .planet__body {
    position: relative;
    overflow: hidden;
    inline-size: var(--_d);
    block-size: var(--_d);
    border-radius: var(--planet-radius);
    background-color: var(--planet-body);
    box-shadow: inset 0 0 0 var(--planet-rim-width) var(--planet-rim);
    forced-color-adjust: none;
  }

  /* The cut-out under the front half: an ellipse band centred on the ring's
     stroke line, 1.55 × the stroke wide, lower half only, clipped to the disc. */
  .planet__gap {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: calc(var(--_d) * (var(--planet-ring-rx) + var(--planet-ring-stroke) * var(--planet-gap-ratio) / 2));
    block-size: calc(var(--_d) * (var(--planet-ring-ry) + var(--planet-ring-stroke) * var(--planet-gap-ratio) / 2));
    margin-block-start: calc(var(--_d) * (var(--planet-ring-ry) + var(--planet-ring-stroke) * var(--planet-gap-ratio) / 2) / -2);
    margin-inline-start: calc(var(--_d) * (var(--planet-ring-rx) + var(--planet-ring-stroke) * var(--planet-gap-ratio) / 2) / -2);
    border: calc(var(--_d) * var(--planet-ring-stroke) * var(--planet-gap-ratio) / 2) solid var(--planet-gap-color);
    border-radius: var(--planet-radius);
    transform: rotate(var(--planet-ring-tilt));
    clip-path: inset(50% 0 0 0);
  }

  /* The ring: one box (the scene's [data-part="ring"]), tilted as in the logo. */
  .planet__ring {
    position: relative;
    inline-size: calc(var(--_d) * (var(--planet-ring-rx) + var(--planet-ring-stroke) / 2));
    block-size: calc(var(--_d) * (var(--planet-ring-ry) + var(--planet-ring-stroke) / 2));
    transform: rotate(var(--planet-ring-tilt));
  }

  /* Both halves: the gradient painted in the border area only. */
  .planet__ring-back,
  .planet__ring-front {
    position: absolute;
    inset: 0;
    border: calc(var(--_d) * var(--planet-ring-stroke) / 2) solid transparent;
    border-radius: var(--planet-radius);
    background: var(--planet-ring) border-box;
    -webkit-mask: linear-gradient(var(--planet-mask), var(--planet-mask)) padding-box, linear-gradient(var(--planet-mask), var(--planet-mask));
    -webkit-mask-composite: xor;
    mask: linear-gradient(var(--planet-mask), var(--planet-mask)) padding-box, linear-gradient(var(--planet-mask), var(--planet-mask));
    mask-composite: exclude;
    forced-color-adjust: none;
  }

  /* Back half: hidden inside the disc's circle, so it passes behind it. */
  .planet__ring-back {
    -webkit-mask:
      radial-gradient(circle at 50% 50%, transparent calc(var(--_d) / 2 - var(--planet-edge-feather)), var(--planet-mask) calc(var(--_d) / 2)),
      linear-gradient(var(--planet-mask), var(--planet-mask)) padding-box,
      linear-gradient(var(--planet-mask), var(--planet-mask));
    -webkit-mask-composite: source-in, xor, source-over;
    mask:
      radial-gradient(circle at 50% 50%, transparent calc(var(--_d) / 2 - var(--planet-edge-feather)), var(--planet-mask) calc(var(--_d) / 2)),
      linear-gradient(var(--planet-mask), var(--planet-mask)) padding-box,
      linear-gradient(var(--planet-mask), var(--planet-mask));
    mask-composite: intersect, exclude, add;
  }

  /* Front half: the lower half of the ring box, in front of the disc. */
  .planet__ring-front {
    clip-path: inset(50% 0 0 0);
  }
}