/* Motion polish — Отложка landing
   All effects respect prefers-reduced-motion. */

/* === 2. Live pulse on showcase channel cards + toast === */
.ch-views.pulse{animation:pulse-num 0.6s ease-out}
@keyframes pulse-num{
  0%{transform:scale(1);color:var(--primary)}
  50%{transform:scale(1.06);color:#20DF80}
  100%{transform:scale(1);color:inherit}
}
.live-toast-container{position:fixed;bottom:90px;right:24px;z-index:80;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:280px}
.live-toast{background:rgba(11,22,49,.92);color:#fff;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.2);transform:translateX(120%);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.live-toast.show{transform:translateX(0)}
.live-toast::before{content:'●';color:#20DF80;margin-right:8px;animation:pulse 2s infinite}
@media(max-width:600px){.live-toast-container{display:none}}

/* === 3. Hover-tilt on cards === */
.tilt{transform-style:preserve-3d;transition:transform .15s ease-out,box-shadow .2s}
@media(hover:hover){
  .tilt:hover{transition:none}
  .tilt:not(:hover){transition:transform .4s ease-out}
}

/* === 4. Animated gradient mesh on hero === */
.hero,.page-hero{position:relative;isolation:isolate}
.hero::after,.page-hero::after{
  content:'';position:absolute;inset:-10%;z-index:-1;
  background:
    radial-gradient(60% 50% at 20% 30%,rgba(0,91,255,.35) 0%,transparent 60%),
    radial-gradient(50% 50% at 80% 70%,rgba(32,223,128,.22) 0%,transparent 55%),
    radial-gradient(40% 40% at 60% 20%,rgba(255,153,0,.18) 0%,transparent 60%);
  filter:blur(60px);
  animation:gradient-drift 18s ease-in-out infinite alternate;
  pointer-events:none;
  opacity:.7
}
@keyframes gradient-drift{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(-3%,2%) scale(1.05)}
  66%{transform:translate(2%,-2%) scale(.98)}
  100%{transform:translate(0,0) scale(1)}
}

/* === 6. Confetti burst on copy === */
.confetti{
  position:fixed;width:8px;height:8px;border-radius:2px;
  pointer-events:none;z-index:300;
  animation:confetti-fly .9s cubic-bezier(.2,.7,.3,1) forwards
}
@keyframes confetti-fly{
  0%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.6) rotate(540deg);opacity:0}
}

/* === 7. Marquee brand strip (index.html only) === */
.brand-strip{padding:24px 0;background:linear-gradient(180deg,#070711 0%,#0b1530 100%);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.brand-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.brand-marquee-track{display:inline-flex;gap:48px;animation:marquee 45s linear infinite;white-space:nowrap;will-change:transform}
.brand-marquee-track span{font-size:14px;color:rgba(255,255,255,.55);font-weight:500;letter-spacing:.2px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* === Reduced motion overrides === */
@media(prefers-reduced-motion:reduce){
  .ch-views.pulse{animation:none}
  .live-toast{display:none}
  .tilt{transform:none !important;transition:none !important}
  .hero::after,.page-hero::after{animation:none}
  .brand-marquee-track{animation:none}
  .confetti{display:none}
}