/* Homepage-only decorative cards. The gradient is shared in page_backgrounds.css.
   Card values follow the supplied static composition. */
.home-background { display: none; }

/* Shift only this card when text needs clearance; preserve its rotation. */
.home-background-card--left-soft {
    translate: var(--home-card-clearance-x, 0px) var(--home-card-clearance-y, 0px);
}

.home-background-card--left-low {
    translate: var(--home-lower-card-clearance-x, 0px) var(--home-lower-card-clearance-y, 0px);
}

.home-background-card--right-low {
    translate: var(--home-lower-right-card-clearance-x, 0px) var(--home-lower-right-card-clearance-y, 0px);
}

@media (min-width: 801px) {
    .page-home .home-wrap {
        position: relative;
        isolation: isolate;
    }

    .home-background {
      display: block;
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 0;
      user-select: none;
      opacity: 1 !important;
      animation: none !important;
      transition: none !important;
    }

    /* Actual homepage content must remain above this layer. */
    .home-main,
    .site-footer-region,
    .home-hero,
    .home-features {
      position: relative;
      z-index: 1;
    }

    .home-background-card {
      position: absolute;

      width: clamp(165px, 11vw, 225px);
      aspect-ratio: 0.78;

      border-radius: 17%;

      background:
        linear-gradient(
          145deg,
          rgba(173, 228, 248, 0.70),
          rgba(148, 213, 240, 0.62)
        );

      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 10px 26px rgba(32, 110, 153, 0.07);

      overflow: hidden;

      pointer-events: none;

      animation: none !important;
      transition: none !important;
    }

    /* Head silhouette */
    .home-background-card::before {
      content: "";
      position: absolute;

      width: 35%;
      aspect-ratio: 1;

      left: 32.5%;
      top: 20%;

      border-radius: 50%;

      background: rgba(101, 174, 212, 0.82);
    }

    /* Shoulder/body silhouette */
    .home-background-card::after {
      content: "";
      position: absolute;

      width: 64%;
      height: 36%;

      left: 18%;
      bottom: 13%;

      border-radius: 48% 48% 25% 25%;

      background: rgba(111, 183, 218, 0.78);
    }


    /* LEFT OUTER — strongest left card */
    .home-background-card--left-edge {
      left: -3.5vw;
      top: 22%;

      width: clamp(185px, 12.5vw, 250px);

      opacity: 0.52;

      transform: rotate(-8deg);
    }


    /* LEFT LOWER — secondary */
    .home-background-card--left-low {
      left: 10%;
      top: 60%;

      width: clamp(155px, 10vw, 205px);

      opacity: 0.38;

      transform: rotate(5deg);

      filter: blur(0.35px);
    }


    /* LEFT UPPER / INNER — softer */
    .home-background-card--left-soft {
      left: 15%;
      top: 17%;

      width: clamp(135px, 8.5vw, 180px);

      opacity: 0.27;

      transform: rotate(8deg);

      filter: blur(0.6px);
    }


    /* RIGHT OUTER — strongest right card */
    .home-background-card--right-edge {
      right: -3vw;
      top: 28%;

      width: clamp(180px, 12vw, 245px);

      opacity: 0.50;

      transform: rotate(7deg);
    }


    /* RIGHT LOWER — secondary */
    .home-background-card--right-low {
      right: 7%;
      top: 61%;

      width: clamp(150px, 9.5vw, 200px);

      opacity: 0.36;

      transform: rotate(-5deg);

      filter: blur(0.4px);
    }


    /* RIGHT UPPER / INNER — softer */
    .home-background-card--right-soft {
      right: 14%;
      top: 18%;

      width: clamp(130px, 8vw, 175px);

      opacity: 0.25;

      transform: rotate(-6deg);

      filter: blur(0.65px);
    }
}

/* Preserve the original large-desktop lower-card clearance in short windows. */
@media (min-width: 1751px) and (max-height: 650px) {
    .home-background-card--left-low {
        top: min(60%, calc(100% - clamp(155px, 10vw, 205px) / .78 - 16px));
    }
    .home-background-card--right-low {
        top: min(61%, calc(100% - clamp(150px, 9.5vw, 200px) / .78 - 16px));
    }
}

/* Keep medium-desktop adjustments separate from the original composition
   above. Large desktops retain their original inward upper and lower cards. */
@media (min-width: 1101px) and (max-width: 1750px) {
    .home-background {
        --home-right-upper-height: calc(clamp(130px, 8vw, 175px) / .78);
        --home-right-edge-height: calc(clamp(180px, 12vw, 245px) / .78);
        --home-right-lower-height: calc(clamp(150px, 9.5vw, 200px) / .78);
    }

    .home-background-card--left-low {
        left: 1.5%;
        top: min(82%, calc(100% - clamp(155px, 10vw, 205px) / .78 - 12px));
        opacity: .36;
    }

    .home-background-card--left-soft {
        left: -2vw;
        top: 3%;
        opacity: .34;
    }

    .home-background-card--right-low {
        right: 1%;
        top: min(84%, calc(100% - clamp(150px, 9.5vw, 200px) / .78 - 14px));
        opacity: .35;
    }

    .home-background-card--right-soft {
        right: .5%;
        /* In short layouts, let the upper card extend past the top edge
           instead of squeezing the three right cards into each other. */
        top: min(4%, calc(100% - var(--home-right-lower-height) - var(--home-right-edge-height) - var(--home-right-upper-height) - 112px));
        opacity: .32;
    }

    .home-background-card--left-edge {
        left: -4.5vw;
        /* Account for the upper card's height and both rotated corners. */
        top: max(32%, calc(3% + clamp(135px, 8.5vw, 180px) / .78 + 48px));
        opacity: .52;
    }

    .home-background-card--right-edge {
        top: min(
            max(35%, calc(4% + var(--home-right-upper-height) + 54px)),
            calc(100% - var(--home-right-lower-height) - var(--home-right-edge-height) - 64px)
        );
        opacity: .50;
    }
}

/* Omit only the card that reaches into the copy on medium desktops. */
@media (min-width: 1101px) and (max-width: 1750px) {
    .home-background-card--left-edge {
        display: none;
    }
}