/* Motion accents keep the approved layout stationary and honor reduced motion. */
@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes warm-flame{0%,100%{filter:drop-shadow(0 0 5px #ffb94b30)}50%{filter:drop-shadow(0 0 11px #ffb94b80)}}
@keyframes live-beacon{0%,100%{box-shadow:0 0 10px 2px #20e88b50}50%{box-shadow:0 0 18px 5px #20e88b80}}
@keyframes neon-orbit{to{--neon-angle:360deg}}
@keyframes neon-breathe{0%,100%{opacity:.68;filter:drop-shadow(0 0 3px var(--accent)) saturate(.9)}50%{opacity:1;filter:drop-shadow(0 0 7px var(--accent)) saturate(1.25)}}
.brand-header,.page-heading{animation:arrive .75s ease-out both}.cards-row .action-card{animation:arrive .65s ease-out backwards}.cards-row .action-card:nth-child(2){animation-delay:.09s}.cards-row .action-card:nth-child(3){animation-delay:.18s}.flame-icon{animation:warm-flame 4s ease-in-out infinite}.status-pill[data-state=online] .pulse-dot{animation:live-beacon 2.8s ease-in-out infinite}
.panel-symbol img{width:39px;height:42px;filter:drop-shadow(0 2px 5px #f6bd7020)}.panel-symbol.big-symbol img{width:49px;height:52px}.tone-cyan .panel-symbol img{filter:hue-rotate(140deg) saturate(.65)}.tone-teal .panel-symbol img{filter:hue-rotate(115deg) saturate(.65)}
.glass-panel{transition:border-color .25s,box-shadow .25s,background-color .25s}.page-button,.card-action-btn{position:relative;overflow:hidden}.page-button:after,.card-action-btn:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#fff2 48%,transparent 65%);transform:translateX(-140%);transition:transform .65s;pointer-events:none}.page-button:hover:after,.action-card:hover .card-action-btn:after{transform:translateX(140%)}
.action-card::before{animation:neon-orbit 5.2s linear infinite,neon-breathe 4.6s ease-in-out infinite}.action-card:nth-child(2)::before{animation-delay:-1.7s,-1.5s}.action-card:nth-child(3)::before{animation-delay:-3.4s,-3s}.action-card:hover::before,.action-card:focus-visible::before{animation-duration:2.8s,3.4s}
.motion-ready .reveal-item{opacity:1;transform:translateY(6px);transition:transform .65s ease,border-color .25s,box-shadow .25s}.motion-ready .reveal-item.is-visible{transform:translateY(0)}
.motion-toggle{display:inline-flex;align-items:center;min-height:44px;gap:7px;padding:7px 11px;background:#34293980;border:1px solid #d8c4c82e;border-radius:22px;color:#decfe0;font-size:10px;letter-spacing:.2px}.home-motion-toggle{position:fixed;right:15px;bottom:20px;z-index:3}.page-bottom .motion-toggle{align-self:flex-start;white-space:nowrap}.motion-paused *, .motion-paused *:before,.motion-paused *:after{animation:none!important;transition:none!important}.motion-paused .reveal-item{opacity:1;transform:none}
@media(max-width:700px){.home-motion-toggle{position:absolute;top:104px;right:10px;bottom:auto;font-size:9px;padding:5px 8px}.page-bottom{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.motion-ready .reveal-item{opacity:1;transform:none}*,*:before,*:after{animation:none!important;transition:none!important}}
/* On phones, animate opacity rather than repainting a filtered conic border.
   The neon outline and ember motion remain visible. */
@keyframes phone-neon-glow { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .action-card::before { animation: phone-neon-glow 4.6s ease-in-out infinite; filter: none; }
  .action-card:hover::before, .action-card:focus-visible::before { animation-duration: 3.4s; }
}