/* TECH MEDIA — TYPOGRAPHY IN MOTION V4 / deliberate vertical choreography */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
/* The motion CSS only hides text after JS has completed the accessible line wrapping. */
.motion-ready .motion-mask{display:block;position:relative;overflow:hidden;max-width:100%;isolation:isolate;padding-block:.065em .075em;margin-block:-.065em -.075em;opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
.motion-ready .motion-mask>.motion-rail{display:block;position:relative;transform:translate3d(0,120%,0) rotate(2.3deg) scaleY(1.07);transform-origin:center bottom;opacity:0;transition:transform 1.18s var(--motion-ease),opacity .24s ease;transition-delay:var(--motion-delay,0ms);will-change:transform}
.motion-ready .motion-mask[data-direction='down']>.motion-rail{transform:translate3d(0,-125%,0) rotate(-2.3deg) scaleY(1.07);transform-origin:center top}
.motion-ready .motion-mask.is-visible>.motion-rail,
.motion-ready .motion-heading.is-visible .motion-mask>.motion-rail{transform:translate3d(0,0,0) rotate(0deg) scaleY(1);opacity:1}
.motion-ready .motion-heading{opacity:1!important;transform:none!important;filter:none!important;overflow:visible!important;max-width:100%;}
.motion-ready .motion-heading .motion-mask{line-height:inherit}
.motion-ready .motion-heading .motion-rail{line-height:inherit;max-width:100%;}
.motion-ready .hero-title .motion-mask .motion-rail,
.motion-ready .manifesto-text .motion-mask .motion-rail{width:max-content;white-space:nowrap;max-width:none}
.motion-ready .hero-title .motion-mask{min-height:1.02em}
.motion-ready .hero-title .hero-secondary.motion-mask{min-height:1.10em}
.motion-ready .manifesto-text .motion-mask{min-height:1.06em;margin-block:0 3px;padding-block:.045em .065em}
.motion-ready .manifesto-text .motion-mask .motion-rail{line-height:1.04}
/* Hero entrance has more visual impact; the opposite directional entries form a rhythmic stack. */
.motion-ready .hero-title .motion-mask>.motion-rail{transition-duration:1.42s;transition-timing-function:cubic-bezier(.18,.92,.18,1)}
.motion-ready .hero-title .motion-mask[data-direction='down']>.motion-rail{transition-duration:1.6s}
.motion-ready .manifesto-text .motion-mask>.motion-rail{transition-duration:1.4s;transition-timing-function:cubic-bezier(.14,.95,.24,1)}
/* Cut-line reveal adds a precise technical accent without overlapping typography. */
.motion-ready .motion-display:after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:linear-gradient(90deg,rgba(9,39,219,.4),transparent);opacity:0;transition:width 1.12s var(--motion-ease),opacity .6s;transition-delay:calc(var(--motion-delay,0ms) + 130ms);pointer-events:none}
.motion-ready .motion-heading.is-visible .motion-display:after{width:40%;opacity:1}
/* Meta labels enter as discrete kinetic data tags. */
.motion-ready .section-meta.reveal{overflow:hidden}
.motion-ready .section-meta.reveal span:first-child{display:inline-block;transition:transform .88s var(--motion-ease);transform:translate3d(0,110%,0)}
.motion-ready .section-meta.reveal span:last-child{display:inline-block;transition:transform 1.02s var(--motion-ease);transform:translate3d(0,-115%,0)}
.motion-ready .section-meta.reveal.visible span{transform:translate3d(0,0,0)}
/* Copy supports staggered entrance, but is stationary while read. */
.motion-ready .hero-copy .eyebrow.reveal{transition-delay:80ms}
.motion-ready .hero-desc.reveal{transition-delay:680ms}
.motion-ready .hero-actions.reveal{transition-delay:880ms}
.motion-ready .hero-topline.reveal{transition-delay:70ms}
.motion-ready .about-right .statement.reveal{transition-delay:190ms}
.motion-ready .about-right .body-copy.reveal:nth-of-type(2){transition-delay:270ms}
.motion-ready .about-right .body-copy.reveal:nth-of-type(3){transition-delay:390ms}
/* Scroll-linked 8px drift: subtle kinetic feel, not a reading challenge. */
@media(min-width:920px){.motion-ready .motion-heading.is-visible{translate:0 var(--scroll-nudge,0px)}}
/* Text ribbon continues to move; pause while hovering for readability. */
.marquee-track{animation-duration:28s}
.marquee:hover .marquee-track{animation-play-state:paused}
/* Gentle tracking underline on call-to-actions. */
.nav-cta,.button-primary,.button-outline{position:relative;overflow:hidden}
.nav-cta::before,.button-primary::before,.button-outline::before{content:"";position:absolute;inset:0;transform:translateX(-115%);background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.24) 48%,transparent 100%);transition:transform .7s ease;pointer-events:none}
.nav-cta:hover::before,.button-primary:hover::before,.button-outline:hover::before{transform:translateX(115%)}
/* Hero typography retains fixed solid color and the font fitting from V3. */
.hero-title .line,.manifesto-text .motion-mask{overflow:hidden!important}
/* Stacked type needs good character spacing; never negative values. */
.motion-ready .motion-feature .motion-rail{letter-spacing:inherit;}
@media(max-width:700px){
  .motion-ready .hero-title .motion-mask>.motion-rail{transition-duration:1.05s}
  .motion-ready .manifesto-text .motion-mask>.motion-rail{transition-duration:1.05s}
  .motion-ready .motion-mask>.motion-rail{transition-duration:.97s}
  .motion-ready .section-meta.reveal span:last-child{transition-duration:.83s}
}
@media(prefers-reduced-motion:reduce){
  .motion-ready .motion-mask>.motion-rail,.motion-ready .motion-mask[data-direction='down']>.motion-rail{transform:none!important;opacity:1!important;transition:none!important}
  .motion-ready .motion-heading{translate:none!important}
  .motion-ready .section-meta.reveal span{transform:none!important;transition:none!important}
  .motion-ready .motion-display:after{display:none!important}
}

/* Maintain source heading two-tone colors after DOM line wrappers. */
.motion-ready .display-heading > .motion-mask,
.motion-ready .display-heading > .motion-mask > .motion-rail{color:var(--blue)}
.motion-ready .display-heading > .motion-mask > .motion-rail > span{color:var(--ink)}
.motion-ready .contact .display-heading .contact-period{color:var(--blue)}

/* Rotating editorial footer in the hero: small, persistent directional typography. */
.hero-message-cycle{display:flex;align-items:center;gap:18px;white-space:nowrap}
.hero-cycle-kicker{font-size:9px;letter-spacing:1.5px;color:#8595bd}
.hero-cycle-window{position:relative;display:block;height:20px;line-height:20px;overflow:hidden;min-width:220px}
.hero-cycle-list{display:flex;flex-direction:column;animation:tech-verb-cycle 9.5s cubic-bezier(.65,0,.23,1) infinite;will-change:transform}
.hero-cycle-list > span{height:20px;line-height:20px;flex:none;font-size:10px;font-weight:800;letter-spacing:1.1px}
@keyframes tech-verb-cycle{
  0%,18%{transform:translateY(0)}
  25%,43%{transform:translateY(-20px)}
  50%,68%{transform:translateY(-40px)}
  75%,93%{transform:translateY(-60px)}
  100%{transform:translateY(-60px)}
}
@media(max-width:1150px){.hero-cycle-kicker{display:none}}
@media(max-width:700px){.hero-message-cycle{display:none}}
@media(prefers-reduced-motion:reduce){.hero-cycle-list{animation:none!important}}