.section-scroll {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 36px;
  border: 1.5px solid;
  border-radius: 12px;
  border-color: var(--section-scroll-border);
  z-index: 2;
  opacity: 0;
  animation: heroFadeUp .9s cubic-bezier(0.2, 0.65, 0.2, 1) 1.7s forwards;
}

.section-scroll span {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 6px;
  background: var(--brand-accent);
  border-radius: 2px;
  animation: scrollDot 2.5s ease-in-out infinite;
}

@keyframes scrollDot {
  0%, 100% { top: 8px; opacity: 1; }
  50% { top: 15px; opacity: 0.3; }
}

.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .8s cubic-bezier(0.2, 0.65, 0.2, 1), transform .8s cubic-bezier(0.2, 0.65, 0.2, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}