/* Button styling lives in custom.css, this file only positions it. */
.pippr-replay-btn {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 5;
}

/* max-width plus inset:0 and margin:auto centers this absolutely positioned box. */
.pippr-hero__stage {
  position: absolute;
  inset: 0;
  max-width: 1280px;
  margin: 0 auto;
}

.pippr-hero__logo {
  position: absolute;
  left: 35%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* !important is required here to beat the block's inline width attribute. */
@media (min-width: 601px) {
  .pippr-hero__logo img {
    width: clamp(300px, 45vw, 480px) !important;
  }
}

.pippr-hero__fienburst {
  position: absolute;
  right: 2%;
  bottom: 0;
  z-index: 2;
  /* Floor keeps clearance from the logo at narrow tablet widths (~601-700px). */
  width: clamp(200px, 34vw, 480px);
}

.pippr-fienburst {
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 700;
}
.pippr-fienburst__fien {
  position: absolute;
  right: 4%;
  bottom: -4%;
  height: 100%;
  width: auto;
  display: block;
  z-index: 2;
}
.pippr-fienburst__icon {
  position: absolute;
  display: block;
  z-index: 1;
}
/* This carries the float animation separately so it does not fight the wrapper's transform. */
.pippr-fienburst__icon img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes pippr-burst {
  0%   { transform: translate(-50%, -50%) translate(0px, 0px) scale(0.2) rotate(0deg); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1) rotate(var(--rot)); opacity: 1; }
}
@keyframes pippr-rise {
  0%   { transform: translateY(56px) scale(0.96); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* Named differently from pippr-float since keyframe names are global. */
@keyframes pippr-fienburst-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.pippr-orbit {
  position: absolute;
  top: 50%;
  left: 35%; /* matches .pippr-hero__logo, so the orbit stays centered on it */
  width: 0;
  height: 0;
  pointer-events: none;
}

.pippr-orbit__icon {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size);
  height: auto;
  margin-top: calc(var(--size) * -0.5);
  margin-left: calc(var(--size) * -0.5);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pippr-orbit__icon {
    opacity: 1;
  }
}

/* Six near-identical variants insert the burst at different points so icons do not all flare at the same spot. */
@keyframes pippr-orbit-a {
  0%     { transform: translate(calc(var(--ex) * 1),      calc(var(--ey) * 0))      rotate(calc(var(--rot) * 0));                     z-index: 4; }
  6.25%  { transform: translate(calc(var(--ex) * 0.924),  calc(var(--ey) * 0.383))  rotate(calc(var(--rot) * 0.20));                  z-index: 4; }
  12.5%  { transform: translate(calc(var(--ex) * 0.707),  calc(var(--ey) * 0.707))  rotate(calc(var(--rot) * 0.35 + var(--burst)));   z-index: 4; }
  18.75% { transform: translate(calc(var(--ex) * 0.383),  calc(var(--ey) * 0.924))  rotate(calc(var(--rot) * 0.15 + var(--burst)));   z-index: 4; }
  25%    { transform: translate(calc(var(--ex) * 0),      calc(var(--ey) * 1))      rotate(calc(var(--rot) * 0.55 + var(--burst)));   z-index: 4; }
  31.25% { transform: translate(calc(var(--ex) * -0.383), calc(var(--ey) * 0.924))  rotate(calc(var(--rot) * 0.80 + var(--burst)));   z-index: 4; }
  37.5%  { transform: translate(calc(var(--ex) * -0.707), calc(var(--ey) * 0.707))  rotate(calc(var(--rot) * 0.60 + var(--burst)));   z-index: 4; }
  43.75% { transform: translate(calc(var(--ex) * -0.924), calc(var(--ey) * 0.383))  rotate(calc(var(--rot) * 0.90 + var(--burst)));   z-index: 4; }
  50%    { transform: translate(calc(var(--ex) * -1),     calc(var(--ey) * 0))      rotate(calc(var(--rot) * 0.70 + var(--burst)));   z-index: 1; }
  56.25% { transform: translate(calc(var(--ex) * -0.924), calc(var(--ey) * -0.383)) rotate(calc(var(--rot) * 0.40 + var(--burst)));   z-index: 1; }
  62.5%  { transform: translate(calc(var(--ex) * -0.707), calc(var(--ey) * -0.707)) rotate(calc(var(--rot) * 0.65 + var(--burst)));   z-index: 1; }
  68.75% { transform: translate(calc(var(--ex) * -0.383), calc(var(--ey) * -0.924)) rotate(calc(var(--rot) * 0.30 + var(--burst)));   z-index: 1; }
  75%    { transform: translate(calc(var(--ex) * 0),      calc(var(--ey) * -1))     rotate(calc(var(--rot) * 0.50 + var(--burst)));   z-index: 1; }
  81.25% { transform: translate(calc(var(--ex) * 0.383),  calc(var(--ey) * -0.924)) rotate(calc(var(--rot) * 0.20 + var(--burst)));   z-index: 1; }
  87.5%  { transform: translate(calc(var(--ex) * 0.707),  calc(var(--ey) * -0.707)) rotate(calc(var(--rot) * 0.35 + var(--burst)));   z-index: 1; }
  93.75% { transform: translate(calc(var(--ex) * 0.924),  calc(var(--ey) * -0.383)) rotate(calc(var(--rot) * 0.10 + var(--burst)));   z-index: 1; }
  100%   { transform: translate(calc(var(--ex) * 1),      calc(var(--ey) * 0))      rotate(calc(var(--rot) * 0 + var(--burst)));      z-index: 4; }
}

@keyframes pippr-orbit-b {
  0%     { transform: translate(calc(var(--ex) * 1),      calc(var(--ey) * 0))      rotate(calc(var(--rot) * 0));                     z-index: 4; }
  6.25%  { transform: translate(calc(var(--ex) * 0.924),  calc(var(--ey) * 0.383))  rotate(calc(var(--rot) * 0.20));                  z-index: 4; }
  12.5%  { transform: translate(calc(var(--ex) * 0.707),  calc(var(--ey) * 0.707))  rotate(calc(var(--rot) * 0.35));                  z-index: 4; }
  18.75% { transform: translate(calc(var(--ex) * 0.383),  calc(var(--ey) * 0.924))  rotate(calc(var(--rot) * 0.15));                  z-index: 4; }
  25%    { transform: translate(calc(var(--ex) * 0),      calc(var(--ey) * 1))      rotate(calc(var(--rot) * 0.55 + var(--burst)));   z-index: 4; }
  31.25% { transform: translate(calc(var(--ex) * -0.383), calc(var(--ey) * 0.924))  rotate(calc(var(--rot) * 0.80 + var(--burst)));   z-index: 4; }
  37.5%  { transform: translate(calc(var(--ex) * -0.707), calc(var(--ey) * 0.707))  rotate(calc(var(--rot) * 0.60 + var(--burst)));   z-index: 4; }
  43.75% { transform: translate(calc(var(--ex) * -0.924), calc(var(--ey) * 0.383))  rotate(calc(var(--rot) * 0.90 + var(--burst)));   z-index: 4; }
  50%    { transform: translate(calc(var(--ex) * -1),     calc(var(--ey) * 0))      rotate(calc(var(--rot) * 0.70 + var(--burst)));   z-index: 1; }
  56.25% { transform: translate(calc(var(--ex) * -0.924), calc(var(--ey) * -0.383)) rotate(calc(var(--rot) * 0.40 + var(--burst)));   z-index: 1; }
  62.5%  { transform: translate(calc(var(--ex) * -0.707), calc(var(--ey) * -0.707)) rotate(calc(var(--rot) * 0.65 + var(--burst)));   z-index: 1; }
  68.75% { transform: translate(calc(var(--ex) * -0.383), calc(var(--ey) * -0.924)) rotate(calc(var(--rot) * 0.30 + var(--burst)));   z-index: 1; }
  75%    { transform: translate(calc(var(--ex) * 0),      calc(var(--ey) * -1))     rotate(calc(var(--rot) * 0.50 + var(--burst)));   z-index: 1; }
  81.25% { transform: translate(calc(var(--ex) * 0.383),  calc(var(--ey) * -0.924)) rotate(calc(var(--rot) * 0.20 + var(--burst)));   z-index: 1; }
  87.5%  { transform: translate(calc(var(--ex) * 0.707),  calc(var(--ey) * -0.707)) rotate(calc(var(--rot) * 0.35 + var(--burst)));   z-index: 1; }
  93.75% { transform: translate(calc(var(--ex) * 0.924),  calc(var(--ey) * -0.383)) rotate(calc(var(--rot) * 0.10 + var(--burst)));   z-index: 1; }
  100%   { transform: translate(calc(var(--ex) * 1),      calc(var(--ey) * 0))      rotate(calc(var(--rot) * 0 + var(--burst)));      z-index: 4; }
}

@keyframes pippr-orbit-c {
  0%     { transform: translate(calc(var(--ex) * 1),      calc(var(--ey) * 0))      rotate(calc(var(--rot) * 0));                     z-index: 4; }
  6.25%  { transform: translate(calc(var(--ex) * 0.924),  calc(var(--ey) * 0.383))  rotate(calc(var(--rot) * 0.20));                  z-index: 4; }
  12.5%  { transform: translate(calc(var(--ex) * 0.707),  calc(var(--ey) * 0.707))  rotate(calc(var(--rot) * 0.35));                  z-index: 4; }
  18.75% { transform: translate(calc(var(--ex) * 0.383),  calc(var(--ey) * 0.924))  rotate(calc(var(--rot) * 0.15));                  z-index: 4; }
  25%    { transform: translate(calc(var(--ex) * 0),      calc(var(--ey) * 1))      rotate(calc(var(--rot) * 0.55));                  z-index: 4; }
  31.25% { transform: translate(calc(var(--ex) * -0.383), calc(var(--ey) * 0.924))  rotate(calc(var(--rot) * 0.80));                  z-index: 4; }
  37.5%  { transform: translate(calc(var(--ex) * -0.707), calc(var(--ey) * 0.707))  rotate(calc(var(--rot) * 0.60));                  z-index: 4; }
  43.75% { transform: translate(calc(var(--ex) * -0.924), calc(var(--ey) * 0.383))  rotate(calc(var(--rot) * 0.90 + var(--burst)));   z-index: 4; }
  50%    { transform: translate(calc(var(--ex) * -1),     calc(var(--ey) * 0))      rotate(calc(var(--rot) * 0.70 + var(--burst)));   z-index: 1; }
  56.25% { transform: translate(calc(var(--ex) * -0.924), calc(var(--ey) * -0.383)) rotate(calc(var(--rot) * 0.40 + var(--burst)));   z-index: 1; }
  62.5%  { transform: translate(calc(var(--ex) * -0.707), calc(var(--ey) * -0.707)) rotate(calc(var(--rot) * 0.65 + var(--burst)));   z-index: 1; }
  68.75% { transform: translate(calc(var(--ex) * -0.383), calc(var(--ey) * -0.924)) rotate(calc(var(--rot) * 0.30 + var(--burst)));   z-index: 1; }
  75%    { transform: translate(calc(var(--ex) * 0),      calc(var(--ey) * -1))     rotate(calc(var(--rot) * 0.50 + var(--burst)));   z-index: 1; }
  81.25% { transform: translate(calc(var(--ex) * 0.383),  calc(var(--ey) * -0.924)) rotate(calc(var(--rot) * 0.20 + var(--burst)));   z-index: 1; }
  87.5%  { transform: translate(calc(var(--ex) * 0.707),  calc(var(--ey) * -0.707)) rotate(calc(var(--rot) * 0.35 + var(--burst)));   z-index: 1; }
  93.75% { transform: translate(calc(var(--ex) * 0.924),  calc(var(--ey) * -0.383)) rotate(calc(var(--rot) * 0.10 + var(--burst)));   z-index: 1; }
  100%   { transform: translate(calc(var(--ex) * 1),      calc(var(--ey) * 0))      rotate(calc(var(--rot) * 0 + var(--burst)));      z-index: 4; }
}

@keyframes pippr-orbit-d {
  0%     { transform: translate(calc(var(--ex) * 1),      calc(var(--ey) * 0))      rotate(calc(var(--rot) * 0));                     z-index: 4; }
  6.25%  { transform: translate(calc(var(--ex) * 0.924),  calc(var(--ey) * 0.383))  rotate(calc(var(--rot) * 0.20));                  z-index: 4; }
  12.5%  { transform: translate(calc(var(--ex) * 0.707),  calc(var(--ey) * 0.707))  rotate(calc(var(--rot) * 0.35));                  z-index: 4; }
  18.75% { transform: translate(calc(var(--ex) * 0.383),  calc(var(--ey) * 0.924))  rotate(calc(var(--rot) * 0.15));                  z-index: 4; }
  25%    { transform: translate(calc(var(--ex) * 0),      calc(var(--ey) * 1))      rotate(calc(var(--rot) * 0.55));                  z-index: 4; }
  31.25% { transform: translate(calc(var(--ex) * -0.383), calc(var(--ey) * 0.924))  rotate(calc(var(--rot) * 0.80));                  z-index: 4; }
  37.5%  { transform: translate(calc(var(--ex) * -0.707), calc(var(--ey) * 0.707))  rotate(calc(var(--rot) * 0.60));                  z-index: 4; }
  43.75% { transform: translate(calc(var(--ex) * -0.924), calc(var(--ey) * 0.383))  rotate(calc(var(--rot) * 0.90));                  z-index: 4; }
  50%    { transform: translate(calc(var(--ex) * -1),     calc(var(--ey) * 0))      rotate(calc(var(--rot) * 0.70));                  z-index: 1; }
  56.25% { transform: translate(calc(var(--ex) * -0.924), calc(var(--ey) * -0.383)) rotate(calc(var(--rot) * 0.40));                  z-index: 1; }
  62.5%  { transform: translate(calc(var(--ex) * -0.707), calc(var(--ey) * -0.707)) rotate(calc(var(--rot) * 0.65 + var(--burst)));   z-index: 1; }
  68.75% { transform: translate(calc(var(--ex) * -0.383), calc(var(--ey) * -0.924)) rotate(calc(var(--rot) * 0.30 + var(--burst)));   z-index: 1; }
  75%    { transform: translate(calc(var(--ex) * 0),      calc(var(--ey) * -1))     rotate(calc(var(--rot) * 0.50 + var(--burst)));   z-index: 1; }
  81.25% { transform: translate(calc(var(--ex) * 0.383),  calc(var(--ey) * -0.924)) rotate(calc(var(--rot) * 0.20 + var(--burst)));   z-index: 1; }
  87.5%  { transform: translate(calc(var(--ex) * 0.707),  calc(var(--ey) * -0.707)) rotate(calc(var(--rot) * 0.35 + var(--burst)));   z-index: 1; }
  93.75% { transform: translate(calc(var(--ex) * 0.924),  calc(var(--ey) * -0.383)) rotate(calc(var(--rot) * 0.10 + var(--burst)));   z-index: 1; }
  100%   { transform: translate(calc(var(--ex) * 1),      calc(var(--ey) * 0))      rotate(calc(var(--rot) * 0 + var(--burst)));      z-index: 4; }
}

@keyframes pippr-orbit-e {
  0%     { transform: translate(calc(var(--ex) * 1),      calc(var(--ey) * 0))      rotate(calc(var(--rot) * 0));                     z-index: 4; }
  6.25%  { transform: translate(calc(var(--ex) * 0.924),  calc(var(--ey) * 0.383))  rotate(calc(var(--rot) * 0.20));                  z-index: 4; }
  12.5%  { transform: translate(calc(var(--ex) * 0.707),  calc(var(--ey) * 0.707))  rotate(calc(var(--rot) * 0.35));                  z-index: 4; }
  18.75% { transform: translate(calc(var(--ex) * 0.383),  calc(var(--ey) * 0.924))  rotate(calc(var(--rot) * 0.15));                  z-index: 4; }
  25%    { transform: translate(calc(var(--ex) * 0),      calc(var(--ey) * 1))      rotate(calc(var(--rot) * 0.55));                  z-index: 4; }
  31.25% { transform: translate(calc(var(--ex) * -0.383), calc(var(--ey) * 0.924))  rotate(calc(var(--rot) * 0.80));                  z-index: 4; }
  37.5%  { transform: translate(calc(var(--ex) * -0.707), calc(var(--ey) * 0.707))  rotate(calc(var(--rot) * 0.60));                  z-index: 4; }
  43.75% { transform: translate(calc(var(--ex) * -0.924), calc(var(--ey) * 0.383))  rotate(calc(var(--rot) * 0.90));                  z-index: 4; }
  50%    { transform: translate(calc(var(--ex) * -1),     calc(var(--ey) * 0))      rotate(calc(var(--rot) * 0.70));                  z-index: 1; }
  56.25% { transform: translate(calc(var(--ex) * -0.924), calc(var(--ey) * -0.383)) rotate(calc(var(--rot) * 0.40));                  z-index: 1; }
  62.5%  { transform: translate(calc(var(--ex) * -0.707), calc(var(--ey) * -0.707)) rotate(calc(var(--rot) * 0.65));                  z-index: 1; }
  68.75% { transform: translate(calc(var(--ex) * -0.383), calc(var(--ey) * -0.924)) rotate(calc(var(--rot) * 0.30));                  z-index: 1; }
  75%    { transform: translate(calc(var(--ex) * 0),      calc(var(--ey) * -1))     rotate(calc(var(--rot) * 0.50 + var(--burst)));   z-index: 1; }
  81.25% { transform: translate(calc(var(--ex) * 0.383),  calc(var(--ey) * -0.924)) rotate(calc(var(--rot) * 0.20 + var(--burst)));   z-index: 1; }
  87.5%  { transform: translate(calc(var(--ex) * 0.707),  calc(var(--ey) * -0.707)) rotate(calc(var(--rot) * 0.35 + var(--burst)));   z-index: 1; }
  93.75% { transform: translate(calc(var(--ex) * 0.924),  calc(var(--ey) * -0.383)) rotate(calc(var(--rot) * 0.10 + var(--burst)));   z-index: 1; }
  100%   { transform: translate(calc(var(--ex) * 1),      calc(var(--ey) * 0))      rotate(calc(var(--rot) * 0 + var(--burst)));      z-index: 4; }
}

@keyframes pippr-orbit-f {
  0%     { transform: translate(calc(var(--ex) * 1),      calc(var(--ey) * 0))      rotate(calc(var(--rot) * 0));                     z-index: 4; }
  6.25%  { transform: translate(calc(var(--ex) * 0.924),  calc(var(--ey) * 0.383))  rotate(calc(var(--rot) * 0.20));                  z-index: 4; }
  12.5%  { transform: translate(calc(var(--ex) * 0.707),  calc(var(--ey) * 0.707))  rotate(calc(var(--rot) * 0.35));                  z-index: 4; }
  18.75% { transform: translate(calc(var(--ex) * 0.383),  calc(var(--ey) * 0.924))  rotate(calc(var(--rot) * 0.15));                  z-index: 4; }
  25%    { transform: translate(calc(var(--ex) * 0),      calc(var(--ey) * 1))      rotate(calc(var(--rot) * 0.55));                  z-index: 4; }
  31.25% { transform: translate(calc(var(--ex) * -0.383), calc(var(--ey) * 0.924))  rotate(calc(var(--rot) * 0.80));                  z-index: 4; }
  37.5%  { transform: translate(calc(var(--ex) * -0.707), calc(var(--ey) * 0.707))  rotate(calc(var(--rot) * 0.60));                  z-index: 4; }
  43.75% { transform: translate(calc(var(--ex) * -0.924), calc(var(--ey) * 0.383))  rotate(calc(var(--rot) * 0.90));                  z-index: 4; }
  50%    { transform: translate(calc(var(--ex) * -1),     calc(var(--ey) * 0))      rotate(calc(var(--rot) * 0.70));                  z-index: 1; }
  56.25% { transform: translate(calc(var(--ex) * -0.924), calc(var(--ey) * -0.383)) rotate(calc(var(--rot) * 0.40));                  z-index: 1; }
  62.5%  { transform: translate(calc(var(--ex) * -0.707), calc(var(--ey) * -0.707)) rotate(calc(var(--rot) * 0.65));                  z-index: 1; }
  68.75% { transform: translate(calc(var(--ex) * -0.383), calc(var(--ey) * -0.924)) rotate(calc(var(--rot) * 0.30));                  z-index: 1; }
  75%    { transform: translate(calc(var(--ex) * 0),      calc(var(--ey) * -1))     rotate(calc(var(--rot) * 0.50));                  z-index: 1; }
  81.25% { transform: translate(calc(var(--ex) * 0.383),  calc(var(--ey) * -0.924)) rotate(calc(var(--rot) * 0.20));                  z-index: 1; }
  87.5%  { transform: translate(calc(var(--ex) * 0.707),  calc(var(--ey) * -0.707)) rotate(calc(var(--rot) * 0.35));                  z-index: 1; }
  93.75% { transform: translate(calc(var(--ex) * 0.924),  calc(var(--ey) * -0.383)) rotate(calc(var(--rot) * 0.10 + var(--burst)));   z-index: 1; }
  100%   { transform: translate(calc(var(--ex) * 1),      calc(var(--ey) * 0))      rotate(calc(var(--rot) * 0 + var(--burst)));      z-index: 4; }
}

/* .pippr-orbit position must match .pippr-hero__logo above, same pairing as desktop. */
@media (max-width: 600px) {
  .pippr-hero__logo {
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
  }

  /* Sized against viewport width to avoid clipping against .pippr-hero's overflow:hidden. */
  .pippr-hero__logo img {
    width: clamp(220px, 65vw, 320px) !important;
  }
  .pippr-orbit {
    left: 50%;
    top: 30%;
  }
}