/* ============================================================
   OneVis Motion Studio, October 2026
   Original motion language developed for the OneVis website.
   Design references: editorial reveals, cinematic image masks and
   scroll-led visual storytelling. No third-party runtime required.
   ============================================================ */

/* Browser-native, same-origin page navigation transitions. Browsers that
   do not support this keep normal page navigation. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: ov-page-leave .18s ease-in both; }
::view-transition-new(root) { animation: ov-page-arrive .42s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ov-page-leave { to { opacity:.78; filter:blur(2px); } }
@keyframes ov-page-arrive { from { opacity:.7; transform:translateY(9px); filter:blur(3px); } to { opacity:1;transform:none;filter:none; } }

/* A restrained editorial entrance gives headlines individual word beats. */
.ov-motion-type .ov-word-wrap { display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.18;padding-bottom:.11em;margin-bottom:-.11em; }
.ov-motion-type .ov-word { display:inline-block;white-space:pre;transform:translate3d(0,116%,0);opacity:.06;filter:blur(4px);will-change:transform,opacity;transition:transform .82s cubic-bezier(.18,.9,.17,1),opacity .8s ease,filter .8s ease;transition-delay:var(--ov-word-delay,0ms); }
.ov-motion-type.ov-words-on .ov-word {transform:translate3d(0,0,0);opacity:1;filter:blur(0)}
.ov-motion-type .ov-word-wrap + .ov-word-wrap {margin-left:0}
.ov-motion-type h2::after {pointer-events:none}
.page-hero h1.ov-motion-type {letter-spacing:-.05em}

/* Header and call-to-action micro-interactions. The active logo stays real artwork. */
.site-header .logo img {transition:filter .3s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.site-header .logo:hover img {filter:drop-shadow(0 0 10px rgba(98,170,255,.36));transform:translateY(-1px)}
.main-nav a:not(.btn) {transition:color .25s ease}
.btn {isolation:isolate}
.btn:not(:disabled):active {filter:brightness(1.08)}
.btn-primary {background-size:190% 190%;animation:ov-button-breathe 8s ease-in-out infinite alternate}
@keyframes ov-button-breathe {from{background-position:0% 50%}to{background-position:100% 50%}}

/* Existing card reveals now run as curated groups rather than random delays. */
.grid .card.reveal:not(.visible),
.team-grid .person.reveal:not(.visible),
.founder-feature .person.reveal:not(.visible) {filter:blur(5px)}
.grid .card.reveal,.team-grid .person.reveal,.founder-feature .person.reveal {
  transition-duration:.82s,.82s,.82s,.4s;
  transition-delay:var(--ov-stagger-delay,0ms) !important;
  transition-timing-function:cubic-bezier(.18,.75,.18,1);
}
.grid .card.reveal.visible,.team-grid .person.reveal.visible,.founder-feature .person.reveal.visible {filter:blur(0)}

/* Photo cards become little editorial reels on scroll, not new static images. */
.client-work-cover--photo {overflow:hidden}
.client-work-cover--photo .client-work-image {
  top:-5%;height:110%;transform:translate3d(0,var(--ov-photo-y,0px),0) scale(1.07);
  transition:transform .7s cubic-bezier(.18,.72,.2,1),filter .65s ease;
}
.work-card:hover .client-work-cover--photo .client-work-image {
  transform:translate3d(0,var(--ov-photo-y,0px),0) scale(1.135);
}
.client-work-cover--photo::after {
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(110deg,transparent 38%,rgba(165,210,255,.19) 49%,transparent 59%);
  transform:translateX(-125%);opacity:0;transition:transform 1s ease,opacity .25s ease;
}
.client-work-cover--photo:hover::after {transform:translateX(120%);opacity:1}
.client-work-cover--photo .client-work-inset {transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .7s ease}
.client-work-cover--photo:hover .client-work-inset {transform:translateY(-6px) rotate(-2deg);box-shadow:0 17px 31px rgba(0,0,0,.35)}
.client-work-cover--photo .client-work-brand {transition:transform .55s cubic-bezier(.16,1,.3,1)}
.client-work-cover--photo:hover .client-work-brand {transform:translateY(-3px)}
.cl-row {transition:background .3s ease,border-color .3s ease}
.cl-row:hover {background:linear-gradient(95deg,rgba(37,99,235,.04),transparent 58%)}

/* The photo and service sections keep a subtle depth when they enter view. */
.section-img,.team-group img,.charity-grid figure img {transition:filter .6s ease,transform .75s cubic-bezier(.16,1,.3,1)}
.charity-grid figure:hover img,.team-group:hover img {transform:scale(1.025);filter:saturate(1.08)}

/* A new visual storytelling ribbon: original HTML, text and CSS, not a screenshot. */
.ov-process {
  position:relative;overflow:hidden;isolation:isolate;
  padding:104px 0 112px;color:#fff;
  background:linear-gradient(120deg,#030C23 0%,#07193E 48%,#0A2355 100%);
}
.ov-process::before {content:'';position:absolute;inset:-40% -8%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 78% 52%,rgba(37,99,235,.23),transparent 47%),
  radial-gradient(ellipse at 15% 70%,rgba(29,85,189,.14),transparent 52%);
  animation:ov-process-ambient 16s ease-in-out infinite alternate;
}
.ov-process::after {content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.33;
  background-image:linear-gradient(rgba(112,174,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(112,174,255,.06) 1px,transparent 1px);
  background-size:82px 82px;mask-image:linear-gradient(to bottom,transparent,black 30%,black 65%,transparent);
}
@keyframes ov-process-ambient {to {transform:translate3d(3%,2%,0) scale(1.035)}}
.ov-process .container {position:relative;z-index:1}
.ov-process-eyebrow {display:flex;align-items:center;gap:11px;color:#79B6FF;font-size:.73rem;font-weight:700;letter-spacing:.23em;text-transform:uppercase;margin-bottom:17px}
.ov-process-eyebrow::before {content:'';display:block;width:22px;height:2px;background:#60ACFF;box-shadow:0 0 11px rgba(49,132,251,.6)}
.ov-process-header {display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:55px}
.ov-process h2 {color:#FFFFFF;font-size:clamp(2.15rem,4.1vw,3.45rem);max-width:640px;letter-spacing:-.055em;line-height:1.13;font-weight:750}
.ov-process .ov-process-intro {color:#B9CAE8;max-width:335px;line-height:1.8;font-size:.97rem;margin:0 0 5px}
.ov-process-track {position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ov-process-rail {position:absolute;height:2px;left:0;right:0;top:33px;background:rgba(139,186,251,.22);pointer-events:none}
.ov-process-rail > span {display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#2455D6,#5BB5FF,#D1E9FF);box-shadow:0 0 18px rgba(92,167,255,.6);
  transition:transform 2.2s cubic-bezier(.15,.6,.2,1)}
.ov-process.ov-process-in .ov-process-rail > span {transform:scaleX(1)}
.ov-process-card {
  position:relative;min-height:255px;padding:0 27px 26px 26px;
  border-radius:18px;border:1px solid rgba(140,183,242,.18);
  background:linear-gradient(155deg,rgba(14,37,83,.45),rgba(8,21,49,.7));
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  transform:translateY(0);transition:transform .45s ease,border-color .45s ease,background .45s ease;
}
.ov-process-card:hover {transform:translateY(-7px);border-color:rgba(109,176,255,.52);background:linear-gradient(155deg,rgba(17,49,106,.76),rgba(8,21,49,.7))}
.ov-process-point {position:relative;margin:21px 0 34px;display:flex;justify-content:space-between;align-items:center;min-height:25px}
.ov-process-node {position:relative;display:grid;place-items:center;width:24px;height:24px;background:#07193E;border:1px solid #4C98FA;border-radius:50%;box-shadow:0 0 0 5px rgba(40,95,193,.12);z-index:2}
.ov-process-node::after {content:'';width:6px;height:6px;background:#83CCFF;border-radius:50%;box-shadow:0 0 10px #63b6ff;animation:ov-node-pulse 2.4s ease-in-out infinite alternate}
@keyframes ov-node-pulse {to {box-shadow:0 0 16px 4px #63b6ff;opacity:.7}}
.ov-process-number {color:#9FC5FF;font-size:.72rem;font-weight:600;letter-spacing:.12em}
.ov-process-verb {color:#fff;font-size:clamp(2.6rem,4.5vw,4.5rem);font-weight:800;letter-spacing:-.075em;line-height:1;margin-bottom:18px}
.ov-process-verb .ov-process-period {color:#61B6FF}
.ov-process-card h3 {color:#FFF;font-size:1.06rem;letter-spacing:-.02em;margin:0 0 8px;font-weight:650}
.ov-process-card p {color:#B2C5E4;font-size:.91rem;line-height:1.8;margin:0}
.ov-process-foot {display:flex;gap:12px;align-items:center;margin-top:29px;color:#8FADDB;font-size:.71rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.ov-process-foot span {height:1px;flex:1;background:linear-gradient(90deg,rgba(75,138,244,.55),transparent)}
.ov-process-in .ov-process-card {animation:ov-process-arrive .8s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--ov-process-delay,0ms)}
@keyframes ov-process-arrive {from{opacity:0;transform:translate3d(0,32px,0);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* Existing navy hero/CTA sections feel like one connected motion system. */
.page-hero::before {animation:ov-hero-wave 18s ease-in-out infinite alternate}
.cta-band::before {animation:ov-cta-wave 22s ease-in-out infinite alternate;will-change:transform}
@keyframes ov-hero-wave {from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3%,2%,0) scale(1.08)}}
@keyframes ov-cta-wave {from{transform:translate3d(0,0,0) rotate(-2deg)}to{transform:translate3d(4%,2%,0) rotate(2deg)}}

/* A short cue signals that the homepage is scroll-driven. */
.ov-scroll-cue {position:absolute;left:50%;bottom:18px;display:flex;gap:11px;align-items:center;transform:translateX(-50%);color:#9ABCEB;font-size:.58rem;font-weight:700;letter-spacing:.19em;white-space:nowrap;z-index:5;pointer-events:none}
.ov-scroll-line {position:relative;width:28px;height:1px;background:rgba(135,184,255,.3);overflow:hidden}
.ov-scroll-line::after {content:'';position:absolute;inset:0;background:#82C2FF;transform:translateX(-100%);animation:ov-scroll-shine 2.1s ease-in-out infinite}
@keyframes ov-scroll-shine {to{transform:translateX(110%)}}

/* Visitor-accessible pause control. Motion is optional, never essential. */
.ov-pause-motion {position:absolute;right:clamp(22px,4vw,64px);bottom:19px;z-index:8;display:flex;align-items:center;gap:7px;border:1px solid rgba(132,191,255,.28);border-radius:999px;background:rgba(5,21,51,.66);color:#C6DDFF;padding:8px 12px;font:600 .67rem 'Poppins',sans-serif;letter-spacing:.01em;cursor:pointer;backdrop-filter:blur(9px);transition:background .3s ease,border-color .3s ease}
.ov-pause-motion:hover,.ov-pause-motion:focus-visible {background:#123C81;border-color:#79B8FF;outline-offset:3px}
.ov-pause-motion .ov-toggle-icon {width:15px;text-align:center;font-size:.76rem}
body.ov-motion-paused *,body.ov-motion-paused *::before,body.ov-motion-paused *::after {animation-play-state:paused!important}
body.ov-motion-paused .ov-motion-type .ov-word {transform:none!important;opacity:1!important;filter:none!important}
body.ov-motion-paused .ov-process-rail > span {transform:scaleX(1)!important}

@media (max-width: 900px) {
 .ov-process {padding:82px 0 90px}
 .ov-process-header {gap:22px;flex-direction:column;align-items:start;margin-bottom:34px}
 .ov-process .ov-process-intro {max-width:680px}
 .ov-process-track {gap:12px}
 .ov-process-card {padding:0 19px 23px;min-height:286px}
 .ov-process-verb {font-size:3rem}
 .ov-pause-motion {bottom:12px;right:20px}
}
@media (max-width: 640px) {
 .ov-process {padding:75px 0 85px}
 .ov-process-track {grid-template-columns:1fr;gap:12px}
 .ov-process-rail {display:none}
 .ov-process-card {min-height:0;padding:0 22px 23px}
 .ov-process-point {margin:15px 0 19px}
 .ov-process-verb {font-size:3.35rem;margin-bottom:10px}
 .ov-process-card p {font-size:.88rem}
 .ov-process-foot {font-size:.59rem;letter-spacing:.12em}
 .ov-scroll-cue {bottom:17px;left:26px;transform:none;font-size:.49rem}
 .ov-pause-motion {font-size:.59rem;bottom:11px;right:18px}
 .ov-motion-type .ov-word-wrap + .ov-word-wrap {margin-left:0}
}
@media (prefers-reduced-motion: reduce) {
 @view-transition { navigation: none; }
 ::view-transition-old(root),::view-transition-new(root) {animation:none!important}
 .ov-motion-type .ov-word,.ov-motion-type.ov-words-on .ov-word {transform:none!important;opacity:1!important;filter:none!important;transition:none!important}
 .grid .card.reveal:not(.visible),.team-grid .person.reveal:not(.visible),.founder-feature .person.reveal:not(.visible) {filter:none}
 .client-work-cover--photo .client-work-image,.work-card:hover .client-work-cover--photo .client-work-image {transform:none!important;transition:none!important}
 .client-work-cover--photo::after {display:none!important}
 .ov-process::before,.ov-process-rail > span,.ov-process-card,.ov-process-node::after,.page-hero::before,.cta-band::before,.ov-scroll-line::after,.btn-primary {animation:none!important;transition:none!important}
 .ov-process-rail > span {transform:scaleX(1)}
 .ov-process-card {opacity:1!important;transform:none!important;filter:none!important}
 .ov-pause-motion {display:none!important}
}
/* The pause control also neutralizes the pre-existing pointer effects. */
body.ov-motion-paused .cursor-glow {display:none!important}
body.ov-motion-paused .fx-s,body.ov-motion-paused .card.tilting,body.ov-motion-paused .btn {transform:none!important;transition:none!important}
/* Keep the optional control away from the existing hero-stage caption. */
.ov-pause-motion {top:18px;bottom:auto}
@media(max-width:640px) {.ov-pause-motion {top:12px;bottom:auto}}