/*  Anchor + stacking context for absolute children */
.has-float{
  position: relative;
  overflow: visible !important; /* avoid clipping by any theme rule */
  isolation: isolate;           /* gives the section its own stacking context */
  z-index: 0;
}

/* Keep the card below the mascot */
.section-card{ position: relative; z-index: 1; }

/* Flying mascot */
.fly-mascot{
  position: absolute;
  z-index: 10;                  /* above the card */
  width: clamp(140px, 22vw, 300px);
  pointer-events: none;
  transform-origin: 55% 45%;
  /* motion knobs */
  --ampY: 16px;
  --ampX: 6px;
  --bank: 3deg;
  --dur: 5.5s;
  animation:
    mascot-fly var(--dur) ease-in-out infinite,
    mascot-shadow var(--dur) ease-in-out infinite;
}

/* If any previous rule disables the animation, overrule it */
.float-img.fly-mascot{
  animation:
    mascot-fly var(--dur,5.5s) ease-in-out infinite,
    mascot-shadow var(--dur,5.5s) ease-in-out infinite !important;
}

/* Helper for right/top placement via class (your inline top/right still win) */
.float-img--right{ right: var(--fx-right, -20px); top: var(--fx-top, -20px); }

/* Flight */
@keyframes mascot-fly{
  0%   { transform: translate(calc(var(--ampX) * -1), calc(var(--ampY) * -1)) rotate(calc(var(--bank) * -1)); }
  50%  { transform: translate(var(--ampX), var(--ampY)) rotate(var(--bank)); }
  100% { transform: translate(calc(var(--ampX) * -1), calc(var(--ampY) * -1)) rotate(calc(var(--bank) * -1)); }
}
@keyframes mascot-shadow{
  0%,100% { filter: drop-shadow(0 14px 18px rgba(0,0,0,.18)); }
  50%     { filter: drop-shadow(0 8px 10px rgba(0,0,0,.12)); }
}

/* While testing, ignore reduced-motion */
@media (prefers-reduced-motion: reduce){
  .fly-mascot{ animation: mascot-shadow 5.5s ease-in-out infinite; } /* keep at least the shadow */
}


/* ensure the section is an anchor for absolutely-positioned images */
.has-float { position: relative; overflow: visible; }


/* anchor section so absolutely-positioned wrapper has context */
.has-float{
  position: relative;
  overflow: visible;      /* avoid clipping */
  isolation: isolate;     /* clean stacking context */
}

/* WRAPPER: positions the image and can be rotated/scaled independently */
.pop-wrap{
  position: absolute;
  z-index: 6;
  top: var(--fx-top, -22px);
  left: var(--fx-left, -22px);
  transform-origin: 50% 60%; /* pivot near lower-center */
  /* example: set rotation per instance via inline style:
     style="--fx-top:100px; --fx-left:-28px; transform: rotate(15deg);" */
}
/* helpers if you prefer semantic placement classes */
.pop-wrap--left  { left:  var(--fx-left, -22px); }
.pop-wrap--right { right: var(--fx-right, -22px); left: auto; }

/* IMAGE: quick shake → pop → settle (smaller than flying mascot) */
.pop-mascot{
  display: block;
  pointer-events: none;
  width: clamp(90px, 18vw, 180px);
  transform-origin: 50% 60%;
  /* per-instance knobs */
  --dur2: 4s;  /* full cycle duration */
  --shake: 5px;
  animation:
    shake-pop var(--dur2) ease-in-out infinite,
    shadow-pop var(--dur2) ease-in-out infinite;
}

/* QUICK SHAKE then POP then SETTLE */
@keyframes shake-pop{
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  4%   { transform: translate(calc(-1 * var(--shake)), 0) scale(1) rotate(-1.2deg); }
  8%   { transform: translate(var(--shake), 0) scale(1) rotate(1.2deg); }
  12%  { transform: translate(calc(-1 * var(--shake)), 0) scale(1) rotate(-1deg); }
  16%  { transform: translate(var(--shake), 0) scale(1) rotate(1deg); }
  /* pop bigger */
  24%  { transform: translate(0,0) scale(1.06) rotate(0deg); }
  32%  { transform: translate(0,0) scale(1.12) rotate(0.2deg); }
  44%  { transform: translate(0,0) scale(1.08) rotate(0deg); }
  60%  { transform: translate(0,0) scale(1.02) rotate(0deg); }
  /* settle */
  80%  { transform: translate(0,0) scale(1) rotate(0deg); }
  100% { transform: translate(0,0) scale(1) rotate(0deg); }
}

/* shadow breath to match the pop */
@keyframes shadow-pop{
  0%,100% { filter: drop-shadow(0 10px 16px rgba(0,0,0,.16)); }
  8%,16%  { filter: drop-shadow(0 7px 12px rgba(0,0,0,.14)); }   /* during shake */
  32%     { filter: drop-shadow(0 14px 22px rgba(0,0,0,.20)); }  /* biggest pop */
  60%     { filter: drop-shadow(0 12px 18px rgba(0,0,0,.18)); }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .pop-mascot{ animation: none; }
}

/* Make the section an anchor for absolute children */
.has-float { position: relative; overflow: visible; isolation: isolate; }

/* WRAPPER for the About mascot (handles placement & optional rotation) */
.reach-wrap{
  position: absolute;
  z-index: 7;                 /* above the card */
  top: var(--fx-top, -20px);
  left: var(--fx-left, -24px);
  transform-origin: 50% 70%;
}
.reach-wrap--left{ left: var(--fx-left, -24px); }

/* IMAGE: gentle vertical stretch + bob */
.reach-mascot{
  display: block;
  width: clamp(110px, 20vw, 220px);      /* a bit smaller by default */
  pointer-events: none;
  transform-origin: 50% 90%;
  /* knobs you can tweak per instance */
  --durReach: 3.2s;   /* cycle duration */
  --bob: 6px;         /* vertical bob distance */
  --stretch: 1.08;    /* peak vertical stretch (scaleY) */
  --squash: 0.97;     /* matching horizontal squash (scaleX) */
  animation:
    reach-up var(--durReach) ease-in-out infinite,
    reach-shadow var(--durReach) ease-in-out infinite;
}

/* Vertical stretch + slight bob */
@keyframes reach-up{
  0%   { transform: translateY(calc(var(--bob) * -1)) scaleX(1) scaleY(1); }
  40%  { transform: translateY(0)                           scaleX(var(--squash))  scaleY(var(--stretch)); }
  60%  { transform: translateY(calc(var(--bob) * .35))      scaleX(0.99)           scaleY(1.02); }
  100% { transform: translateY(calc(var(--bob) * -1))       scaleX(1)              scaleY(1); }
}

/* Shadow breath to match motion */
@keyframes reach-shadow{
  0%,100% { filter: drop-shadow(0 10px 16px rgba(0,0,0,.16)); }
  40%     { filter: drop-shadow(0 14px 22px rgba(0,0,0,.20)); }
  60%     { filter: drop-shadow(0 12px 18px rgba(0,0,0,.18)); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reach-mascot{ animation: none; }
}

/* Ensure the section anchors absolute children and nothing clips */
.has-float{ position: relative; overflow: visible; isolation: isolate; }

/* Space the content so the left figure doesn't overlap text */
.with-left-figure .section-card{
  position: relative;
  z-index: 1;
  /* room for the mascot on the left (responsive) */
  padding-left: clamp(140px, 24vw, 320px);
}

/* Wrapper: allow both left var AND translate-based nudging */
.reach-wrap{
  position: absolute;
  z-index: 7;
  top: var(--fx-top, -20px);
  left: var(--fx-left, -24px);
  transform:
    translate(var(--fx-translateX, 0), var(--fx-translateY, 0))
    rotate(var(--fx-rotate, 0));
  transform-origin: 50% 70%;
}

/* Keep left helper semantic (optional) */
.reach-wrap--left{ left: var(--fx-left, -24px); }

/* Image animation (from earlier) */
.reach-mascot{
  display: block;
  width: clamp(110px, 20vw, 220px);
  pointer-events: none;
  transform-origin: 50% 90%;
  --durReach: 3.2s; --bob: 6px; --stretch: 1.08; --squash: 0.97;
  animation:
    reach-up var(--durReach) ease-in-out infinite,
    reach-shadow var(--durReach) ease-in-out infinite;
}

@keyframes reach-up{
  0%   { transform: translateY(calc(var(--bob) * -1)) scaleX(1)    scaleY(1); }
  40%  { transform: translateY(0)                       scaleX(var(--squash)) scaleY(var(--stretch)); }
  60%  { transform: translateY(calc(var(--bob) * .35))  scaleX(0.99) scaleY(1.02); }
  100% { transform: translateY(calc(var(--bob) * -1))   scaleX(1)    scaleY(1); }
}
@keyframes reach-shadow{
  0%,100% { filter: drop-shadow(0 10px 16px rgba(0,0,0,.16)); }
  40%     { filter: drop-shadow(0 14px 22px rgba(0,0,0,.20)); }
  60%     { filter: drop-shadow(0 12px 18px rgba(0,0,0,.18)); }
}

/* (optional) testing outline to verify movement; remove once placed */
/* .reach-wrap{ outline: 1px dashed magenta; } */

@media (max-width: 576px){
  /* center the figure horizontally */
  #xAboutSection .reach-wrap,
  #xRulesSection .pop-wrap{
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, 0) rotate(var(--fx-rotate, 0)) !important;
    margin: 0;
    display: none;
  }

  /* let the text use full width when the figure is centered */
  .with-left-figure .section-card{
    padding-left: 1rem;
  }

  /* optional: smaller image when centered on phones */
  .reach-mascot, .pop-mascot, .fly-mascot{
    width: clamp(100px, 42vw, 160px);
  }
  #xRulesSection .pop-wrap{
  transform: translate(-50%, -28px) rotate(var(--fx-rotate, 0)) !important;
}
}