/* ============================================================
   MMW-STYLE HERO MOTION  (v3)

   Animations measured from makemywebsite.com.au (their theme CSS):

   .welcome-one__shape-1 {
     position:absolute; bottom:-40px; right:10%;
     width:255px; height:236px;
     border:2px solid white; border-radius:50%;
     opacity:.50; transform-origin:center bottom;
     animation: bounce 5s ease-out infinite;
   }
   @keyframes bounce {
     0%,20%,50%,80%,100% { transform: translateY(0); }
     40% { transform: translateY(-30px); }
     60% { transform: translateY(-15px); }
   }

   .welcome-one__shape-2 {
     position:absolute; bottom:-40px; right:60px;
     width:185px; height:185px;
     background: var(--moniz-primary, #ed1c24);
     border-radius:50%; transform-origin:center bottom;
     animation: banner3Shake 5s ease-out 1s infinite;
   }
   @keyframes banner3Shake {
     0%   { transform: rotate3d(0,1,0,0deg); }
     30%  { transform: rotate3d(0,0,1,15deg); }
     60%  { transform: rotate3d(1,0,0,0deg); }
     80%  { transform: rotate3d(0,0,1,15deg); }
     100% { transform: rotate3d(0,1,0,0deg); }
   }

   @keyframes btnWiggle {
     0%   { transform: rotate(0deg); }
     2%   { transform: rotate(-3deg); }
     3.5% { transform: rotate(3deg); }
     5%   { transform: rotate(0deg); }
     100% { transform: rotate(0deg); }
   }
   ============================================================ */


@keyframes bounce{
  0%,20%,50%,80%,100%{transform:translateY(0);}
  40%{transform:translateY(-30px);}
  60%{transform:translateY(-15px);}
}
@keyframes banner3Shake{
  0%  {transform:rotate3d(0,1,0,0deg);}
  30% {transform:rotate3d(0,0,1,15deg);}
  60% {transform:rotate3d(1,0,0,0deg);}
  80% {transform:rotate3d(0,0,1,15deg);}
  100%{transform:rotate3d(0,1,0,0deg);}
}

/* ---------- button wiggle (their btnWiggle, 2s loop) ---------- */
@keyframes btnWiggle{
  0%  {transform:rotate(0deg);}
  2%  {transform:rotate(-3deg);}
  3.5%{transform:rotate(3deg);}
  5%  {transform:rotate(0deg);}
  100%{transform:rotate(0deg);}
}
.hero__actions .btn--wiggle{animation:btnWiggle 2s ease infinite;}

/* ---------- the frame gets a slow float + the ring spins ---------- */
/* .hero__disc animation is owned by mmw-v3.css (v4) */
@keyframes discFloat{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-10px);}
}
/* slow continuous rotation of the red ring inside the frame is not possible on a
   single PNG, so the frame asset's accents get a subtle counter-rotate instead. */

/* the square frame must not spin (it would look wrong) — counter-spin the image
   back by animating only the inner element is not possible on one <img>,
   so we keep the frame static and let the drop-shadow breathe instead. */


/* ---------- the crescent was removed (not in MMW) ---------- */

/* ---------- ambient background: slow drifting gradient orbs ---------- */
.hero__orb{
  position:absolute;z-index:0;pointer-events:none;border-radius:50%;
  filter:blur(58px);opacity:.5;
}
.hero__orb--1{
  width:420px;height:420px;left:-90px;top:12%;
  background:radial-gradient(circle, rgba(237,28,36,.30), rgba(237,28,36,0) 70%);
  animation:drift1 22s ease-in-out infinite;
}
.hero__orb--2{
  width:520px;height:520px;right:-130px;bottom:6%;
  background:radial-gradient(circle, rgba(60,64,72,.34), rgba(60,64,72,0) 70%);
  animation:drift2 28s ease-in-out infinite;
}
@keyframes drift1{
  0%,100%{transform:translate(0,0) scale(1);}
  50%    {transform:translate(46px,38px) scale(1.14);}
}
@keyframes drift2{
  0%,100%{transform:translate(0,0) scale(1);}
  50%    {transform:translate(-52px,-42px) scale(1.1);}
}

/* ---------- the review card gently pulses ---------- */
.hero__review{
  animation:upIn .8s var(--ease) .4s both, cardPulse 6s ease-in-out 2s infinite;
}
@keyframes cardPulse{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-7px);}
}

/* ---------- the stat numerals count up ---------- */
/* Numbers start hidden and are revealed by the count-up JS adding .is-in.
   If JS never runs, .hero__strip .stat__num must still be visible, so the
   hiding rule is scoped to .js-anim (set by an inline script in <head>). */
/* The number is NEVER hidden by CSS — if JS fails, the real value still shows.
   The count-up JS animates opacity/transform via the Web Animations API. */
.hero__strip .stat__num{
  font-variant-numeric:tabular-nums;
  display:block;opacity:1;transform:none;
}
.hero__strip .stat__num b{color:var(--mmw-red);font-weight:700;}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .hero__ring,.hero__ball,.hero__orb,.hero__review,.hero__disc,
  .hero__actions .btn--wiggle,.hero__strip .stat__num{
    animation:none !important;opacity:1 !important;transform:none !important;
  }
}

/* position the motion shapes against the frame, not the viewport */
@media (max-width:1080px){
}
@media (max-width:640px){
}