/* Shared brand animation: one eased revolution in each two-second cycle. */
.wordmark img, .preview-content > img, .final-cta > img, .auth-detail img,
.brand img, .hero-mark img, .premium-heading img {
  animation: brand-spin 9s linear infinite;
  transform-origin: center;
}
@keyframes brand-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.rotating-words {
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.rotating-words > span {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  animation: word-switch 8s cubic-bezier(.4,0,.2,1) infinite;
}
.rotating-words > span:nth-child(2) { animation-delay: -6s; }
.rotating-words > span:nth-child(3) { animation-delay: -4s; }
.rotating-words > span:nth-child(4) { animation-delay: -2s; }
@keyframes word-switch {
  0%, 19% { opacity: 1; transform: translateY(0); filter: blur(0); }
  25%, 90% { opacity: 0; transform: translateY(-.45em); filter: blur(3px); }
  94% { opacity: 0; transform: translateY(.45em); filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.motion-control { max-width: 1280px; margin: auto; padding: 0 48px 20px; text-align: right; }
.motion-control label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: #a494a2; cursor: pointer; }
.motion-control input { accent-color: #fa2548; }
body:has(#pause-motion:checked) *, body:has(#pause-motion:checked) *::before, body:has(#pause-motion:checked) *::after { animation-play-state: paused !important; }
body:has(#pause-motion:checked) .rotating-words > span { animation: none; opacity: 0; transform: none; filter: none; }
body:has(#pause-motion:checked) .rotating-words > span:first-child { opacity: 1; }
@media (max-width: 720px) { .motion-control { padding: 0 22px 20px; } }
@media (prefers-reduced-motion: reduce) {
  .wordmark img, .preview-content > img, .final-cta > img, .auth-detail img,
  .brand img, .hero-mark img, .premium-heading img, .rotating-words > span { animation: none !important; transform: none; filter: none; }
  .rotating-words > span { opacity: 0; }
  .rotating-words > span:first-child { opacity: 1; }
  .motion-control { display: none; }
}

/* Shared 3D fallback and looping brand motion. */
.site-logo{width:90px;height:90px;position:relative;perspective:360px;margin:0 0 18px;--pro-accent:#ff6d80}
.site-logo .pro-logo-core{position:absolute;inset:0;transform-style:preserve-3d}
.pro-logo-core{animation:logo-turn 10s linear infinite!important}
.pro-logo-layer{transform:translateZ(calc((var(--layer) - 15.5)*.85px));background:linear-gradient(110deg,#8e1831,#ec4464 60%,#742033);backface-visibility:visible}
.site-logo .pro-logo-layer{position:absolute;inset:0;mask:url('/assets/logo.png') center/contain no-repeat;-webkit-mask:url('/assets/logo.png') center/contain no-repeat}
.pro-logo-layer:first-child,.pro-logo-layer:last-child{background:linear-gradient(140deg,#ffe2e9,#ff6d88 40%,#b91b44 80%,#ffa5c3)}
.site-logo .logo-mesh{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 8px 7px #0005)}
.site-logo.webgl-ready .pro-logo-core{visibility:hidden}
@keyframes logo-turn{from{transform:rotateX(18deg) rotateY(-32deg) rotateZ(-5deg)}to{transform:rotateX(18deg) rotateY(328deg) rotateZ(-5deg)}}
#menu img,.preview-answer img{animation:brand-spin 10s linear infinite}
.landing-page{position:relative;isolation:isolate}
.landing-page:before{content:'';position:fixed;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 22% 16%,#ce25441c,transparent 45%),radial-gradient(ellipse at 80% 70%,#a6366217,transparent 40%);animation:ambient-travel 14s ease-in-out infinite alternate}
.landing-page .chat-preview{animation:preview-float 7s ease-in-out infinite}
.landing-page .preview-project{animation:surface-glow 6s ease-in-out infinite}
.landing-page .feature-index{animation:index-glow 5s ease-in-out infinite}
.landing-page .feature-grid article:nth-child(2) .feature-index{animation-delay:-1.7s}.landing-page .feature-grid article:nth-child(3) .feature-index{animation-delay:-3.4s}
.landing-page .primary>span{display:inline-block;animation:arrow-drift 3s ease-in-out infinite}
.landing-page .plan-tab,.landing-page .feature-grid article,.landing-page .telegram-links>a{transition:background .25s,border-color .25s,box-shadow .25s}
.landing-page .feature-grid article:hover{background:#ffffff04}.landing-page .primary:hover{box-shadow:0 0 22px #e1344f2b}
@keyframes ambient-travel{from{transform:translate(-4%,-3%) rotate(-3deg)}to{transform:translate(5%,4%) rotate(4deg)}}
@keyframes preview-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes surface-glow{0%,100%{box-shadow:0 0 0 transparent;border-color:#3a3a42}50%{box-shadow:0 0 22px #ce365014;border-color:#774550}}
@keyframes index-glow{0%,100%{color:#8f8f98}50%{color:#e2a0ae}}
@keyframes arrow-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-3px)}}
body.pro-still .pro-logo-core{animation:none!important}
@media(prefers-reduced-motion:reduce){.pro-logo-core,#menu img,.preview-answer img,.landing-page:before,.landing-page .chat-preview,.landing-page .preview-project,.landing-page .feature-index,.landing-page .primary>span{animation:none!important}}

/* One shared animated backdrop across every website page. */
body.wave-site{--wave-color:#e00019;--wave-rgb:225,15,38;background:#100202;position:relative;isolation:isolate;min-height:100dvh}
.wave-background{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 52% -30%,rgba(var(--wave-rgb),.28),transparent 58%),radial-gradient(ellipse at 75% 120%,rgba(var(--wave-rgb),.2),transparent 65%),#0b0102;color:var(--wave-color);z-index:-1}
.wave-background svg{width:100%;height:100%;overflow:visible;opacity:.8}
.wave-one{transform-origin:50% 35%;animation:wave-drift 8s ease-in-out -2s infinite alternate}
.wave-two{transform-origin:50% 60%;animation:wave-drift 11s ease-in-out -5s infinite alternate-reverse}
.wave-three{transform-origin:50% 80%;animation:wave-drift 9s ease-in-out -3s infinite alternate}
@keyframes wave-drift{from{transform:translate(-7%,-6%) scale(1.12,1) rotate(-5deg)}to{transform:translate(7%,8%) scale(1.16,1.2) rotate(5deg)}}

.landing-page.wave-site:before{content:none}
@media(prefers-reduced-motion:reduce){.wave-background path{animation:none!important}}
