/* ===============================================================
   OneVis Motion Experience · 2026
   Replaces the static hero artwork with live SVG / CSS / canvas.
   Brand colors and approved smooth VIS masthead stay unchanged.
   =============================================================== */
.page-index .kinetic-hero {
  position:relative; isolation:isolate; overflow:hidden;
  min-height:730px; padding:100px 0 96px;
  background:radial-gradient(650px 580px at 78% 37%,rgba(24,78,182,.28),transparent 75%),
    radial-gradient(600px 460px at 103% 78%,rgba(26,73,169,.18),transparent 72%),
    linear-gradient(117deg,#050D20 0%,#061636 57%,#071B42 100%);
}
.page-index .kinetic-hero::before,
.page-index .kinetic-hero::after {content:none}
.page-index .kinetic-hero .hero-grid {
  min-height:535px; position:relative; z-index:2;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:28px; align-items:center;
}
.kinetic-hero .hero-copy {z-index:4}
.page-index .kinetic-hero h1 {font-size:clamp(3.35rem,5.25vw,5.65rem); max-width:690px}
.page-index .kinetic-hero h1 span {color:#78B5FF}
.kinetic-hero .hero-kicker {margin-bottom:26px}
.kinetic-hero .hero-proof {margin-top:51px}
.kinetic-hero .btn-primary {background:linear-gradient(135deg,#3978ff,#1557ef);box-shadow:0 12px 28px rgba(15,89,255,.27)}
.kinetic-hero .btn-primary:hover {box-shadow:0 17px 43px rgba(15,89,255,.45)}
/* Full-bleed, animated line art replaces any raster visual. */
.motion-backdrop {position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.motion-background-grid {
  position:absolute;inset:0;opacity:.42;
  background-image:linear-gradient(rgba(140,173,229,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(140,173,229,.075) 1px,transparent 1px);
  background-size:90px 90px;
  mask-image:linear-gradient(90deg,transparent 0%,#000 47%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 47%,#000 100%);
}
.motion-ambient-glow {
  position:absolute;width:730px;height:730px;top:-150px;right:-130px;
  background:radial-gradient(circle,rgba(33,103,246,.25),rgba(18,72,188,.10) 43%,transparent 72%);
  opacity:.75;animation:motion-ambient 11s ease-in-out infinite alternate;
}
.motion-wavefield {position:absolute;inset:0;width:100%;height:100%;opacity:.95;overflow:visible}
.motion-wave-halo {fill:none;stroke:#2563EB;stroke-width:26;opacity:.34;filter:url(#waveGlow)}
.motion-wave-line,.motion-wave-cross {fill:none;stroke:url(#waveBlue);stroke-width:1.8;opacity:var(--alpha);stroke-linecap:round}
.motion-wave-cross {stroke:url(#crossBlue);stroke-width:1.4}
.motion-wave-group-one {transform-origin:70% 55%;animation:motion-waves-drift 9s ease-in-out infinite alternate}
.motion-wave-group-two {transform-origin:72% 50%;animation:motion-waves-drift 13s ease-in-out -4s infinite alternate-reverse}
.motion-shimmer-path {fill:none;stroke:url(#waveBlue);stroke-width:3;stroke-dasharray:4 28;stroke-linecap:round;opacity:.65;animation:motion-electric 8s linear infinite}
.motion-traveler {filter:drop-shadow(0 0 6px #6fc2ff);opacity:.9}
.motion-traveler-two {opacity:.75}
.motion-sky-dot {position:absolute;width:5px;height:5px;border-radius:50%;background:#68B5FF;box-shadow:0 0 10px 3px rgba(52,140,255,.5);animation:motion-star 4s ease-in-out infinite}
.sky-dot-one {top:19%;left:66%}.sky-dot-two {top:68%;left:83%;animation-delay:-1.7s}.sky-dot-three {top:32%;left:96%;animation-delay:-2.9s}
/* Kinetic orb composition, purely native HTML/CSS. */
.page-index .motion-stage {
  position:relative;height:540px;min-width:0;z-index:1;overflow:visible;
  --shift-x:0px;--shift-y:0px;
  transform:translate3d(var(--shift-x),var(--shift-y),0);
  transition:transform .38s ease-out;
  animation:motion-entry .85s ease-out both;
}
.motion-stage::before {content:'';position:absolute;inset:4% 0;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(31,97,227,.21) 0%,rgba(19,75,179,.1) 29%,transparent 72%);filter:blur(9px)}
.motion-particles {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.95}
.motion-ring {
  position:absolute;top:50%;left:50%;border-radius:50%;aspect-ratio:1/1;
  transform:translate(-50%,-50%);pointer-events:none;
}
.motion-ring-outer {width:min(105%,505px);border:1px solid rgba(79,155,255,.26);box-shadow:inset 0 0 26px rgba(37,99,235,.06),0 0 60px rgba(37,99,235,.09);animation:motion-ring-rotate 35s linear infinite}
.motion-ring-middle {width:min(82%,399px);border:1px dashed rgba(105,171,255,.32);animation:motion-ring-rotate-reverse 26s linear infinite}
.motion-ring-inner {width:min(64%,307px);border:1px solid rgba(145,198,255,.22);box-shadow:0 0 0 12px rgba(62,121,243,.02),0 0 0 46px rgba(80,129,244,.018)}
.ring-dot {position:absolute;width:8px;height:8px;top:7%;left:16%;border-radius:50%;background:#b8edff;box-shadow:0 0 8px #67b8ff,0 0 19px #2b83ff}
.motion-ring-middle .ring-dot {top:auto;bottom:13%;left:auto;right:13%;width:5px;height:5px}
.motion-core {
  position:absolute;top:50%;left:50%;width:280px;height:280px;
  transform:translate(-50%,-50%);border:1px solid rgba(139,184,255,.27);border-radius:50%;
  background:radial-gradient(circle at 35% 26%,rgba(30,91,215,.34),rgba(5,19,52,.96) 63%,#051332 100%);
  box-shadow:inset 0 0 38px rgba(47,126,255,.13),0 20px 70px rgba(0,5,25,.45),0 0 60px rgba(33,91,219,.15);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  isolation:isolate;overflow:hidden;
}
.motion-core::before {
  content:'';position:absolute;inset:-45%;z-index:-1;
  background:conic-gradient(from 90deg,transparent 0 28%,rgba(75,161,255,.15) 36%,transparent 44% 81%,rgba(88,184,255,.20) 89%,transparent 96%);
  animation:motion-core-sweep 14s linear infinite;
}
.motion-core-kicker,.motion-core-foot {font-size:.54rem;font-weight:600;letter-spacing:.2em;color:#9fc7ff}
.motion-core-kicker {margin-bottom:17px}
.motion-core-foot {margin-top:19px;color:#7298d6}
.motion-core-words {display:flex;flex-direction:column;align-items:center;line-height:.95;font-weight:800;letter-spacing:-.075em;color:white;font-size:2.75rem}
.motion-core-words>span:nth-child(2) {font-size:2.35rem;color:#8bc5ff;margin:8px 0}
.blue-period {color:#3c8aff}
.motion-float-tag {
  position:absolute;display:flex;align-items:center;gap:10px;z-index:2;
  font-size:.63rem;letter-spacing:.16em;font-weight:600;color:#d8e7ff;
  padding:11px 15px;border:1px solid rgba(105,164,255,.23);border-radius:100px;
  background:rgba(6,23,59,.78);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  box-shadow:0 10px 35px rgba(2,10,33,.24);animation:motion-chip-bob 6.5s ease-in-out infinite;
}
.motion-float-tag .tag-indicator {width:6px;height:6px;border-radius:50%;background:#55a9ff;box-shadow:0 0 12px #398bf9}
.motion-tag-one {top:17%;left:-3%}
.motion-tag-two {top:27%;right:-2%;animation-delay:-2.2s}
.motion-tag-three {bottom:16%;right:1%;animation-delay:-4.5s}
.motion-stage-caption {position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);width:max-content;color:#8eacd5;font-size:.56rem;font-weight:600;letter-spacing:.17em}
.motion-stage-caption span {display:inline-block;width:19px;height:1px;background:#3c79dd;margin:0 10px 3px}
/* Make transitions feel polished, while respecting content in the existing pages. */
.page-index .work-card .shot::before {content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(86,160,255,.13) 50%,transparent 70%);transform:translateX(-110%);transition:transform .75s ease}
.page-index .work-card:hover .shot::before {transform:translateX(110%)}
.page-index .work-card .shot {overflow:hidden}
.page-index .hero-kicker .kicker-dot {animation:motion-star 3.2s ease-in-out infinite}
@keyframes motion-ambient {from{transform:translate(0,0) scale(.94);opacity:.62}to{transform:translate(-45px,35px) scale(1.1);opacity:1}}
@keyframes motion-waves-drift {from{transform:translateY(-15px) scaleY(.98)}to{transform:translateY(18px) scaleY(1.03)}}
@keyframes motion-electric {from{stroke-dashoffset:0}to{stroke-dashoffset:-256}}
@keyframes motion-ring-rotate {from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes motion-ring-rotate-reverse {from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes motion-core-sweep {from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes motion-chip-bob {0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes motion-star {0%,100%{opacity:.52;box-shadow:0 0 9px rgba(65,157,255,.4)}50%{opacity:1;box-shadow:0 0 19px 4px rgba(65,157,255,.63)}}
@keyframes motion-entry {from{opacity:0;filter:blur(8px);transform:translateY(25px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@media (max-width:1150px) {
 .page-index .kinetic-hero h1 {font-size:clamp(3rem,4.9vw,4.8rem)}
 .page-index .kinetic-hero .hero-grid {gap:8px}
 .motion-float-tag {font-size:.57rem;padding:9px 12px}
}
@media (max-width:900px) {
 .page-index .kinetic-hero {min-height:0;padding:84px 0 83px}
 .page-index .kinetic-hero .hero-grid {grid-template-columns:1fr;gap:18px}
 .page-index .kinetic-hero h1 {font-size:clamp(3.35rem,7.4vw,5rem)}
 .page-index .motion-stage {width:min(100%,570px);height:475px;margin:5px auto 20px}
 .motion-ring-outer {width:min(91%,455px)}
 .motion-ring-middle {width:min(74%,370px)}
 .motion-ring-inner {width:min(61%,300px)}
 .motion-backdrop .motion-wavefield {opacity:.67}
}
@media (max-width:600px) {
 .page-index .kinetic-hero {padding:68px 0 66px}
 .page-index .kinetic-hero .hero-grid {gap:8px}
 .page-index .kinetic-hero h1 {font-size:clamp(2.9rem,10.5vw,4.2rem)}
 .page-index .kinetic-hero .hero-proof {margin-top:35px}
 .page-index .motion-stage {height:355px;width:min(100%,390px);margin:18px auto 12px}
 .motion-ring-outer {width:min(97%,360px)}
 .motion-ring-middle {width:min(78%,286px)}
 .motion-ring-inner {width:min(60%,220px)}
 .motion-core {width:215px;height:215px}
 .motion-core-kicker,.motion-core-foot {font-size:.42rem;letter-spacing:.12em}
 .motion-core-kicker {margin-bottom:10px}
 .motion-core-foot {margin-top:13px}
 .motion-core-words {font-size:2.18rem}
 .motion-core-words>span:nth-child(2) {font-size:1.82rem;margin:6px 0}
 .motion-float-tag {font-size:.47rem;padding:7px 8px;gap:5px;letter-spacing:.09em}
 .motion-tag-one {top:15%;left:-1%}.motion-tag-two {top:23%;right:-1%}.motion-tag-three {bottom:13%;right:1%}
 .motion-stage-caption {bottom:-7px;font-size:.44rem;letter-spacing:.09em}
 .motion-stage-caption span {width:9px;margin:0 5px 3px}
 .motion-background-grid {background-size:55px 55px}
 .motion-wavefield {opacity:.50}
}
@media (prefers-reduced-motion:reduce) {
 .motion-backdrop *, .motion-stage *, .motion-stage, .kinetic-hero .kicker-dot {animation:none!important;transition:none!important}
 .motion-wavefield .motion-traveler {display:none}
 .motion-stage {transform:none!important}
}