/* Scroll-linked rocket landing — browse page only */



.scroll-rocket {

  --rocket-travel: -110vh;

  --rocket-rotate: 14deg;

  --rocket-legs: 0;

  --rocket-flame: 1;

  --rocket-dust: 0;

  position: fixed;

  right: clamp(10px, 3.5vw, 44px);

  bottom: clamp(12px, 2.5vh, 28px);

  z-index: 4;

  width: clamp(44px, 7vw, 68px);

  pointer-events: none;

  transform: translate3d(0, var(--rocket-travel), 0) rotate(var(--rocket-rotate));

  transform-origin: 50% 100%;

  will-change: transform;

  filter: drop-shadow(0 8px 24px rgba(123, 93, 255, 0.35));

}



.scroll-rocket__inner {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.scroll-rocket__svg {

  display: block;

  width: 100%;

  height: auto;

}



.scroll-rocket__flame {

  width: 42%;

  height: clamp(18px, 3vw, 28px);

  margin-top: -4px;

  opacity: calc(var(--rocket-flame, 1) * 0.95);

  transform-origin: 50% 0%;

  transform: scaleY(calc(0.55 + var(--rocket-flame, 1) * 0.55));

  background: linear-gradient(

    180deg,

    #fff6a8 0%,

    #b5ff3c 28%,

    #ff66c4 72%,

    transparent 100%

  );

  border-radius: 0 0 50% 50%;

  filter: blur(0.5px);

  animation: scroll-rocket-flame-flicker 0.14s ease-in-out infinite alternate;

}



.scroll-rocket--landed .scroll-rocket__flame {

  animation: none;

  opacity: 0;

  transform: scaleY(0);

}



.scroll-rocket__legs {

  position: absolute;

  left: 50%;

  bottom: 14%;

  width: 76%;

  height: 22%;

  transform: translateX(-50%);

  pointer-events: none;

}



.scroll-rocket__leg {

  position: absolute;

  bottom: 0;

  width: 3px;

  height: 100%;

  border-radius: 2px;

  background: linear-gradient(180deg, #c8b8ff, #7b5dff);

  transform-origin: 50% 0%;

  opacity: calc(0.25 + var(--rocket-legs, 0) * 0.75);

}



.scroll-rocket__leg--left {

  left: 8%;

  transform: rotate(calc(-42deg * var(--rocket-legs, 0)));

}



.scroll-rocket__leg--right {

  right: 8%;

  transform: rotate(calc(42deg * var(--rocket-legs, 0)));

}



.scroll-rocket__leg--center {

  left: 50%;

  transform: translateX(-50%) rotate(calc(8deg * var(--rocket-legs, 0)));

}



.scroll-rocket__pad {

  position: absolute;

  left: 50%;

  bottom: -6px;

  width: 130%;

  height: 10px;

  transform: translateX(-50%);

  border-radius: 50%;

  background: radial-gradient(

    ellipse at center,

    rgba(181, 255, 60, calc(var(--rocket-dust, 0) * 0.45)) 0%,

    rgba(123, 93, 255, calc(var(--rocket-dust, 0) * 0.2)) 45%,

    transparent 72%

  );

  opacity: var(--rocket-dust, 0);

}



.scroll-rocket__dust {

  position: absolute;

  left: 50%;

  bottom: 0;

  width: 160%;

  height: 20px;

  transform: translateX(-50%);

  pointer-events: none;

}



.scroll-rocket__dust::before,

.scroll-rocket__dust::after {

  content: "";

  position: absolute;

  bottom: 0;

  width: 38%;

  height: 10px;

  border-radius: 50%;

  background: rgba(210, 200, 255, 0.35);

  filter: blur(5px);

  opacity: calc(var(--rocket-dust, 0) * 0.85);

  transform: scale(calc(0.6 + var(--rocket-dust, 0) * 0.5));

}



.scroll-rocket__dust::before {

  left: 4%;

}



.scroll-rocket__dust::after {

  right: 4%;

}



.scroll-rocket--landed {

  filter: drop-shadow(0 4px 16px rgba(123, 93, 255, 0.28));

  transition: filter 0.4s ease;

}



@keyframes scroll-rocket-flame-flicker {

  from {

    transform: scaleY(calc(0.5 + var(--rocket-flame, 1) * 0.5)) scaleX(0.94);

  }

  to {

    transform: scaleY(calc(0.62 + var(--rocket-flame, 1) * 0.55)) scaleX(1.06);

  }

}



html[data-theme="light"] .scroll-rocket {

  filter: drop-shadow(0 8px 20px rgba(104, 75, 255, 0.22));

}



@media (max-width: 720px) {

  .scroll-rocket {

    right: clamp(6px, 2vw, 16px);

    width: clamp(36px, 11vw, 48px);

    opacity: 0.92;

  }

}



@media (prefers-reduced-motion: reduce) {

  .scroll-rocket {

    --rocket-travel: 0;

    --rocket-rotate: 0deg;

    --rocket-legs: 1;

    --rocket-flame: 0;

    --rocket-dust: 1;

    transform: none;

  }



  .scroll-rocket__flame {

    animation: none;

    display: none;

  }

}