.tear-stage { position: relative; overflow: hidden; background: var(--bg); }

.tear-stage.is-armed { background: #e6e9f0; }
.tear-stage > .hero { position: relative; z-index: 0; }

.tear-stage > .tear-clone {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.tear-stage.is-armed > .hero  { clip-path: polygon(0% 0%, 50.00% 0.0%, 50.72% 2.0%, 51.63% 4.0%, 53.06% 6.0%, 49.91% 8.0%, 52.58% 10.0%, 49.87% 12.0%, 50.96% 14.0%, 50.42% 16.0%, 50.28% 18.0%, 52.89% 20.0%, 50.54% 22.0%, 50.82% 24.0%, 51.25% 26.0%, 52.08% 28.0%, 51.69% 30.0%, 53.79% 32.0%, 53.17% 34.0%, 49.71% 36.0%, 49.13% 38.0%, 49.25% 40.0%, 48.52% 42.0%, 49.43% 44.0%, 48.58% 46.0%, 46.87% 48.0%, 48.65% 50.0%, 48.73% 52.0%, 51.96% 54.0%, 49.30% 56.0%, 48.99% 58.0%, 48.90% 60.0%, 47.45% 62.0%, 47.96% 64.0%, 48.12% 66.0%, 48.57% 68.0%, 48.70% 70.0%, 49.01% 72.0%, 48.37% 74.0%, 46.42% 76.0%, 50.35% 78.0%, 50.30% 80.0%, 49.90% 82.0%, 50.90% 84.0%, 50.79% 86.0%, 50.57% 88.0%, 49.45% 90.0%, 50.00% 92.0%, 50.49% 94.0%, 49.60% 96.0%, 48.22% 98.0%, 50.00% 100.0%, 0% 100%); }
.tear-stage.is-armed > .tear-clone { clip-path: polygon(100% 0%, 100% 100%, 50.00% 100.0%, 48.22% 98.0%, 49.60% 96.0%, 50.49% 94.0%, 50.00% 92.0%, 49.45% 90.0%, 50.57% 88.0%, 50.79% 86.0%, 50.90% 84.0%, 49.90% 82.0%, 50.30% 80.0%, 50.35% 78.0%, 46.42% 76.0%, 48.37% 74.0%, 49.01% 72.0%, 48.70% 70.0%, 48.57% 68.0%, 48.12% 66.0%, 47.96% 64.0%, 47.45% 62.0%, 48.90% 60.0%, 48.99% 58.0%, 49.30% 56.0%, 51.96% 54.0%, 48.73% 52.0%, 48.65% 50.0%, 46.87% 48.0%, 48.58% 46.0%, 49.43% 44.0%, 48.52% 42.0%, 49.25% 40.0%, 49.13% 38.0%, 49.71% 36.0%, 53.17% 34.0%, 53.79% 32.0%, 51.69% 30.0%, 52.08% 28.0%, 51.25% 26.0%, 50.82% 24.0%, 50.54% 22.0%, 52.89% 20.0%, 50.28% 18.0%, 50.42% 16.0%, 50.96% 14.0%, 49.87% 12.0%, 52.58% 10.0%, 49.91% 8.0%, 53.06% 6.0%, 51.63% 4.0%, 50.72% 2.0%, 50.00% 0.0%); }
.tear-stage.is-armed > .hero,
.tear-stage.is-armed > .tear-clone {
  will-change: transform;

  filter: drop-shadow(0 0 1px rgba(15, 23, 79, .55)) drop-shadow(0 2px 3px rgba(15, 23, 79, .22));
  transition: transform var(--rip, 240ms) cubic-bezier(.16, .84, .30, 1);
}

.tear-stage.is-torn > .hero       { transform: translate(-11px, -30px) rotate(-.50deg); }
.tear-stage.is-torn > .tear-clone { transform: translate(11px, 30px) rotate(.50deg); }

@media (max-width: 899.98px) {
  .tear-stage.is-torn > .hero       { transform: translate(-5px, -15px) rotate(-.26deg); }
  .tear-stage.is-torn > .tear-clone { transform: translate(5px, 15px) rotate(.26deg); }
}

.tear-stage.is-mending > .hero,
.tear-stage.is-mending > .tear-clone {
  transform: none;
  transition-duration: var(--mend, 160ms);
  transition-timing-function: cubic-bezier(.33, 0, .18, 1);
}

.tear-stage.is-armed.tear--head > .hero  { clip-path: polygon(0% 0%, 30.00% 0.0%, 30.72% 2.0%, 31.63% 4.0%, 33.06% 6.0%, 29.91% 8.0%, 32.58% 10.0%, 29.87% 12.0%, 30.96% 14.0%, 30.42% 16.0%, 30.28% 18.0%, 32.89% 20.0%, 30.54% 22.0%, 30.82% 24.0%, 31.25% 26.0%, 32.08% 28.0%, 31.69% 30.0%, 33.79% 32.0%, 33.17% 34.0%, 29.71% 36.0%, 29.13% 38.0%, 29.25% 40.0%, 28.52% 42.0%, 29.43% 44.0%, 28.58% 46.0%, 26.87% 48.0%, 28.65% 50.0%, 28.73% 52.0%, 31.96% 54.0%, 29.30% 56.0%, 28.99% 58.0%, 28.90% 60.0%, 27.45% 62.0%, 27.96% 64.0%, 28.12% 66.0%, 28.57% 68.0%, 28.70% 70.0%, 29.01% 72.0%, 28.37% 74.0%, 26.42% 76.0%, 30.35% 78.0%, 30.30% 80.0%, 29.90% 82.0%, 30.90% 84.0%, 30.79% 86.0%, 30.57% 88.0%, 29.45% 90.0%, 30.00% 92.0%, 30.49% 94.0%, 29.60% 96.0%, 28.22% 98.0%, 30.00% 100.0%, 0% 100%); }
.tear-stage.is-armed.tear--head > .tear-clone { clip-path: polygon(100% 0%, 100% 100%, 30.00% 100.0%, 28.22% 98.0%, 29.60% 96.0%, 30.49% 94.0%, 30.00% 92.0%, 29.45% 90.0%, 30.57% 88.0%, 30.79% 86.0%, 30.90% 84.0%, 29.90% 82.0%, 30.30% 80.0%, 30.35% 78.0%, 26.42% 76.0%, 28.37% 74.0%, 29.01% 72.0%, 28.70% 70.0%, 28.57% 68.0%, 28.12% 66.0%, 27.96% 64.0%, 27.45% 62.0%, 28.90% 60.0%, 28.99% 58.0%, 29.30% 56.0%, 31.96% 54.0%, 28.73% 52.0%, 28.65% 50.0%, 26.87% 48.0%, 28.58% 46.0%, 29.43% 44.0%, 28.52% 42.0%, 29.25% 40.0%, 29.13% 38.0%, 29.71% 36.0%, 33.17% 34.0%, 33.79% 32.0%, 31.69% 30.0%, 32.08% 28.0%, 31.25% 26.0%, 30.82% 24.0%, 30.54% 22.0%, 32.89% 20.0%, 30.28% 18.0%, 30.42% 16.0%, 30.96% 14.0%, 29.87% 12.0%, 32.58% 10.0%, 29.91% 8.0%, 33.06% 6.0%, 31.63% 4.0%, 30.72% 2.0%, 30.00% 0.0%); }

@media (prefers-reduced-motion: reduce) {
  .tear-stage > .hero,
  .tear-stage > .tear-clone { clip-path: none !important; transform: none !important; filter: none !important; }
  .tear-clone { display: none !important; }
}

.tear-bar {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 999;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  max-width: min(92vw, 420px);
  padding: 10px 12px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--line, #dcdfe6);
  box-shadow: 0 6px 24px rgba(15, 23, 79, .16);
  font-size: 12px;
}
.tear-bar button {
  font: inherit;
  padding: 7px 12px;
  color: #fff; background: #0f174f;
  border: 0; cursor: pointer;
}
.tear-bar button[aria-pressed="true"] { background: #0c67c7; }
.tear-bar p { flex: 1 0 100%; margin: 0; color: #5b6070; line-height: 1.5; }

.tear-dove {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  will-change: transform;

  filter: blur(var(--blur, 0px)) drop-shadow(0 3px 6px rgba(10, 16, 50, .45)) drop-shadow(0 0 2px rgba(10, 16, 50, .28));
  animation: dove-flock var(--dove-dur, 1500ms) cubic-bezier(.28, .04, .32, 1) var(--dove-delay, 0ms) both;
}

.tear-dove--wide   { width: calc(clamp(80px, 10vw, 200px) * var(--s, 1)); }
.tear-dove--narrow { width: calc(clamp(46px, 12vw, 86px) * var(--s, 1)); }

.tear-dove svg { display: block; width: 100%; height: auto;
  transform: scaleX(-1) rotate(var(--tilt, 0deg)); opacity: var(--dim, 1); }

.tear-dove .dove-wing,
.tear-dove .dove-wing-far {
  transform-box: view-box;
  transform-origin: 96px 117px;
}
.tear-dove .dove-wing     { animation: dove-flap      260ms ease-in-out infinite; }
.tear-dove .dove-wing-far { animation: dove-flap-far  260ms ease-in-out infinite; animation-delay: -28ms; }

.tear-dove.is-amp-b .dove-wing     { animation-name: dove-flap-b; }
.tear-dove.is-amp-b .dove-wing-far { animation-name: dove-flap-far-b; }
.tear-dove.is-amp-c .dove-wing     { animation-name: dove-flap-c; }
.tear-dove.is-amp-c .dove-wing-far { animation-name: dove-flap-far-c; }

@keyframes dove-flock {
  0%   { opacity: 0; transform: translate(0, 0) rotate(7deg) scale(.34); }
  8%   { opacity: 1; }
  22%  { transform: translate(calc(var(--dx) * .18), calc(var(--dy) * .08)) rotate(-1deg) scale(1); }
  55%  { transform: translate(calc(var(--dx) * .54), calc(var(--dy) * .40)) rotate(-9deg) scale(1); }

  86%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(-15deg) scale(1); }
}

@keyframes dove-flap {
  0%, 100% { transform: rotate(-36deg) scaleY(.72); }
  50%      { transform: rotate(56deg)  scaleY(1); }
}
@keyframes dove-flap-far {
  0%, 100% { transform: rotate(-40deg) scaleY(.68); }
  50%      { transform: rotate(26deg)  scaleY(1); }
}
@keyframes dove-flap-b {
  0%, 100% { transform: rotate(-22deg) scaleY(.82); }
  50%      { transform: rotate(40deg)  scaleY(1); }
}
@keyframes dove-flap-far-b {
  0%, 100% { transform: rotate(-26deg) scaleY(.8); }
  50%      { transform: rotate(18deg)  scaleY(1); }
}
@keyframes dove-flap-c {
  0%, 100% { transform: rotate(-6deg)  scaleY(.94); }
  50%      { transform: rotate(12deg)  scaleY(1); }
}
@keyframes dove-flap-far-c {
  0%, 100% { transform: rotate(-9deg)  scaleY(.93); }
  50%      { transform: rotate(6deg)   scaleY(1); }
}

.tear-dove--out {
  z-index: 4;
  animation-name: dove-fly-out;
}
@keyframes dove-fly-out {
  0%   { opacity: 0; filter: blur(0px);
         transform: perspective(820px) translate3d(0, 0, 0) rotate(6deg) scale(.42); }
  10%  { opacity: 1; }
  34%  { opacity: 1; transform: perspective(820px)
         translate3d(calc(var(--dx) * .34), calc(var(--dy) * .16), 90px) rotate(-2deg) scale(1); }

  62%  { opacity: .62; filter: blur(1.6px);
         transform: perspective(820px)
         translate3d(calc(var(--dx) * .70), calc(var(--dy) * .42), 260px) rotate(-7deg) scale(1); }
  100% { opacity: 0; filter: blur(4px);
         transform: perspective(820px)
         translate3d(var(--dx), var(--dy), 620px) rotate(-12deg) scale(1); }
}

.tear-dove--out .dove-wing     { animation-name: dove-flap-out; }
.tear-dove--out .dove-wing-far { animation-name: dove-flap-far-out; }
@keyframes dove-flap-out {
  0%, 100% { transform: rotate(-44deg) scaleY(.66); }
  50%      { transform: rotate(62deg)  scaleY(1); }
}
@keyframes dove-flap-far-out {
  0%, 100% { transform: rotate(-48deg) scaleY(.62); }
  50%      { transform: rotate(30deg)  scaleY(1); }
}

@media (prefers-reduced-motion: reduce) { .tear-dove { display: none !important; } }