/* VK Mix v4 motion. Lightweight CSS-only animation, optimised for mobile. */
html.motion-ready { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
[data-reveal] { opacity: 0; transform: translateY(18px); }
[data-reveal].is-revealing { opacity: 1; transform: none; transition: opacity .65s var(--motion-ease), transform .65s var(--motion-ease); }

.hero-soundscape {
  position: absolute;
  inset: 46px 0 auto;
  height: 760px;
  opacity: .92;
  pointer-events: none;
  overflow: hidden;
}
.hero-soundscape::before,
.hero-soundscape::after {
  content: "";
  position: absolute;
  inset: 10% -12% auto;
  height: 62%;
  border-radius: 50%;
  filter: blur(44px);
  opacity: .26;
}
.hero-soundscape::before {
  background: radial-gradient(ellipse at center, rgba(85, 204, 255, .16), rgba(85, 204, 255, 0) 68%);
  animation: drift-x 18s ease-in-out infinite alternate;
}
.hero-soundscape::after {
  inset: 28% -10% auto;
  height: 46%;
  background: radial-gradient(ellipse at center, rgba(121, 151, 255, .12), rgba(121, 151, 255, 0) 72%);
  animation: drift-y 22s ease-in-out infinite alternate;
}
.soundscape-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .82;
  transform-origin: center;
  animation: wave-pan 22s linear infinite alternate;
}
.hero-soundscape canvas { display: none !important; }

.brand-beat { display: inline-flex; align-items: flex-end; gap: 4px; min-height: 18px; }
.brand-beat i {
  display: block;
  width: 4px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #9bd9ec, #71bfd7);
  transform-origin: 50% 100%;
  animation: beat 1.28s ease-in-out infinite;
}
.brand-beat i:nth-child(2) { animation-delay: -.15s; height: 12px; }
.brand-beat i:nth-child(3) { animation-delay: -.31s; height: 20px; }
.brand-beat i:nth-child(4) { animation-delay: -.47s; height: 13px; }
.brand-beat i:nth-child(5) { animation-delay: -.63s; height: 9px; }

.stage-ambient {
  animation: ambient-breathe 14s ease-in-out infinite alternate;
}
.button,
.button-telegram,
.desktop-device,
.phone-device,
.album-display img,
.showcase-phone,
.connect-phone,
.showcase-screen,
.community-mark,
.preview-hint,
.button,
.platform-tab,
.icon-button,
.footer-links a,
.header-telegram,
.mobile-telegram {
  will-change: transform;
}
.button, .button-telegram { position: relative; overflow: hidden; }
.desktop-device {
  animation: float-desktop 8s ease-in-out infinite;
}
.phone-device {
  animation: float-phone 7s ease-in-out infinite;
}
.album-display img:nth-child(1) { animation: cover-float 8s ease-in-out infinite; }
.album-display img:nth-child(2) { animation: cover-float 8s ease-in-out infinite -.9s; }
.album-display img:nth-child(3) { animation: cover-float 8s ease-in-out infinite -1.8s; }
.showcase-phone { animation: float-card 8s ease-in-out infinite; }
.connect-phone { animation-delay: -1.3s; }
.equalizer-art { position: relative; overflow: hidden; }
.equalizer-art::after {
  content: "";
  position: absolute;
  inset: auto 12% 12px;
  height: 44px;
  background: radial-gradient(circle, rgba(146, 219, 241, .22), rgba(146, 219, 241, 0) 70%);
  filter: blur(10px);
}
.equalizer-art span {
  transform-origin: 50% 100%;
  animation: equalize 1.5s ease-in-out infinite;
}
.equalizer-art span:nth-child(2n) { animation-duration: 1.25s; }
.equalizer-art span:nth-child(3n) { animation-duration: 1.75s; }
.equalizer-art span:nth-child(4n) { animation-delay: -.25s; }
.equalizer-art span:nth-child(5n) { animation-delay: -.42s; }
.equalizer-art span:nth-child(6n) { animation-duration: 1.95s; }
.equalizer-art span:nth-child(7n) { animation-delay: -.66s; }
.equalizer-art span:nth-child(8n) { animation-duration: 1.12s; }
.equalizer-art span:nth-child(9n) { animation-delay: -.82s; }
.community-orbit {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(107, 192, 228, .24);
  animation: orbit-spin 18s linear infinite;
}
.community-orbit::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 8px;
  left: 13px;
  border-radius: 50%;
  background: #c7efff;
  box-shadow: 0 0 0 6px rgba(145, 220, 252, .12);
}

@media (hover: hover) {
  .button,
  .platform-tab,
  .icon-button,
  .footer-links a,
  .header-telegram,
  .mobile-telegram,
  .community-mark-core,
  .button-telegram { transition: transform .25s var(--motion-ease), background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; }
  .button:hover,
  .platform-tab:hover,
  .icon-button:hover,
  .footer-links a:hover,
  .header-telegram:hover,
  .mobile-telegram:hover,
  .button-telegram:hover,
  .community-mark:hover .community-mark-core { transform: translateY(-2px); }
  .button::after,
  .button-telegram::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -120%;
    width: 44%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .button:hover::after,
  .button-telegram:hover::after { opacity: 1; animation: sheen 1.1s ease; }
}

@keyframes appear-soft { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes wave-pan { 0% { transform: translate3d(-1.5%, 0, 0) scale(1); } 100% { transform: translate3d(1.5%, -1.3%, 0) scale(1.02); } }
@keyframes drift-x { 0% { transform: translate3d(-3%, 0, 0); } 100% { transform: translate3d(5%, 0, 0); } }
@keyframes drift-y { 0% { transform: translate3d(0, -3%, 0); } 100% { transform: translate3d(0, 4%, 0); } }
@keyframes beat { 0%,100% { transform: scaleY(.55); opacity: .72; } 30% { transform: scaleY(1.18); opacity: 1; } 60% { transform: scaleY(.78); opacity: .88; } }
@keyframes ambient-breathe { 0% { transform: scale(.98); opacity: .65; } 100% { transform: scale(1.03); opacity: .95; } }
@keyframes float-desktop { 0%,100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } }
@keyframes float-phone { 0%,100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -10px, 0) rotate(-.6deg); } }
@keyframes float-card { 0%,100% { transform: translateY(24px); } 50% { transform: translateY(16px); } }
@keyframes cover-float { 0%,100% { transform: translateY(20px); } 50% { transform: translateY(11px); } }
@keyframes equalize { 0%,100% { transform: scaleY(.45); opacity: .55; } 35% { transform: scaleY(1.12); opacity: 1; } 68% { transform: scaleY(.72); opacity: .8; } }
@keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sheen { 0% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(420%) skewX(-18deg); } }

@media (max-width: 1150px) {
  .hero-soundscape { height: 650px; opacity: .78; }
}
@media (max-width: 900px) {
  .hero-soundscape { inset: 80px 0 auto; height: 470px; opacity: .72; }
  .desktop-device,
  .phone-device,
  .album-display img,
  .showcase-phone,
  .connect-phone,
  .stage-ambient,
  .community-orbit,
  .soundscape-fallback,
  .hero-soundscape::before,
  .hero-soundscape::after { animation-duration: 20s; }
}
@media (max-width: 640px) {
  .hero-soundscape { inset: 110px 0 auto; height: 360px; opacity: .58; }
  .hero-soundscape::before,
  .hero-soundscape::after { display: none; }
  .soundscape-fallback { animation-duration: 26s; }
  .desktop-device,
  .phone-device,
  .album-display img,
  .showcase-phone,
  .connect-phone,
  .stage-ambient,
  .community-orbit,
  .community-mark,
  .equalizer-art span,
  .brand-beat i { animation-play-state: running; }
  .desktop-device,
  .phone-device,
  .album-display img,
  .showcase-phone,
  .connect-phone,
  .stage-ambient,
  .community-mark { animation: none !important; }
  .equalizer-art span { animation-duration: 1.8s; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-soundscape,
  .brand-beat i,
  .stage-ambient,
  .desktop-device,
  .phone-device,
  .album-display img,
  .showcase-phone,
  .connect-phone,
  .equalizer-art span,
  .community-orbit { animation: none !important; }
}