/* ================================================================
   PREMIUM LAYER — Scroll-Driven Interactions & Apple-Style Polish
   ================================================================ */

/* 1. Scroll Progress Bar */
#scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--blue) 0%, #5856d6 50%, #af52de 100%);
  pointer-events: none;
  transform-origin: left center;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(88, 86, 214, 0.4);
}

/* 2. Section Reveal — text / copy blocks */
.reveal-block {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 840ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 840ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-block.is-revealed {
  opacity: 1;
  transform: none;
}

/* 3. Stagger Reveal — grid / list cards */
.reveal-card {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 640ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-card.is-revealed {
  opacity: 1;
  transform: none;
}

/* 4. Platform card brand glow on hover */
.platform-bili:hover {
  box-shadow: 0 20px 56px rgba(0, 161, 214, 0.22), 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 161, 214, 0.32) !important;
}
.platform-douyin:hover {
  box-shadow: 0 20px 56px rgba(254, 44, 85, 0.18), 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(254, 44, 85, 0.28) !important;
}
.platform-instagram:hover {
  box-shadow: 0 20px 56px rgba(225, 48, 108, 0.18), 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(225, 48, 108, 0.28) !important;
}
.platform-tiktok:hover {
  box-shadow: 0 20px 56px rgba(200, 200, 200, 0.07), 0 4px 14px rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 5. Play icon overlay on video thumbnails */
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: var(--liquid-glass-btn-filter);
  -webkit-backdrop-filter: var(--liquid-glass-btn-filter);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.68);
  opacity: 0;
  transition: background 200ms ease, box-shadow 200ms ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 220ms ease;
}
.play-icon::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 50%;
  border-radius: inherit;
  background: var(--glass-highlight-gradient);
  pointer-events: none;
}
.play-icon::after {
  content: "";
  display: block;
  position: relative;
  margin-left: 3px;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #1d1d1f;
}
.video-thumb:hover .play-icon {
  background: rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 4px 16px rgba(0, 0, 0, 0.14);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* 6. Cursor spotlight (inside .hero-sticky) */
#cursor-spotlight {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 500ms ease;
  will-change: left, top;
}
#cursor-spotlight.is-visible {
  opacity: 1;
}

/* 7. Scroll hint */
.scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 500ms ease;
}
.scroll-hint.fade-out {
  opacity: 0;
}
.scroll-hint-line {
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), transparent);
  transform-origin: top center;
  animation: scrollDrop 2.4s ease-in-out infinite;
}
@keyframes scrollDrop {
  0%   { transform: scaleY(0); transform-origin: top center;    opacity: 0; }
  20%  { opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top center;    opacity: 1; }
  51%  { transform: scaleY(1); transform-origin: bottom center; }
  80%  { opacity: 0.4; }
  100% { transform: scaleY(0); transform-origin: bottom center; opacity: 0; }
}

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
  .reveal-block,
  .reveal-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .scroll-hint-line {
    animation: none !important;
    opacity: 0.5;
  }
  #cursor-spotlight {
    display: none !important;
  }
}