/* OneVis mobile motion layer: small-screen-first enhancements.
   Decorative movement never blocks reading, taps, or native scrolling. */
.ov-mobile-streaks { display:none; pointer-events:none; }

@media (max-width:820px) and (prefers-reduced-motion:no-preference) {
  /* Keep the cinematic hero alive on narrow screens without a static hero image. */
  .page-index .kinetic-hero { isolation:isolate; }
  .page-index .kinetic-hero .hero-grid { position:relative; z-index:3; }
  .ov-mobile-streaks {
    display:block; position:absolute; inset:0; z-index:1; overflow:hidden;
    contain:paint; opacity:.8;
  }
  .ov-mobile-streaks span {position:absolute;display:block;pointer-events:none;will-change:transform,opacity;}
  .ov-mobile-streaks span:nth-child(1) {
    width:175%;height:130px;top:33%;left:-56%;
    background:linear-gradient(90deg,transparent 3%,rgba(16,70,192,.04) 22%,rgba(49,128,255,.40) 49%,rgba(108,184,255,.18) 55%,transparent 81%);
    transform:rotate(-19deg) translate3d(-9%,0,0);filter:blur(29px);
    animation:ov-mobile-current 12s ease-in-out infinite alternate;
  }
  .ov-mobile-streaks span:nth-child(2) {
    width:170%;height:65px;bottom:18%;right:-80%;
    background:linear-gradient(90deg,transparent,rgba(48,112,247,.38),rgba(129,202,255,.38),transparent);
    transform:rotate(-25deg) translate3d(5%,0,0);filter:blur(17px);
    animation:ov-mobile-current-reverse 14s ease-in-out -3s infinite alternate;
  }
  .ov-mobile-streaks span:nth-child(3) {
    width:65%;height:34%;left:18%;top:40%;border-radius:50%;
    background:radial-gradient(ellipse,rgba(37,99,235,.20),transparent 72%);
    filter:blur(28px);animation:ov-mobile-ambient 8s ease-in-out infinite alternate;
  }
  .page-index .motion-stage {touch-action:pan-y;contain:layout style;}
  .page-index .motion-ring-outer {animation-duration:28s;}
  .page-index .motion-ring-middle {animation-duration:22s;}
  .page-index .motion-core {
    box-shadow:inset 0 0 40px rgba(47,126,255,.17),
      0 15px 50px rgba(0,5,25,.43),
      0 0 44px rgba(38,103,241,.24);
  }
  .page-index .motion-core::after {
    content:'';position:absolute;inset:-20%;z-index:-1;pointer-events:none;border-radius:50%;
    background:radial-gradient(circle at var(--ov-touch-x,50%) var(--ov-touch-y,50%),rgba(106,189,255,.26),transparent 44%);
    opacity:.7;animation:ov-mobile-ambient 7s ease-in-out infinite alternate;
  }
  .page-index .motion-core-words > span {animation:ov-mobile-word-glint 6.6s ease-in-out infinite;}
  .page-index .motion-core-words > span:nth-child(2) {animation-delay:-4.4s;}
  .page-index .motion-core-words > span:nth-child(3) {animation-delay:-2.2s;}
  .ov-mobile-touch-spark {
    position:absolute;width:14px;height:14px;border:2px solid #A4E3FF;
    left:0;top:0;z-index:6;border-radius:50%;pointer-events:none;
    box-shadow:0 0 18px rgba(84,177,255,.7);
    animation:ov-mobile-touch .75s ease-out forwards;
  }
  /* A few staggered beats get the message in view immediately, then the scene. */
  .page-index .kinetic-hero .hero-kicker,
  .page-index .kinetic-hero .hero-copy h1,
  .page-index .kinetic-hero .hero-copy .lead,
  .page-index .kinetic-hero .hero-cta,
  .page-index .kinetic-hero .hero-proof {
    animation:ov-mobile-copy .62s cubic-bezier(.18,.8,.23,1) backwards;
  }
  .page-index .kinetic-hero .hero-copy h1 {animation-delay:110ms;}
  .page-index .kinetic-hero .hero-copy .lead {animation-delay:210ms;}
  .page-index .kinetic-hero .hero-cta {animation-delay:300ms;}
  .page-index .kinetic-hero .hero-proof {animation-delay:380ms;}
  .page-index .kinetic-hero .motion-stage {animation-delay:420ms;}
  .hero-cta .btn:active,.site-header .nav-toggle:active,
  .page-index .btn-outline:active {transform:scale(.975);transition:transform .15s ease;}
  .site-header .nav-toggle {min-width:44px;min-height:44px;}
  .main-nav.open a {animation:ov-mobile-nav .36s cubic-bezier(.2,.8,.2,1) backwards;}
  .main-nav.open a:nth-child(2) {animation-delay:35ms;}
  .main-nav.open a:nth-child(3) {animation-delay:70ms;}
  .main-nav.open a:nth-child(4) {animation-delay:105ms;}
  .main-nav.open a:nth-child(5) {animation-delay:140ms;}
  .main-nav.open a:nth-child(6) {animation-delay:175ms;}
  /* Staggered service/portfolio cards keep existing shared reveals intact. */
  .grid .card.reveal:not(.visible) {transform:translate3d(0,23px,0) scale(.988);}
  .grid .card.reveal.visible {transform:translate3d(0,0,0) scale(1);}
  .grid .card.reveal {transition-duration:.62s,.62s,.62s,.4s;}
  /* Photo motion only runs while the card is actually on screen. */
  .client-work-cover--photo.ov-mobile-on-screen .client-work-image {
    animation:ov-mobile-photo-pan 10s ease-in-out infinite alternate;
  }
  .client-work-cover--photo.ov-mobile-on-screen::after {
    opacity:1;animation:ov-mobile-photo-light 1.5s cubic-bezier(.17,.7,.25,1) 100ms 1 both;
  }
  .cl-logo--photo.ov-mobile-on-screen .cl-thumb-photo {
    animation:ov-mobile-thumb .75s cubic-bezier(.16,1,.3,1) both;
  }
  /* Vertical scroll-led brand story, not three simultaneous animations. */
  .ov-process {overflow:hidden;}
  .ov-process .ov-process-track {grid-template-columns:1fr;gap:16px;padding-left:19px;}
  .ov-process .ov-process-rail {
    display:block;top:4px;bottom:4px;height:auto;width:2px;left:5px;right:auto;
    background:rgba(140,188,255,.16);z-index:0;
  }
  .ov-process .ov-process-rail>span,
  .ov-process.ov-process-in .ov-process-rail>span {
    width:100%;height:100%;transform:scaleY(var(--ov-mobile-progress,0));
    transform-origin:top center;transition:none;
  }
  .ov-process .ov-process-card {min-height:0;padding:0 22px 24px;}
  body.ov-mobile-ready .ov-process.ov-process-in .ov-process-card {animation:none;}
  body.ov-mobile-ready .ov-process .ov-process-card:not(.ov-mobile-inview) {
    opacity:0;filter:blur(5px);transform:translate3d(0,27px,0) scale(.988);
  }
  body.ov-mobile-ready .ov-process .ov-process-card.ov-mobile-inview {
    opacity:1;filter:none;transform:translate3d(0,0,0) scale(1);
    border-color:rgba(108,177,255,.32);
    box-shadow:0 14px 34px rgba(0,8,30,.22);
  }
  body.ov-mobile-ready .ov-process .ov-process-card {
    transition:opacity .63s ease,filter .63s ease,transform .68s cubic-bezier(.17,.84,.25,1),border-color .5s ease,box-shadow .5s ease;
  }
  .ov-process .ov-process-card::before {
    content:'';position:absolute;left:-17px;top:31px;width:17px;height:1px;
    background:linear-gradient(90deg,#4899FF,rgba(90,163,255,.18));pointer-events:none;
  }
  /* Keep all controls and content readable when animations are paused. */
  body.ov-motion-paused .ov-mobile-streaks,
  body.ov-motion-paused .ov-mobile-touch-spark {display:none;}
  body.ov-motion-paused .ov-process .ov-process-card {opacity:1!important;transform:none!important;filter:none!important;}
  body.ov-motion-paused .ov-process .ov-process-rail>span {transform:scaleY(1)!important;}
  body.ov-motion-paused .main-nav.open a {animation:none!important;}
}
@media (max-width:380px) and (prefers-reduced-motion:no-preference) {
  .page-index .motion-float-tag {font-size:.43rem;letter-spacing:.04em;}
  .page-index .motion-stage {width:100%;}
}
@keyframes ov-mobile-current {
  from{transform:rotate(-19deg) translate3d(-13%,-9%,0);opacity:.45;}
  to{transform:rotate(-11deg) translate3d(17%,10%,0);opacity:.83;}
}
@keyframes ov-mobile-current-reverse {
  from{transform:rotate(-25deg) translate3d(15%,-7%,0);opacity:.35;}
  to{transform:rotate(-17deg) translate3d(-15%,8%,0);opacity:.75;}
}
@keyframes ov-mobile-ambient {from{opacity:.38;transform:scale(.94)}to{opacity:.78;transform:scale(1.07)}}
@keyframes ov-mobile-word-glint {0%,15%,44%,100%{text-shadow:none}24%,32%{text-shadow:0 0 19px rgba(106,186,255,.70)}}
@keyframes ov-mobile-touch {from{transform:translate(-50%,-50%) scale(.5);opacity:.9}to{transform:translate(-50%,-50%) scale(9);opacity:0}}
@keyframes ov-mobile-copy {from{opacity:0;transform:translate3d(0,19px,0);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes ov-mobile-nav {from{transform:translate3d(0,-7px,0);opacity:0}to{transform:none;opacity:1}}
@keyframes ov-mobile-photo-pan {from{transform:translate3d(0,-7px,0) scale(1.075)}to{transform:translate3d(0,7px,0) scale(1.125)}}
@keyframes ov-mobile-photo-light {from{transform:translateX(-125%);opacity:0}25%{opacity:1}to{transform:translateX(135%);opacity:0}}
@keyframes ov-mobile-thumb {from{opacity:.45;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .ov-mobile-streaks{display:none!important;}
  .ov-process .ov-process-rail>span{transform:scaleY(1)!important;}
  .ov-process .ov-process-card {opacity:1!important;transform:none!important;filter:none!important;}
}