/* ============================================================
   MyCollection — animations.css
   All @keyframes + animation utility classes + reveal states
   ============================================================ */

/* ── Poster vertical scroll ──────────────────────────────────────────
   Movement is driven entirely by JS requestAnimationFrame (animations.js)
   with timestamp-based speed — immune to CSS caching issues and 100%
   cross-browser consistent. These rules only provide GPU-acceleration hints.
   ──────────────────────────────────────────────────────────────────── */
.poster-col {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── Carousel horizontal scroll ── */
@keyframes carousel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Phone floating animation ── */
@keyframes phone-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}
@keyframes phone-float-glow {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.06); }
}

/* ── Coming soon ring pulse ── */
@keyframes cs-ring-pulse {
  0%   { transform: translate(-50%, -50%) scale(.85); opacity: .6; }
  50%  { transform: translate(-50%, -50%) scale(1);   opacity: .15; }
  100% { transform: translate(-50%, -50%) scale(.85); opacity: .6; }
}
@keyframes cs-ring-expand {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: .4; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

/* ── Floating tag drift ── */
@keyframes cs-float-a {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-10px) rotate(1deg); }
}
@keyframes cs-float-b {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50%       { transform: translateY(-14px) rotate(-1deg); }
}
@keyframes cs-float-c {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%       { transform: translateY(-8px) rotate(2deg); }
}

/* ── Hero button shine sweep ── */
@keyframes cs-btn-shine {
  0%        { transform: translateX(-100%) skewX(-12deg); }
  60%, 100% { transform: translateX(200%)  skewX(-12deg); }
}

/* ── Neon title glow oscillation (coming-soon) ── */
@keyframes neon-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 8px  rgba(160,  80, 255, .60))
            drop-shadow(0 0 20px rgba(160,  80, 255, .30));
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(210, 100, 255, .95))
            drop-shadow(0 0 42px rgba(210, 100, 255, .55))
            drop-shadow(0 0 80px rgba(255,  80, 200, .20));
  }
}

/* ── Notification dot pulse (features bento) ── */
@keyframes notif-pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%       { opacity: .4; transform: scale(.75); }
}

/* ── Scroll-reveal utilities ── */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0; transform: translateX(-48px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.reveal-right {
  opacity: 0; transform: translateX(48px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.reveal-left.visible,
.reveal-right.visible { opacity: 1; transform: translateX(0); }