/* ===========================================================================
   Motion. Every effect sits ON TOP of editable content, never inside it:
   all of it is off in the Elementor editor and under reduced motion, and
   nothing here can hide content when JavaScript does not run.
   =========================================================================== */

/* ----------------------------------------------------------------- reveal
   Fail open: visible by default. Hidden only under html.js — which is set
   by main.js itself, the same file that reveals things again. */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
body.elementor-editor-active .reveal,
body.elementor-editor-active .reveal.in{opacity:1 !important;transform:none !important}

/* --------------------------------------------------------- hero entrance */
html.js .hero .hero-copy .elementor-widget{animation:rise .9s var(--ease) both}
html.js .hero .hero-copy .elementor-widget:nth-child(2){animation-delay:.08s}
html.js .hero .hero-copy .elementor-widget:nth-child(3){animation-delay:.16s}
html.js .hero .hero-copy .elementor-widget:nth-child(4),
html.js .hero .hero-copy .elementor-widget:nth-child(5){animation-delay:.24s}
html.js .hero .hero-copy .elementor-widget:nth-child(6){animation-delay:.32s}
html.js .hero .hero-side .elementor-widget{animation:stageIn 1.2s var(--ease) .15s both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes stageIn{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}

/* headline light sweep */
.elementor-heading-title .hl{animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ------------------------------------------------------------ the stage */
.stage-ring i{animation:ringPulse 4.5s ease-in-out infinite}
.stage-ring i:nth-child(2){animation-delay:.6s}
.stage-ring i:nth-child(3){animation-delay:1.2s}
@keyframes ringPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
.stage-glow{animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.toast{animation:float 6s ease-in-out infinite}
.toast--2{animation-delay:-2s}
.toast--3{animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* main.js swaps a toast's contents; .swap replays its entrance */
.toast.is-swap{animation:toastSwap .7s var(--ease-spring),float 6s ease-in-out infinite}
@keyframes toastSwap{0%{opacity:0;transform:translateY(14px) scale(.92)}100%{opacity:1;transform:none}}
.toast.is-swap .toast-ic{animation:ping .9s var(--ease)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(31,191,138,.6)}100%{box-shadow:0 0 0 14px rgba(31,191,138,0)}}

/* ------------------------------------------------------------ the editor
   The builder canvas is for editing: no loops, no entrances, no tilt. */
body.elementor-editor-active .hero .elementor-widget,
body.elementor-editor-active .toast,
body.elementor-editor-active .stage-ring i,
body.elementor-editor-active .stage-glow,
body.elementor-editor-active .ticker-row,
body.elementor-editor-active .cv-lines path,
body.elementor-editor-active .cv-core::after,
body.elementor-editor-active .vcard-btn::before,
body.elementor-editor-active .elementor-heading-title .hl{animation:none !important}
body.elementor-editor-active .fx-dots{display:none}

@media (prefers-reduced-motion:reduce){
  .ticker-row{animation:none}
  .fx-dots{display:none}
  .stage-device{transform:none !important}
}