/* Two lightweight scroll-triggered whips and suspended metal ring. */
.whip-transition {
  position: relative;
  height: clamp(145px, 17vw, 210px);
  margin: -28px 0 -40px;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, #38152d44 0%, #080610 68%);
}
.whip-transition__canvas {
  display: block;
  position: absolute;
  inset: 0 auto 0 50%;
  transform: translateX(-50%);
  width: min(100%, 1440px);
  height: 100%;
  z-index: 2;
}
.whip-transition__ring {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 46px;
  height: 66%;
  transform: translateX(-50%);
  transform-origin: 50% 0;
}
.whip-transition__ring svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.whip-transition.is-cracking .whip-transition__ring {
  animation: whip-ring-swing 1.14s ease-out both;
}
@keyframes whip-ring-swing {
  0%, 32% { transform: translateX(-50%) rotate(0); }
  43% { transform: translateX(-50%) rotate(14deg); }
  55% { transform: translateX(-50%) rotate(-11deg); }
  67% { transform: translateX(-50%) rotate(6deg); }
  81% { transform: translateX(-50%) rotate(-3deg); }
  100% { transform: translateX(-50%) rotate(0); }
}
@media (max-width: 700px) {
  .whip-transition {
    height: 138px;
    margin-top: -15px;
    margin-bottom: -52px;
  }
  .whip-transition__ring { width: 36px; height: 68%; }
}
@media (prefers-reduced-motion: reduce) {
  .whip-transition.is-cracking .whip-transition__ring { animation: none; }
}