/**
 * ============================================================================
 * DECORATIVE ELEMENTS - Visual Effects & Ornamental Components
 * ============================================================================
 * 
 * Purpose: Provides reusable decorative visual effects including glowing
 * spheres, circular text containers with SVG decorations, and corner glows.
 * 
 * Components:
 * - Glowing Sphere: Radial gradient glow effect with responsive sizing
 * - Circle Wrap: Centered text with circular PNG decoration
 * - Decor Wrap: Text with circle + arrow decoration positioning
 * - Glowing Corner: Subtle top-left corner glow effect
 * 
 * @package     4pmix-WordPress
 * @subpackage  Question-Answer-Block/Assets
 * @version     1.0.0
 * ============================================================================
 */


/* ============================================================================
   GLOWING SPHERE
   ============================================================================
   Creates an isolated radial gradient glow effect behind content using a
   pseudo-element. Fully responsive with CSS custom properties for easy
   per-breakpoint tuning.
   
   Usage: Add class "glowing-sphere" to any container
   Variables: --g-w, --g-h, --g-x, --g-y, --g-opacity
   ============================================================================ */

.glowing-sphere {
  position: relative;
  z-index: 2;
  /* Sits above background */
  isolation: isolate;
  /* Keeps ::before behind only this element */

  /* Glow control variables (customizable per breakpoint) */
  --g-w: 538px;
  /* Glow width  */
  --g-h: 454px;
  /* Glow height */
  --g-x: 0px;
  /* Horizontal offset (+right, -left) */
  --g-y: 0px;
  /* Vertical offset (+down, -up) */
  --g-opacity: 1;
  /* Opacity multiplier (0..1) */
}

.glowing-sphere::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /* Center with adjustable offsets */
  transform: translate(calc(-50% + var(--g-x)), calc(-50% + var(--g-y)));
  width: var(--g-w);
  height: var(--g-h);
  border-radius: 9999px;
  background: radial-gradient(56.39% 56.04% at 50% 50%,
      rgba(184, 255, 0, calc(0.8 * var(--g-opacity))) 0%,
      rgba(243, 243, 243, 0) 82.21%);
  z-index: -1;
  /* Behind content of .glowing-sphere only */
  pointer-events: none;
}

/* === Responsive Glow Tuning === */

/* Extra large desktops (1921px+) */
@media (min-width: 1921px) {
  .glowing-sphere {
    --g-w: 560px;
    --g-h: 480px;
    --g-x: 0px;
    --g-y: 0px;
  }
}

/* Large desktops (1600px) */
@media (max-width: 1600px) {
  .glowing-sphere {
    --g-w: 520px;
    --g-h: 450px;
    --g-x: 0px;
    --g-y: 0px;
  }
}

/* Standard desktops (1560px) */
@media (max-width: 1560px) {
  .glowing-sphere {
    --g-w: 500px;
    --g-h: 430px;
    --g-x: 0px;
    --g-y: -4px;
  }
}

/* Standard desktops (1440px) */
@media (max-width: 1440px) {
  .glowing-sphere {
    --g-w: 480px;
    --g-h: 420px;
    --g-x: 0px;
    --g-y: -6px;
  }
}

/* Smaller desktops (1400px) */
@media (max-width: 1400px) {
  .glowing-sphere {
    --g-w: 470px;
    --g-h: 410px;
    --g-x: 0px;
    --g-y: -6px;
  }
}

/* Laptop screens (1200px) */
@media (max-width: 1200px) {
  .glowing-sphere {
    --g-w: 440px;
    --g-h: 380px;
    --g-x: 2px;
    --g-y: -8px;
  }
}

/* Tablets (900px) */
@media (max-width: 900px) {
  .glowing-sphere {
    --g-w: 420px;
    --g-h: 360px;
    --g-x: 4px;
    --g-y: -10px;
  }
}

/* Large phones (700px) */
@media (max-width: 700px) {
  .glowing-sphere {
    --g-w: 360px;
    --g-h: 320px;
    --g-x: 6px;
    --g-y: -12px;
  }
}

/* Standard phones (520px) */
@media (max-width: 520px) {
  .glowing-sphere {
    --g-w: 320px;
    --g-h: 280px;
    --g-x: 8px;
    --g-y: -14px;
  }
}

/* Small phones (375px) */
@media (max-width: 375px) {
  .glowing-sphere {
    --g-w: 300px;
    --g-h: 260px;
    --g-x: 10px;
    --g-y: -16px;
  }
}


/* ============================================================================
   CIRCLE WRAP - Text with Circular Decoration
   ============================================================================
   Displays text centered within a circular PNG decoration. Supports two
   different PNG assets with smooth opacity transition between breakpoints.
   
   Structure:
   - .circle-wrap: Container with vertical offset controls
   - .circle-text: The actual text content (relative, z-index: 3)
   - .circle-img-1 / .circle-img-2: Positioned PNG decorations
   
   Variables: --y1 (circle-img-1 offset), --y2 (circle-img-2 offset)
   ============================================================================ */

.circle-wrap {
  position: relative;
  display: inline-block;
  text-align: center;
  container-type: inline-size;

  /* Vertical offset controls for each image */
  --y1: -10px;
  /* circle-img-1 vertical adjustment */
  --y2: 0px;
  /* circle-img-2 vertical adjustment */
}

.circle-text {
  position: relative;
  z-index: 3;
  display: inline-block;
  font-size: clamp(1.125rem, 2.2vw, 3rem);
  line-height: 1.15;
}

/* Shared positioning for both circular PNG decorations */
.circle-img-1,
.circle-img-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* Default state: show first image, hide second */
.circle-img-1 {
  opacity: 1;
  width: 70%;
  transform: translate(-50%, calc(-50% + var(--y1)));
}

.circle-img-2 {
  opacity: 0;
  width: 70%;
  transform: translate(-50%, calc(-50% + var(--y2)));
}

/* === Responsive Circle Sizing === */

/* Extra large (1920+) */
@media (min-width: 1921px) {
  .circle-wrap {
    --y1: 0px;
  }

  .circle-img-1 {
    width: 65%;
  }
}

/* Large desktops (1600px) */
@media (max-width: 1600px) {
  .circle-wrap {
    --y1: -10px;
  }

  .circle-img-1 {
    width: 72%;
  }
}

/* Standard desktops (1560px) */
@media (max-width: 1560px) {
  .circle-wrap {
    --y1: -10px;
  }

  .circle-img-1 {
    width: 75%;
  }
}

/* Standard desktops (1440px) */
@media (max-width: 1440px) {
  .circle-wrap {
    --y1: -10px;
  }

  .circle-img-1 {
    width: 78%;
  }
}

/* Switch to second PNG below 1400px */
@media (max-width: 1400px) {
  .circle-img-1 {
    opacity: 0;
  }

  .circle-img-2 {
    opacity: 1;
    width: 75%;
  }

  .circle-wrap {
    --y2: 0px;
  }
}

/* Laptop screens (1200px) */
@media (max-width: 1200px) {
  .circle-wrap {
    --y2: 0px;
  }

  .circle-img-2 {
    width: 80%;
  }
}

/* Tablets (900px) */
@media (max-width: 900px) {
  .circle-wrap {
    --y2: 0px;
  }

  .circle-img-2 {
    width: 90%;
  }
}

/* Large phones (700px) */
@media (max-width: 700px) {
  .circle-wrap {
    --y2: 0px;
  }

  .circle-img-2 {
    width: 150%;
  }
}

/* Standard phones (520px) */
@media (max-width: 520px) {
  .circle-wrap {
    --y2: 0px;
  }

  .circle-img-2 {
    width: 160%;
  }
}

/* Small phones (375px) */
@media (max-width: 375px) {
  .circle-wrap {
    --y2: 0px;
  }

  .circle-img-2 {
    width: 180%;
  }
}


/* ============================================================================
   DECOR WRAP - Text with Circle + Arrow Decoration
   ============================================================================
   Displays centered text with an accompanying circular decoration and a
   separately positioned arrow graphic. All positioning controlled via CSS
   custom properties for easy per-breakpoint adjustment.
   
   Structure:
   - .decor-wrap: Container with all positioning variables
   - .decor-text: The text content
   - .decor-circle: Circular PNG behind text
   - .decor-arrow: Arrow PNG positioned independently
   
   Variables: 
   - --circle-w: Circle width (%)
   - --cy: Circle vertical offset
   - --arrow-w: Arrow width (%)
   - --ax: Arrow horizontal offset (%)
   - --ay: Arrow vertical offset (%)
   - --ar: Arrow rotation (deg)
   ============================================================================ */

.decor-wrap {
  position: relative;
  display: inline-block;
  text-align: center;
  container-type: inline-size;

  /* Global positioning controls (tunable per breakpoint) */
  --circle-w: 70%;
  /* Circle width */
  --cy: -10px;
  /* Circle vertical offset */
  --arrow-w: 15%;
  /* Arrow width (relative to container) */
  --ax: 295%;
  /* Arrow horizontal offset from center (+right, -left) */
  --ay: -120%;
  /* Arrow vertical offset from center (+down, -up) */
  --ar: 0deg;
  /* Arrow rotation */
}

.decor-text {
  position: relative;
  z-index: 3;
  display: inline-block;
  font-size: clamp(1.125rem, 2.2vw, 3rem);
  line-height: 1.15;
}

/* Circle decoration: centered behind text */
.decor-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + var(--cy)));
  width: var(--circle-w);
  height: auto;
  z-index: 1;
  pointer-events: none;
}

/* Arrow decoration: positioned via offsets from same center point */
.decor-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Translate from center, then rotate */
  transform: translate(calc(-50% + var(--ax)), calc(-50% + var(--ay))) rotate(var(--ar));
  transform-origin: center;
  width: var(--arrow-w);
  height: auto;
  z-index: 2;
  pointer-events: none;
  /* Smooth transitions for resize adjustments */
  transition: transform 0.25s ease, width 0.25s ease;
}

/* === Responsive Decoration Tuning === */

/* Extra large desktops (1921px+) */
@media (min-width: 1921px) {
  .decor-wrap {
    --circle-w: 70%;
    --cy: -10px;
    --arrow-w: 15%;
    --ax: 295%;
    --ay: -120%;
    --ar: 0deg;
  }
}

/* Large desktops (1600px) */
@media (max-width: 1600px) {
  .decor-wrap {
    --circle-w: 72%;
    --cy: -15px;
    --arrow-w: 15%;
    --ax: 295%;
    --ay: -120%;
    --ar: 0deg;
  }
}

/* Standard desktops (1560px) */
@media (max-width: 1560px) {
  .decor-wrap {
    --circle-w: 75%;
    --cy: -20px;
    --arrow-w: 15%;
    --ax: 295%;
    --ay: -250%;
    --ar: 2deg;
  }
}

/* Standard desktops (1440px) */
@media (max-width: 1440px) {
  .decor-wrap {
    --circle-w: 90%;
    --cy: -20px;
    --arrow-w: 15%;
    --ax: 295%;
    --ay: -250%;
    --ar: 3deg;
  }
}

/* Smaller desktops (1400px) */
@media (max-width: 1400px) {
  .decor-wrap {
    --circle-w: 90%;
    --cy: -20px;
    --arrow-w: 15%;
    --ax: 295%;
    --ay: -250%;
    --ar: 4deg;
  }
}

/* Laptop screens (1200px) */
@media (max-width: 1200px) {
  .decor-wrap {
    --circle-w: 100%;
    --cy: -20px;
    --arrow-w: 15%;
    --ax: 295%;
    --ay: -250%;
    --ar: 6deg;
  }
}

/* Tablets (900px) */
@media (max-width: 900px) {
  .decor-wrap {
    --circle-w: 110%;
    --cy: -30px;
    --arrow-w: 15%;
    --ax: 295%;
    --ay: -120%;
    --ar: 8deg;
  }
}

/* Large phones (992px and below) - different positioning + flip arrow */
@media (max-width: 992px) {
  .decor-wrap {
    --circle-w: 180%;
    --cy: 4px;
    --arrow-w: 15%;
    --ax: 205%;
    --ay: -260%;
    --ar: 140deg;
  }

  /* Flip arrow horizontally on mobile */
  .decor-arrow {
    transform: translate(calc(-50% + var(--ax)), calc(-50% + var(--ay))) rotate(var(--ar)) scaleX(-1);
  }
}

/* Standard phones (520px) */
@media (max-width: 520px) {
  .decor-wrap {
    --circle-w: 160%;
    --cy: 6px;
    --arrow-w: 15%;
    --ax: 180%;
    --ay: -240%;
    --ar: 140deg;
  }
}

/* Small phones (375px) */
@media (max-width: 375px) {
  .decor-wrap {
    --circle-w: 160%;
    --cy: 0px;
    --arrow-w: 15%;
    --ax: 154%;
    --ay: -260%;
    --ar: 140deg;
  }
}


/* ============================================================================
   GLOWING CORNER - Subtle Top-Left Glow Effect
   ============================================================================
   Adds a subtle, smaller glowing gradient effect in the top-left corner of
   any container. Uses pseudo-element for the glow with size caps to prevent
   excessive scaling on very large screens.
   
   Usage: Add class "glowing-corner" to any container
   ============================================================================ */

.glowing-corner {
  position: relative;
  overflow: visible;
}

.glowing-corner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-25%, -25%);
  width: 15vw;
  /* Responsive width */
  height: 15vw;
  /* Responsive height */
  max-width: 200px;
  /* Cap size for large screens */
  max-height: 200px;
  border-radius: 50%;
  background: radial-gradient(56.39% 56.04% at 50% 50%,
      rgba(184, 255, 0, 0.7) 0%,
      rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Ensure child content sits above the glow */
.glowing-corner>* {
  position: relative;
  z-index: 1;
}