/* ============================================================
   SMART-GIVEAWAY.CH — Animations & Micro-Interactions
   ============================================================ */

/* ---- SCROLL REVEAL ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1),
              transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.reveal-group > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-group > *:nth-child(2) { transition-delay: 0.09s; }
.reveal-group > *:nth-child(3) { transition-delay: 0.18s; }
.reveal-group > *:nth-child(4) { transition-delay: 0.27s; }
.reveal-group > *:nth-child(5) { transition-delay: 0.36s; }
.reveal-group > *:nth-child(6) { transition-delay: 0.45s; }
.reveal-group.visible > * { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0; transform: translateX(-32px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1),
              transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0; transform: translateX(32px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1),
              transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0; transform: scale(0.93);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* ---- PARALLAX ---- */
.parallax-slow, .parallax-med, .parallax-fast { will-change: transform; }

/* ---- FLOATING ---- */
@keyframes floatY     { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-8px)} }
@keyframes floatYSlow { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-5px)} }
.float-anim       { animation: floatY     3.5s ease-in-out infinite; }
.float-anim-slow  { animation: floatYSlow 5s   ease-in-out infinite; }
.float-anim-delay { animation: floatY     3.5s ease-in-out 0.9s infinite; }

/* ---- NFC PULSE RINGS ---- */
@keyframes nfcRing { 0%{transform:scale(0.6);opacity:0.8} 100%{transform:scale(2.4);opacity:0} }
.nfc-pulse-ring {
  position: absolute; border-radius: 50%;
  border: 1.5px solid var(--cyan);
  animation: nfcRing 2.2s ease-out infinite;
  pointer-events: none;
}
.nfc-pulse-ring:nth-child(2) { animation-delay: 0.55s; }
.nfc-pulse-ring:nth-child(3) { animation-delay: 1.10s; }
.nfc-pulse-ring:nth-child(4) { animation-delay: 1.65s; }

/* ---- CURSOR GLOW ---- */
.cursor-glow {
  position: fixed; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,200,180,0.07) 0%, transparent 70%);
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: opacity 0.4s ease;
  opacity: 0;
}

/* ---- CARD 3D TILT ---- */
.tilt-card { transform-style: preserve-3d; will-change: transform; transition: box-shadow 0.3s; }
.tilt-card:hover { box-shadow: 0 24px 60px rgba(0,0,0,0.12) !important; }

/* ---- BUTTON RIPPLE ---- */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple .ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.28);
  transform: scale(0);
  animation: rippleAnim 0.55s linear;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform:scale(4); opacity:0; } }

/* ---- GLOW HOVER BORDER ---- */
.glow-hover { transition: box-shadow 0.3s, border-color 0.3s; }
.glow-hover:hover {
  box-shadow: 0 0 0 1px rgba(0,200,180,0.4), 0 8px 32px rgba(0,200,180,0.1);
  border-color: rgba(0,200,180,0.4) !important;
}

/* ---- NAV SCROLL ---- */
.site-nav { transition: background 0.35s, box-shadow 0.35s; }
.site-nav.scrolled {
  background: rgba(11,24,41,0.99) !important;
  box-shadow: 0 1px 0 rgba(0,200,180,0.18), 0 4px 28px rgba(0,0,0,0.35);
}

/* ---- HERO GRID PULSE ---- */
@keyframes gridPulse { 0%,100%{opacity:0.5} 50%{opacity:1} }
.hero-grid { animation: gridPulse 7s ease-in-out infinite; }

/* ---- SHIMMER (Badges) ---- */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.shimmer-badge {
  background: linear-gradient(90deg,
    rgba(0,200,180,0.07) 25%,
    rgba(0,200,180,0.22) 50%,
    rgba(0,200,180,0.07) 75%
  );
  background-size: 200% auto;
  animation: shimmer 3.5s linear infinite;
}

/* ---- PHONE ENTRANCE ---- */
@keyframes phoneIn { 0%{opacity:0;transform:translateY(32px) rotate(-2deg)} 100%{opacity:1;transform:translateY(0) rotate(0)} }
.phone-entrance { animation: phoneIn 0.9s cubic-bezier(0.4,0,0.2,1) 0.3s both; }

/* ---- SLIDE CONTENT ENTRANCE ---- */
@keyframes contentIn { 0%{opacity:0;transform:translateY(18px)} 100%{opacity:1;transform:translateY(0)} }
.slide-content-animate .slide-badge { animation: contentIn 0.5s ease 0.08s both; }
.slide-content-animate h1           { animation: contentIn 0.5s ease 0.18s both; }
.slide-content-animate p            { animation: contentIn 0.5s ease 0.28s both; }
.slide-content-animate .cta-row     { animation: contentIn 0.5s ease 0.38s both; }

/* ---- GRADIENT TEXT ---- */
.gradient-text {
  background: linear-gradient(135deg, var(--cyan) 0%, #00fff5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- LINE REVEAL ---- */
.line-reveal { position: relative; }
.line-reveal::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  height: 2px; width: 0; background: var(--cyan);
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
}
.line-reveal.visible::after { width: 100%; }

/* ---- SCROLL INDICATOR ---- */
@keyframes scrollBounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(7px)} }
.scroll-indicator {
  position: absolute; bottom: 3rem; left: 50%;
  transform: translateX(-50%); z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 0.45; animation: scrollBounce 2.2s ease-in-out infinite; cursor: pointer;
}
.scroll-indicator span { font-size: 10px; color: rgba(255,255,255,0.5); letter-spacing: 0.14em; text-transform: uppercase; }
.scroll-arrow { width: 18px; height: 18px; border-right: 1.5px solid rgba(0,200,180,0.7); border-bottom: 1.5px solid rgba(0,200,180,0.7); transform: rotate(45deg); }

/* ---- LOGO SLIDER PAUSE ON HOVER ---- */
.logos-track-wrap:hover .logos-track { animation-play-state: paused; }

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  .reveal-group > * { opacity: 1 !important; transform: none !important; }
}