/* ==========================================================================
   hd-shapes.css — WECAMP HD decorative shapes layer (task W1.4)
   --------------------------------------------------------------------------
   Layout-only port of the homepage's decorative SVG "circle shapes": the hero
   ring cluster (._01.._05), the about-section pair (._1/._2) and the
   testimonial cluster (._1.._4). Replaces the positioning that the live site
   currently gets from academy.css. The SVG assets in static/img/shapes/ are
   unchanged; this file owns ONLY position / size / z-index — no fills, no
   animation. Depends on nothing (pure geometry); loaded after hd.css.

   ── WHY ACADEMY.CSS IS THE SOURCE (not circle-shape.css) ──────────────────
   The repo ships static/css/circle-shape.css, but it is DEAD: rtl.css pulls it
   in with `@import url("circle-shape.css");` at rtl.css:39 — AFTER ordinary
   rules (rtl.css:33-35) — and a misplaced @import is invalid per spec, so the
   browser drops it. The shapes therefore render purely from academy.css today.
   academy.css is the byte-for-byte source of truth ported below (line refs per
   block). circle-shape.css itself is exactly academy's left/right values
   mirrored (left↔right swap) — i.e. the RTL design that the broken @import was
   meant to apply but never did.

   ── PHYSICAL → LOGICAL MAPPING (RTL-correct, single rule for both dirs) ────
   academy positions with PHYSICAL left/right/top/bottom. We re-express them as
   CSS logical insets:
       left   → inset-inline-start      right  → inset-inline-end
       top    → inset-block-start       bottom → inset-block-end
   Consequences:
     • In LTR, inline-start == left, so every shape resolves to academy's exact
       pixel box — byte-for-byte identical to the current homepage (the parity
       check). 0 visual drift when academy.css is later removed (W6.1).
     • In RTL (Persian, the site default), inline-start == right, so the whole
       cluster auto-mirrors — which lands precisely on circle-shape.css's
       intended values, fixing the latent RTL bug for free, with ZERO !important
       and no per-direction overrides.
   academy's rtl.css:152 `.circle-shape{transform:scaleX(-1)!important}` is
   intentionally dropped: the rings are radially symmetric so the flip was
   visually inert, and a baked-in transform would also collide with the W4.2
   entrance animation. (Animation is decoupled: NO opacity:0 / translate here;
   W4.2 adds [data-hd-animate] + hd-animations.js.)

   ── SIZES ────────────────────────────────────────────────────────────────
   Width/height come from the SVGs' intrinsic dimensions (academy sets none),
   so no width is declared here — EXCEPT about._2 (width:36%, per academy) and
   the responsive max-width caps academy applies at small breakpoints.
   Intrinsic px, for reference:
     hero        ._01 646 · ._02 362×363 · ._03 236 · ._04 464 · ._05 433
     about       ._1 684  · ._2 417×416
     testimonial ._1 646  · ._2 229 · ._3 276 · ._4 552

   ── NAMING / MIGRATION ────────────────────────────────────────────────────
   Class names are academy's with the `circle-shape` prefix swapped to `hd-shape`
   (and nothing else), so the W5 markup migration is one deterministic
   find/replace of `circle-shape` → `hd-shape` in the templates' class attrs:
       .circle-shape                → .hd-shape                  (hero; bare, as academy)
       .circle-shape-about-section  → .hd-shape-about-section    (about)
       .circle-shape-testimonial    → .hd-shape-testimonial      (testimonial)
   The per-shape `._NN` combo modifiers are the SAME suffixes the templates
   already use. The bases carry position (+ z-index); the modifiers carry the
   per-shape insets. No template uses these classes yet, so loading this file
   changes nothing on screen today.

   BREAKPOINTS (Webflow desktop-first, mirror academy.css @media exactly):
     lg = max-width 991px   md = max-width 767px   sm = max-width 479px
   ========================================================================== */

/* ==========================================================================
   §1  Bases — positioning context + stacking
   academy.css: .circle-shape{position:absolute} (7449), z-index:-1 on every
   hero/about modifier (7453-7481, 6826-6838); .circle-shape-testimonial
   {position:absolute} (6714) with NO z-index on its modifiers.
   z-index is hoisted onto the base here (identical to per-modifier) for hero
   and about; testimonial keeps default stacking, exactly as academy.
   ========================================================================== */
.hd-shape,
.hd-shape-about-section,
.hd-shape-testimonial {
  position: absolute;
}

.hd-shape,
.hd-shape-about-section {
  z-index: -1;
}

/* ==========================================================================
   §2  Hero cluster — academy.css 7453-7481  (academy's bare .circle-shape)
   ========================================================================== */
.hd-shape._01 {                 /* academy: top -155px;  left -358px  */
  inset-block-start: -155px;
  inset-inline-start: -358px;
}

.hd-shape._02 {                 /* academy: bottom -352.5px; left -63px */
  inset-block-end: -352.5px;
  inset-inline-start: -63px;
}

.hd-shape._03 {                 /* academy: top -57px; right 327px */
  inset-block-start: -57px;
  inset-inline-end: 327px;
}

.hd-shape._04 {                 /* academy: bottom -272px; right 143px */
  inset-block-end: -272px;
  inset-inline-end: 143px;
}

.hd-shape._05 {                 /* academy: top -121px; right -267px */
  inset-block-start: -121px;
  inset-inline-end: -267px;
}

/* ==========================================================================
   §3  About-section pair — academy.css 6826-6838
   ========================================================================== */
.hd-shape-about-section._1 {    /* academy: top -211px; left -294px */
  inset-block-start: -211px;
  inset-inline-start: -294px;
}

.hd-shape-about-section._2 {    /* academy: width 36%; bottom -183px; left 350px */
  width: 36%;
  inset-block-end: -183px;
  inset-inline-start: 350px;
}

/* ==========================================================================
   §4  Testimonial cluster — academy.css 6718-6736
   ========================================================================== */
.hd-shape-testimonial._4 {      /* academy: bottom -315px; right -371px */
  inset-block-end: -315px;
  inset-inline-end: -371px;
}

.hd-shape-testimonial._2 {      /* academy: bottom -87px; right 369px */
  inset-block-end: -87px;
  inset-inline-end: 369px;
}

.hd-shape-testimonial._3 {      /* academy: top -100px; right -115px */
  inset-block-start: -100px;
  inset-inline-end: -115px;
}

.hd-shape-testimonial._1 {      /* academy: bottom -304px; left -313px */
  inset-block-end: -304px;
  inset-inline-start: -313px;
}

/* ==========================================================================
   §5  lg ≤991px — academy.css 8249 (@media max-width:991px)
   ========================================================================== */
@media screen and (max-width: 991px) {
  /* hero — academy 9259-9276 (._01 unchanged) */
  .hd-shape._02 {               /* academy: bottom -249.5px */
    inset-block-end: -249.5px;
  }
  .hd-shape._03 {               /* academy: top 463px; left 16px; right auto */
    inset-block-start: 463px;
    inset-inline-start: 16px;
    inset-inline-end: auto;
  }
  .hd-shape._04 {               /* academy: right -151px */
    inset-inline-end: -151px;
  }
  .hd-shape._05 {               /* academy: top 296px; right -167px */
    inset-block-start: 296px;
    inset-inline-end: -167px;
  }

  /* about — academy 9148-9156 */
  .hd-shape-about-section._1 {  /* academy: max-width 80%; top -89px; left -249px */
    max-width: 80%;
    inset-block-start: -89px;
    inset-inline-start: -249px;
  }
  .hd-shape-about-section._2 {  /* academy: bottom 167px; left 531px */
    inset-block-end: 167px;
    inset-inline-start: 531px;
  }

  /* testimonial — academy 9126-9138 */
  .hd-shape-testimonial._4 {    /* academy: right -170px */
    inset-inline-end: -170px;
  }
  .hd-shape-testimonial._2 {    /* academy: inset -56px auto auto -43px (T/R/B/L) */
    inset-block-start: -56px;
    inset-inline-end: auto;
    inset-block-end: auto;
    inset-inline-start: -43px;
  }
  .hd-shape-testimonial._1 {    /* academy: max-width 80%; bottom -239px; left -214px */
    max-width: 80%;
    inset-block-end: -239px;
    inset-inline-start: -214px;
  }
}

/* ==========================================================================
   §6  md ≤767px — academy.css 9408 (@media max-width:767px)
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* hero — academy 10334-10352 */
  .hd-shape._01 {               /* academy: top -155px; left -288px */
    inset-block-start: -155px;
    inset-inline-start: -288px;
  }
  .hd-shape._03 {               /* academy: top -83px; left auto; right -120px */
    inset-block-start: -83px;
    inset-inline-start: auto;
    inset-inline-end: -120px;
  }
  .hd-shape._04 {               /* academy: bottom -391px */
    inset-block-end: -391px;
  }
  .hd-shape._05 {               /* academy: max-width 50%; top 393px; right -82px */
    max-width: 50%;
    inset-block-start: 393px;
    inset-inline-end: -82px;
  }

  /* about — academy 10193-10202 */
  .hd-shape-about-section._1 {  /* academy: top -147px; left -289px */
    inset-block-start: -147px;
    inset-inline-start: -289px;
  }
  .hd-shape-about-section._2 {  /* academy: max-width 70%; bottom 238px; left auto; right -60px */
    max-width: 70%;
    inset-block-end: 238px;
    inset-inline-start: auto;
    inset-inline-end: -60px;
  }

  /* testimonial — academy 10163-10178 */
  .hd-shape-testimonial._4 {    /* academy: max-width 80%; bottom -209px */
    max-width: 80%;
    inset-block-end: -209px;
  }
  .hd-shape-testimonial._2 {    /* academy: left -55px */
    inset-inline-start: -55px;
  }
  .hd-shape-testimonial._3 {    /* academy: right -99px */
    inset-inline-end: -99px;
  }
  .hd-shape-testimonial._1 {    /* academy: bottom -211px; left -127px */
    inset-block-end: -211px;
    inset-inline-start: -127px;
  }
}

/* ==========================================================================
   §7  sm ≤479px — academy.css 10455 (@media max-width:479px)
   ========================================================================== */
@media screen and (max-width: 479px) {
  /* hero — academy 11426-11449 */
  .hd-shape._01 {               /* academy: top -88px; left -157px */
    inset-block-start: -88px;
    inset-inline-start: -157px;
  }
  .hd-shape._02 {               /* academy: max-width 80%; bottom -173.5px; left -173px */
    max-width: 80%;
    inset-block-end: -173.5px;
    inset-inline-start: -173px;
  }
  .hd-shape._03 {               /* academy: top -57px; right -124px (left stays auto from md) */
    inset-block-start: -57px;
    inset-inline-end: -124px;
  }
  .hd-shape._04 {               /* academy: bottom -229px; right -250px */
    inset-block-end: -229px;
    inset-inline-end: -250px;
  }
  .hd-shape._05 {               /* academy: top 493px; right -61px (max-width 50% from md) */
    inset-block-start: 493px;
    inset-inline-end: -61px;
  }

  /* about — academy 11291-11300 */
  .hd-shape-about-section._1 {  /* academy: max-width 100%; top 105px; left -126px */
    max-width: 100%;
    inset-block-start: 105px;
    inset-inline-start: -126px;
  }
  .hd-shape-about-section._2 {  /* academy: max-width 80%; bottom 196px; left 143px
                                   (right -60px persists from md → over-constrained,
                                   start+width win; faithfully NOT reset, as academy) */
    max-width: 80%;
    inset-block-end: 196px;
    inset-inline-start: 143px;
  }

  /* testimonial — academy 11247-11264 */
  .hd-shape-testimonial._4 {    /* academy: max-width 100%; bottom 123px; right -190px */
    max-width: 100%;
    inset-block-end: 123px;
    inset-inline-end: -190px;
  }
  .hd-shape-testimonial._2 {    /* academy: top 359px */
    inset-block-start: 359px;
  }
  .hd-shape-testimonial._3 {    /* academy: max-width 80%; top -59px (right -99 from md) */
    max-width: 80%;
    inset-block-start: -59px;
  }
  .hd-shape-testimonial._1 {    /* academy: bottom -167px; left -90px */
    inset-block-end: -167px;
    inset-inline-start: -90px;
  }
}