/* ==========================================================
   Animated logo scene (replaces the phone mockup in the hero)
   Colors come from the variant tokens (--v-*).
   ========================================================== */
.hero-mock.logo-scene{
  aspect-ratio:auto;width:min(100%,560px);display:block;position:relative;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.logo-scene .mock-glow{inset:6% 8%;background:radial-gradient(closest-side,rgba(var(--v-cta-rgb),.28),rgba(var(--v-accent2-rgb),.22) 55%,transparent 75%)}
.logo-scene .ls-svg{position:relative;z-index:2;width:100%;height:auto;display:block;overflow:visible}

/* ribbon = the S of "Shooting" */
.ls-ga1{stop-color:var(--v-accent)}
.ls-ga2{stop-color:var(--v-accent-2)}
.ls-r-a{fill:url(#ls-ribbon-a)}
.ls-r-b{fill:url(#ls-ribbon-b)}
.ls-r-c{fill:url(#ls-ribbon-c)}

/* star */
.ls-gs1{stop-color:var(--v-cta)}
.ls-gs2{stop-color:var(--v-cta-2)}
.ls-star-main{fill:url(#ls-star-g)}
.ls-star-glow{fill:var(--v-cta);opacity:.85}

/* lettering */
.ls-l{fill:var(--v-ink)}

/* sparks + comet */
.ls-sparks *{pointer-events:none}
.ls-spark{fill:#fff}
.ls-spark.peach{fill:var(--v-cta)}
.ls-spark.lilac{fill:var(--v-accent-2)}
.ls-spark.violet{fill:var(--v-accent)}
.ls-comet{fill:#fff;filter:url(#ls-soft)}

/* ambient twinkles: CSS-driven so they run even before GSAP is ready */
.ls-twinkles use{fill:var(--v-cta);transform-box:fill-box;transform-origin:center;animation:ls-twinkle var(--tw,2.6s) ease-in-out infinite;animation-delay:var(--twd,0s);opacity:0}
.ls-twinkles use:nth-child(even){fill:var(--v-accent-2)}
@keyframes ls-twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0deg)}45%{opacity:1;transform:scale(1.1) rotate(45deg)}60%{opacity:.9;transform:scale(.9) rotate(70deg)}}

/* no-GSAP / reduced-motion fallback: show the finished logo */
.logo-scene.ls-static .ls-l{opacity:1!important;transform:none!important}
.logo-scene.ls-static #lsRevealPath{stroke-dasharray:none!important;stroke-dashoffset:0!important}
.logo-scene.ls-static .ls-star-wrap{transform:none!important}
@media (prefers-reduced-motion:reduce){.ls-twinkles use{animation:none;opacity:.8}}

/* on phones the logo sits under the copy; give it a little air */
@media (max-width:900px){.hero-mock.logo-scene{width:min(100%,440px);margin-inline:auto;margin-top:.5rem}}