/* =========================================================================
   Watson's Way ABA — motion layer

   Rules this follows, deliberately:

   • transform and opacity only — no animating width, top, or filter on scroll,
     so nothing triggers layout or paint during a scroll frame
   • every effect is opt-in per element, added by JS, so the markup is
     untouched and the Elementor export stays byte-identical
   • vestibular-heavy effects (parallax, drift, cursor) are OFF on touch, OFF
     under reduced motion, and OFF when the visitor asks for calm
   • the audience includes autistic children and their parents, so motion is
     restrained on purpose: nothing pulses, nothing loops forever in view,
     nothing moves that the visitor did not cause
   ========================================================================= */

.wway-site{
  --m-fast:.35s;
  --m-base:.6s;
  --m-slow:.9s;
  --m-ease:cubic-bezier(.22,1,.36,1);
  --m-ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 1. preloader ---------- */

.wway-pre{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:#FFFBF3;transition:opacity .5s var(--m-ease),visibility .5s}
.wway-pre.is-done{opacity:0;visibility:hidden;pointer-events:none}
.wway-pre-mark{width:74px;height:74px;display:grid;place-items:center;
  animation:wway-pre-in .7s var(--m-ease-out) both}
.wway-pre-mark img{width:100%;height:auto}
.wway-pre-bar{position:absolute;left:50%;bottom:34%;transform:translateX(-50%);
  width:120px;height:2px;background:#EADFC7;overflow:hidden;border-radius:2px}
.wway-pre-bar i{position:absolute;inset:0;background:#0E2149;
  transform:translateX(-100%);animation:wway-pre-run 1.1s var(--m-ease) infinite}
@keyframes wway-pre-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes wway-pre-run{to{transform:translateX(100%)}}

/* ---------- 2. scroll reveals ---------- */

.wway-mo [data-mo]{opacity:0;will-change:transform,opacity}
.wway-mo [data-mo="up"]{transform:translate3d(0,22px,0)}
.wway-mo [data-mo="fade"]{transform:none}
.wway-mo [data-mo="left"]{transform:translate3d(-24px,0,0)}
.wway-mo [data-mo="right"]{transform:translate3d(24px,0,0)}
.wway-mo [data-mo="scale"]{transform:scale(.965)}
.wway-mo [data-mo].is-in{opacity:1;transform:none;
  transition:opacity var(--m-base) var(--m-ease-out),transform var(--m-base) var(--m-ease-out)}
/* once revealed, stop reserving a compositor layer */
.wway-mo [data-mo].is-settled{will-change:auto}

/* ---------- 3. heading text reveal ---------- */

.wway-mo .mo-line{display:block;overflow:hidden}
.wway-mo .mo-line>span{display:block;transform:translate3d(0,105%,0);
  transition:transform var(--m-slow) var(--m-ease-out)}
.wway-mo .is-in .mo-line>span,
.wway-mo .mo-line.is-in>span{transform:none}

/* ---------- 4. image reveal ---------- */

.wway-mo .mo-img{overflow:hidden}
.wway-mo .mo-img img{transform:scale(1.08);opacity:0;
  transition:transform 1.15s var(--m-ease-out),opacity .7s ease}
.wway-mo .mo-img.is-in img{transform:scale(1);opacity:1}

/* ---------- 5. card tilt (pointer devices only) ---------- */

.wway-mo .mo-tilt{transform-style:preserve-3d;
  transition:transform var(--m-fast) var(--m-ease),box-shadow var(--m-fast) var(--m-ease)}
.wway-mo .mo-tilt>*{transform:translateZ(0)}

/* ---------- 6. magnetic buttons ---------- */

.wway-mo .mo-mag{transition:transform var(--m-fast) var(--m-ease)}

/* ---------- 7. hero atmosphere ---------- */
/* One slow, low-contrast gradient. It pauses when off screen and never loops
   in the visitor's peripheral vision for longer than the hero is on screen. */

.wway-mo .mo-aura{position:relative;isolation:isolate}
.wway-mo .mo-aura::before{content:"";position:absolute;inset:-20% -10%;z-index:-1;
  background:radial-gradient(42% 46% at 22% 28%,rgba(240,216,120,.30),transparent 60%),
             radial-gradient(38% 42% at 80% 62%,rgba(14,33,73,.12),transparent 62%);
  opacity:.55;transform:translate3d(0,0,0);
  animation:wway-drift 26s ease-in-out infinite alternate;
  animation-play-state:paused}
.wway-mo .mo-aura.is-in::before{animation-play-state:running}
@keyframes wway-drift{
  from{transform:translate3d(-1.5%,-1%,0) scale(1)}
  to{transform:translate3d(1.5%,1.5%,0) scale(1.05)}}

/* floating marks — three, small, slow, purely decorative */
.wway-float{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;
  background:rgba(240,216,120,.30);opacity:.5;filter:blur(.5px);
  animation:wway-bob 14s ease-in-out infinite alternate;animation-play-state:paused}
.wway-mo .is-in .wway-float{animation-play-state:running}
@keyframes wway-bob{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-16px,0)}}

/* ---------- 8. counters ---------- */

.wway-mo .mo-count{font-variant-numeric:tabular-nums}

/* ---------- 9. glass ---------- */
/*
   Measured, not assumed: putting backdrop-filter on the sticky header cost
   24% dropped frames on Watson's and 5% on PBA, because a blurred backdrop
   repaints on every scroll frame. Removing it took both to 0%.

   So the glass goes where it is free — the mega menu and overlay panels,
   which sit above content that is not scrolling underneath them. The header
   keeps a translucent background, which reads the same at a glance and costs
   nothing.
*/
@supports (backdrop-filter:blur(10px)){
  .wway-site .mega,
  .wway-site .mega-shell,
  .wway-site .mb{
    backdrop-filter:blur(16px) saturate(150%);
    -webkit-backdrop-filter:blur(16px) saturate(150%)}
}

/* ---------- 10. micro-interactions ---------- */

.wway-site .btn,.wway-site .btn .elementor-button{
  transition:transform var(--m-fast) var(--m-ease),background var(--m-fast) ease,
             color var(--m-fast) ease,border-color var(--m-fast) ease,box-shadow var(--m-fast) ease}
.wway-mo .btn:active{transform:translateY(1px) scale(.99)}

.wway-mo .index-row,.wway-mo .bt,.wway-mo .mcard,.wway-mo .job,.wway-mo .tcard{
  transition:transform var(--m-fast) var(--m-ease),box-shadow var(--m-fast) var(--m-ease),
             background var(--m-fast) ease}

.wway-mo .mo-img img,.wway-mo .collage img,.wway-mo .mosaic img{
  transition:transform 1.1s var(--m-ease-out),opacity .7s ease}

/* form focus: a ring that grows rather than blinks */
.wway-mo .field input,.wway-mo .field textarea{
  transition:border-color .25s ease,box-shadow .25s var(--m-ease),background .25s ease}

/* ---------- 11. cursor (fine pointers only, off by default on touch) ---------- */

.wway-cursor{position:fixed;top:0;left:0;width:28px;height:28px;border-radius:50%;
  border:1.5px solid #0E2149;pointer-events:none;z-index:9998;opacity:0;
  transform:translate3d(-100px,-100px,0);
  transition:opacity .3s ease,width .25s var(--m-ease),height .25s var(--m-ease),
             background .25s ease,border-color .25s ease;
  mix-blend-mode:normal}
.wway-cursor.is-on{opacity:.55}
.wway-cursor.is-hot{width:46px;height:46px;background:rgba(240,216,120,.30);opacity:.85}

/* ---------- 12. page transition ---------- */

.wway-fade{position:fixed;inset:0;z-index:9997;background:#FFFBF3;
  opacity:0;pointer-events:none;transition:opacity .32s ease}
.wway-fade.is-on{opacity:1}

/* ---------- 13. the calm switch ---------- */

.wway-calm{position:fixed;right:14px;bottom:14px;z-index:9996;
  display:inline-flex;align-items:center;gap:8px;
  background:#22201C;color:#fff;border:0;border-radius:999px;
  padding:10px 16px;font:600 13px/1 'Nunito Sans',sans-serif;cursor:pointer;
  opacity:.86;transition:opacity .25s ease,transform .25s var(--m-ease);
  min-height:40px}
.wway-calm:hover,.wway-calm:focus-visible{opacity:1;transform:translateY(-2px)}
.wway-calm svg{width:15px;height:15px}

/* ---------- responsive & performance ---------- */

@media(max-width:900px){
  /* Nothing that moves independently of the finger on a small screen: no
     parallax, no drifting aura, no floating marks, no cursor. Reveals stay,
     because they respond to the visitor's own scrolling. */
  .wway-mo .mo-aura::before{animation:none}
  .wway-float{display:none}
  .wway-cursor{display:none}
  .wway-mo [data-mo]{transform:translate3d(0,14px,0)}
  .wway-mo [data-mo="left"],.wway-mo [data-mo="right"]{transform:translate3d(0,14px,0)}
  .wway-mo .mo-tilt{transform:none!important}
}

/* A visitor who asks for calm, or whose system does, gets a still page. */
@media(prefers-reduced-motion:reduce){
  .wway-mo [data-mo],.wway-mo .mo-line>span,.wway-mo .mo-img img{
    opacity:1!important;transform:none!important;transition:none!important}
  .wway-mo .mo-aura::before,.wway-float{animation:none!important}
  .wway-cursor,.wway-fade{display:none!important}
  .wway-pre{display:none!important}
  .wway-site *,.wway-site *::before,.wway-site *::after{
    animation-duration:.01ms!important;transition-duration:.01ms!important}
}

.wway-calm-on [data-mo],.wway-calm-on .mo-line>span,.wway-calm-on .mo-img img{
  opacity:1!important;transform:none!important;transition:none!important}
.wway-calm-on .mo-aura::before,.wway-calm-on .wway-float{animation:none!important}
.wway-calm-on .wway-cursor,.wway-calm-on .wway-fade{display:none!important}
.wway-calm-on .mo-tilt{transform:none!important}

@media print{
  .wway-pre,.wway-cursor,.wway-fade,.wway-calm,.wway-float{display:none!important}
  [data-mo],.mo-line>span,.mo-img img{opacity:1!important;transform:none!important}
}