/* ================================================================
   V5 LAYER — "In Motion" ported from the Rool reference build,
   recoloured to the site's pine / bone / honey-gold system.
   Same animation system (class-driven keyframes), new palette.
   All keyframe names are im_-prefixed → zero collision with
   main.css / v4.css keyframes.
   ================================================================ */

/* ---------- HERO: flowing MSK lines (recoloured to palette) ---------- */
.hero .hero-flow{position:absolute;inset:0;z-index:0;width:100%;height:100%;opacity:.55;pointer-events:none;overflow:visible}
.hero .hero-flow path{fill:none;stroke-dasharray:7 11;animation:im_flow 11s linear infinite}
.hero .hero-flow .fg-a path{stroke:rgba(217,180,120,.38);stroke-width:1.1}
.hero .hero-flow .fg-b path{stroke:rgba(185,135,62,.32);stroke-width:1}
.hero .hero-flow .fg-c path{stroke:rgba(14,42,36,.10);stroke-width:1.4;stroke-dasharray:2 9}
.hero .hero-flow .fg-b{opacity:.8;animation:im_driftb 22s ease-in-out infinite alternate}
.hero .hero-flow .fg-c{opacity:.7;animation:im_driftc 28s ease-in-out infinite alternate}
.hero .hero-in{z-index:1}
@keyframes im_flow{to{stroke-dashoffset:-360}}
@keyframes im_driftb{from{transform:translateX(0)}to{transform:translateX(-46px)}}
@keyframes im_driftc{from{transform:translateX(0)}to{transform:translateX(58px)}}

/* ---------- SCROLL PROGRESS HAIRLINE (header) ---------- */
.scroll-prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--gold-2),var(--gold-3));z-index:61;pointer-events:none}

/* ---------- V5: IN MOTION (ported from reference, recoloured) ---------- */
.imotion{position:relative;background:linear-gradient(160deg,#081B15 0%,var(--pine-2) 55%,#0F2E26 100%);color:var(--bone);overflow:hidden}
.imotion .im-head{max-width:var(--maxw);margin:0 auto;padding-inline:22px}
.imotion .v4-eyebrow{color:var(--gold-2)}
.imotion .v4-eyebrow::before{background:var(--gold-2)}
.imotion h2{color:#fff;font-family:var(--ff-d);font-weight:600;font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.12;letter-spacing:-.01em;margin-top:18px}
.imotion .im-lede{margin-top:14px;color:rgba(243,239,229,.7);max-width:56ch;font-size:clamp(1rem,1.5vw,1.15rem)}
.im-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:var(--maxw);margin:56px auto 0;padding-inline:22px}
.im-grid>*{min-width:0}
.im-pane{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.14);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:transform .4s var(--e),box-shadow .4s,border-color .4s}
.im-pane:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.45);border-color:rgba(217,180,120,.4)}
.im-pane svg{display:block;width:100%;height:auto;background:#0A1E19}
.im-pane .pv{padding:22px 24px 26px;border-top:1px solid rgba(255,255,255,.12);margin-top:auto}
.im-pane .pv .tag{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);display:flex;align-items:center;gap:8px}
.im-pane .pv .tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-2)}
.im-pane .pv h3{font-size:1.18rem;margin:10px 0 8px;color:#fff;font-family:var(--ff-d);font-weight:600}
.im-pane .pv p{margin:0;font-size:.88rem;line-height:1.55;color:rgba(243,239,229,.72)}
@media(max-width:980px){.im-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* --- panel SVG stroke/fill system (recoloured: mint→honey, ivory→bone) --- */
.im-pane svg .str{fill:none;stroke:var(--gold-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.im-pane svg .iv{fill:none;stroke:var(--bone);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.im-pane svg .gd{fill:var(--gold-2)}
.im-pane svg .fade-w{animation:im_waveout 2.6s ease-out infinite}
@keyframes im_waveout{0%{opacity:.9}70%{opacity:.25}100%{opacity:0}}
.im-pane svg .sweep{animation:im_sweep 5s ease-in-out infinite alternate}
@keyframes im_sweep{from{transform:translateX(0)}to{transform:translateX(150px)}}
.im-pane svg .probe{animation:im_probe 6s ease-in-out infinite alternate;transform-origin:60px 40px}
@keyframes im_probe{from{transform:rotate(-6deg)}to{transform:rotate(7deg)}}
.im-pane svg .kneeflex{animation:im_kneeflex 7s ease-in-out infinite alternate;transform-origin:150px 122px}
@keyframes im_kneeflex{from{transform:rotate(-9deg)}to{transform:rotate(8deg)}}
.im-pane svg .needle{animation:im_inject 4.5s ease-in-out infinite;transform-origin:250px 20px}
@keyframes im_inject{0%,100%{transform:translate(0,0)}45%{transform:translate(-9px,14px)}55%{transform:translate(-9px,14px)}}
.im-pane svg .ripple{transform-origin:center;animation:im_rip 3s ease-out infinite}
@keyframes im_rip{from{transform:scale(.4);opacity:.9}to{transform:scale(1.6);opacity:0}}
.im-pane svg .arc-motion{stroke-dasharray:3 6;animation:im_dash 2.2s linear infinite}
.im-pane svg .tw{animation:im_tw 3.2s ease-in-out infinite}
@keyframes im_tw{0%,100%{opacity:.35}50%{opacity:.65}}
.im-pane svg .trace{stroke-dasharray:220;stroke-dashoffset:220;animation:im_trace 3.4s linear infinite}
@keyframes im_trace{to{stroke-dashoffset:-220}}
.im-pane svg .dg{animation:im_dg 5.5s ease-in-out infinite}
@keyframes im_dg{0%,100%{transform:translateY(0)}50%{transform:translateY(44px)}}
.im-pane svg .led{animation:im_led 1.6s ease-in-out infinite}
@keyframes im_led{0%,100%{opacity:1}50%{opacity:.25}}
.im-pane svg .cable{stroke:var(--gold-2);stroke-width:1.4;fill:none;stroke-dasharray:4 6;animation:im_dash 3s linear infinite}
@keyframes im_dash{to{stroke-dashoffset:-18}}

/* ---------- V5: focus/conditions cards — top precision bar on hover ---------- */
.exp li::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold-2),var(--gold-3));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--e);z-index:2}
.exp li:hover::after{transform:scaleX(1)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .hero .hero-flow path,
  .hero .hero-flow .fg-b, .hero .hero-flow .fg-c,
  .im-pane svg .fade-w,.im-pane svg .sweep,.im-pane svg .probe,.im-pane svg .kneeflex,
  .im-pane svg .needle,.im-pane svg .ripple,.im-pane svg .arc-motion,.im-pane svg .tw,
  .im-pane svg .trace,.im-pane svg .dg,.im-pane svg .led,.im-pane svg .cable{animation:none}
  .im-pane:hover{transform:none}
}