.detail-scroll-cue {
  gap: 2px;
}

.scroll-arrow__label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: lowercase;
}

.detail-scroll-cue .scroll-arrow__icon,
.detail-scroll-cue .scroll-arrow__icon svg {
  display: block;
  width: 58px;
  height: 58px;
}

.detail-scroll-cue .scroll-arrow__icon svg {
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.48));
  animation: none;
}

.detail-scroll-cue[data-scroll-arrow="capsule"] .scroll-arrow__icon,
.detail-scroll-cue[data-scroll-arrow="capsule"] .scroll-arrow__icon svg {
  width: 68px;
  height: 68px;
}

.detail-scroll-cue[data-scroll-arrow="classic"] .cue-line,
.detail-scroll-cue[data-scroll-arrow="classic"] .cue-head {
  animation: cue-classic 1.45s cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes cue-classic {
  0%, 100% { transform: translateY(-4px); opacity: .45; }
  52% { transform: translateY(5px); opacity: 1; }
}

.chev { animation: cue-chevrons 1.65s ease-in-out infinite; }
.chev-b { animation-delay: .16s; }
.chev-c { animation-delay: .32s; }
@keyframes cue-chevrons {
  0%, 70%, 100% { opacity: .18; transform: translateY(-3px); }
  35% { opacity: 1; transform: translateY(3px); }
}

.orbit-ring { opacity: .58; stroke-dasharray: 10 7; animation: cue-orbit 3.2s linear infinite; transform-origin: 32px 32px; }
.orbit-arrow { animation: cue-orbit-arrow 1.5s ease-in-out infinite; }
.orbit-dot { fill: #01a75b; stroke: none; animation: cue-orbit 3.2s linear infinite; transform-origin: 32px 32px; }
@keyframes cue-orbit { to { transform: rotate(360deg); } }
@keyframes cue-orbit-arrow { 50% { transform: translateY(5px); } }

.capsule-bg { fill: rgba(1, 167, 91, .9); stroke: rgba(255,255,255,.72); }
.capsule-arrow { stroke: #fff; animation: cue-capsule 1.55s cubic-bezier(.34, 1.56, .64, 1) infinite; }
@keyframes cue-capsule { 0%, 100% { transform: translateY(-4px); } 48% { transform: translateY(5px); } }

.petal { stroke: none; }
.petal-a { fill: #a9e6cf; }
.petal-b { fill: #43c98a; }
.petal-c { fill: #006c43; }
.petal-d { fill: #08a95f; }
.bvi-mark { transform-origin: 32px 27px; }
.detail-scroll-cue[data-scroll-arrow="bvi-drop"] .bvi-mark { animation: cue-logo-drop 1.7s ease-in-out infinite; }
.logo-arrow { animation: cue-logo-arrow 1.7s ease-in-out infinite; }
@keyframes cue-logo-drop { 0%,100% { transform: translateY(-5px) scale(.94); } 48% { transform: translateY(3px) scale(1); } }
@keyframes cue-logo-arrow { 0%,100% { opacity:.25; transform:translateY(-3px); } 48% { opacity:1; transform:translateY(3px); } }

.detail-scroll-cue[data-scroll-arrow="bvi-pulse"] .bvi-mark { animation: cue-logo-pulse 1.8s ease-in-out infinite; }
.logo-pulse { stroke:#a9e6cf; animation:cue-ring-pulse 1.8s ease-out infinite; transform-origin:32px 28px; }
.pulse-arrow { animation:cue-logo-arrow 1.8s ease-in-out infinite; }
@keyframes cue-logo-pulse { 50% { transform:scale(1.08); } }
@keyframes cue-ring-pulse { 0% { transform:scale(.65); opacity:.8; } 75%,100% { transform:scale(1.22); opacity:0; } }

.split-mark circle { transform-box: fill-box; transform-origin:center; animation:cue-split 1.9s ease-in-out infinite; }
.split-a { --split-x:-5px; --split-y:-5px; }
.split-b { --split-x:5px; --split-y:-5px; }
.split-c { --split-x:-5px; --split-y:5px; }
.split-d { --split-x:5px; --split-y:5px; }
.split-arrow { animation:cue-split-arrow 1.9s ease-in-out infinite; }
@keyframes cue-split { 0%,100% { transform:translate(0,0); } 48% { transform:translate(var(--split-x),var(--split-y)); } }
@keyframes cue-split-arrow { 0%,100% { opacity:.15; transform:translateY(-7px); } 48% { opacity:1; transform:translateY(4px); } }

.ripple-arrow { animation:cue-ripple-arrow 1.55s ease-in-out infinite; }
.ripple { animation:cue-ripple 1.55s ease-out infinite; }
.ripple-b { animation-delay:.16s; }
.ripple-c { animation-delay:.32s; }
@keyframes cue-ripple-arrow { 50% { transform:translateY(4px); } }
@keyframes cue-ripple { 0%,100% { opacity:.1; transform:scaleX(.55); } 50% { opacity:1; transform:scaleX(1); } }

.portal-frame { opacity:.72; stroke-dasharray:80; animation:cue-portal-frame 2.4s ease-in-out infinite; }
.portal-arrow { animation:cue-portal-arrow 1.45s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes cue-portal-frame { 0%,100% { stroke-dashoffset:80; opacity:.28; } 45%,75% { stroke-dashoffset:0; opacity:.8; } }
@keyframes cue-portal-arrow { 0%,100% { transform:translateY(-7px); opacity:.35; } 55% { transform:translateY(5px); opacity:1; } }

.mag-dot { fill:currentColor; stroke:none; animation:cue-magnet 1.5s ease-in infinite; }
.mag-b { animation-delay:.11s; }
.mag-c { animation-delay:.22s; }
.mag-arrow { animation:cue-magnet-head 1.5s ease-in-out infinite; }
@keyframes cue-magnet { 0% { transform:translateY(-7px); opacity:0; } 45% { opacity:1; } 100% { transform:translateY(8px); opacity:0; } }
@keyframes cue-magnet-head { 50% { transform:translateY(4px); } }

.scroll-arrow-picker {
  position: absolute;
  z-index: 9;
  top: 22px;
  right: 22px;
  width: 248px;
  padding: 14px;
  color: #fff;
  background: rgba(11, 24, 16, .82);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  backdrop-filter: blur(16px);
}

.scroll-arrow-picker__head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:10px;
}
.scroll-arrow-picker__head strong { font-size:15px; }
.scroll-arrow-picker__head small { color:rgba(255,255,255,.6); font-size:11px; }
.scroll-arrow-picker__grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.scroll-arrow-picker button {
  position:relative;
  min-height:88px;
  padding:7px 5px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  color:#fff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
  cursor:pointer;
  font:600 10px/1.1 Arial,sans-serif;
}
.scroll-arrow-picker button:hover,
.scroll-arrow-picker button[aria-pressed="true"] { border-color:#43c98a; background:rgba(1,167,91,.2); }
.scroll-arrow-picker button[aria-pressed="true"] { box-shadow:inset 0 0 0 1px #43c98a; }
.scroll-arrow-picker__number { position:absolute; top:5px; left:6px; color:rgba(255,255,255,.45); font-size:9px; }
.scroll-arrow-picker__icon,
.scroll-arrow-picker__icon svg { display:block; width:44px; height:44px; }
.scroll-arrow-picker__icon svg { fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

@media (max-width: 980px) {
  .scroll-arrow-picker { width:210px; }
  .scroll-arrow-picker button { min-height:74px; }
}

@media (max-width: 680px) {
  .detail-scroll-cue .scroll-arrow__icon,
  .detail-scroll-cue .scroll-arrow__icon svg { width:38px; height:38px; }
  .detail-scroll-cue[data-scroll-arrow="capsule"] .scroll-arrow__icon,
  .detail-scroll-cue[data-scroll-arrow="capsule"] .scroll-arrow__icon svg { width:46px; height:46px; }
  .scroll-arrow-picker { inset:12px 12px auto auto; width:190px; max-height:calc(100% - 24px); overflow:auto; }
  .scroll-arrow-picker__grid { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .detail-scroll-cue *,
  .scroll-arrow-picker * { animation:none !important; }
}