/* Reusable vertical scroll hint — same chevron stack as post captions
   (profile-instagram-exe.css: .ig-exe-caption-nav / .ig-exe-cap-chev / igExeCapNavBob*) */

:root {
  --scroll-chevron-header-offset: 72px;
  --scroll-chevron-header-gap: 32px;
}

@media (max-width: 829px) {
  :root {
    --scroll-chevron-header-offset: 48px;
  }
}

.scroll-chevron-indicator {
  position: fixed;
  top: calc(
    var(--scroll-chevron-header-offset)
    + env(safe-area-inset-top, 0px)
    + var(--scroll-chevron-header-gap)
  );
  right: max(14px, env(safe-area-inset-right, 0px));
  z-index: 90;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  pointer-events: none;
}

.scroll-chevron-indicator[hidden] {
  display: none !important;
}

/* Stack container — mirrors .ig-exe-caption-nav */
.scroll-chevron-indicator__nav {
  --cap-arrow-rot: 45deg;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 22px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  pointer-events: none;
}

/* Single V-chevron — mirrors .ig-exe-cap-chev (open corner, no closed shape) */
.ig-exe-cap-chev {
  display: block;
  width: 6px;
  height: 6px;
  margin: -1.5px 0;
  border: 0 solid #b9ecff;
  border-right-width: 1.5px;
  border-bottom-width: 1.5px;
  transform: rotate(var(--cap-arrow-rot, 45deg));
  filter:
    drop-shadow(0 0 2px rgba(185, 236, 255, 0.9))
    drop-shadow(0 0 5px rgba(30, 144, 255, 0.55));
}

.scroll-chevron-indicator[data-direction='down'] .scroll-chevron-indicator__nav,
.scroll-chevron-indicator__nav.direction-down {
  --cap-arrow-rot: 45deg;
  animation: scrollChevronBobDown 2.6s ease-in-out infinite;
}

.scroll-chevron-indicator[data-direction='down'] .scroll-chevron-indicator__nav > .ig-exe-cap-chev:nth-child(1),
.scroll-chevron-indicator__nav.direction-down > .ig-exe-cap-chev:nth-child(1) {
  opacity: 0.55;
}

.scroll-chevron-indicator[data-direction='down'] .scroll-chevron-indicator__nav > .ig-exe-cap-chev:nth-child(2),
.scroll-chevron-indicator__nav.direction-down > .ig-exe-cap-chev:nth-child(2) {
  opacity: 0.8;
}

.scroll-chevron-indicator[data-direction='down'] .scroll-chevron-indicator__nav > .ig-exe-cap-chev:nth-child(3),
.scroll-chevron-indicator__nav.direction-down > .ig-exe-cap-chev:nth-child(3) {
  opacity: 1;
}

.scroll-chevron-indicator[data-direction='up'] .scroll-chevron-indicator__nav,
.scroll-chevron-indicator__nav.direction-up {
  --cap-arrow-rot: -135deg;
  animation: scrollChevronBobUp 2.6s ease-in-out infinite;
}

.scroll-chevron-indicator[data-direction='up'] .scroll-chevron-indicator__nav > .ig-exe-cap-chev:nth-child(1),
.scroll-chevron-indicator__nav.direction-up > .ig-exe-cap-chev:nth-child(1) {
  opacity: 1;
}

.scroll-chevron-indicator[data-direction='up'] .scroll-chevron-indicator__nav > .ig-exe-cap-chev:nth-child(2),
.scroll-chevron-indicator__nav.direction-up > .ig-exe-cap-chev:nth-child(2) {
  opacity: 0.8;
}

.scroll-chevron-indicator[data-direction='up'] .scroll-chevron-indicator__nav > .ig-exe-cap-chev:nth-child(3),
.scroll-chevron-indicator__nav.direction-up > .ig-exe-cap-chev:nth-child(3) {
  opacity: 0.55;
}

@keyframes scrollChevronBobDown {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

@keyframes scrollChevronBobUp {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@media (min-width: 830px) {
  body.island-logic-page .scroll-chevron-indicator {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-chevron-indicator__nav,
  .scroll-chevron-indicator[data-direction='down'] .scroll-chevron-indicator__nav,
  .scroll-chevron-indicator[data-direction='up'] .scroll-chevron-indicator__nav,
  .scroll-chevron-indicator__nav.direction-down,
  .scroll-chevron-indicator__nav.direction-up {
    animation: none;
  }
}