/* Motion is progressive: every element remains visible without JavaScript. */
.hero-trace { translate: 0 var(--hero-parallax-y, 0px); will-change: translate; }
.route-watermark,
.solution-watermark,
.main-photo,
.small-photo,
.history-collage,
.university-photo,
.gallery-grid figure,
.contents-card-image,
.quote-portrait,
.careers-banner-art { translate: 0 var(--parallax-layer-y, 0px); will-change: translate; }
.route-at-top .route-grid:not(:focus-within) { opacity: 0; pointer-events: none; }
.motion-enabled .route-grid { transition: opacity 260ms ease; }

  .motion-enabled .motion-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 500ms ease, transform 580ms cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--motion-delay, 0ms);
  }
  .motion-enabled .motion-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  .motion-enabled .main-photo.motion-reveal { transform: translate3d(-14px, 12px, 0); }
  .motion-enabled .small-photo.motion-reveal { transform: translate3d(14px, 12px, 0); }
  .motion-enabled .main-photo.motion-reveal.is-visible,
  .motion-enabled .small-photo.motion-reveal.is-visible { transform: translate3d(0, 0, 0); }

  .motion-enabled .desktop-nav { animation: motion-arrive 560ms both; }
  .motion-enabled .desktop-nav { animation-delay: 90ms; }
  .motion-enabled .brand-logo :is(.logo-initial, .logo-letter, .logo-dot) {
    opacity: 0;
    animation: logo-glyph-enter 460ms cubic-bezier(.2,.7,.2,1) var(--logo-delay, 0ms) both;
    transform-box: fill-box;
    transform-origin: center bottom;
  }
  .motion-enabled .brand-logo .logo-dot {
    transform-origin: left bottom;
    animation: logo-dot-draw 2100ms 650ms ease-in-out both;
  }
  .motion-enabled .footer-brand.motion-reveal.is-visible .footer-brand-logo :is(.logo-initial, .logo-letter, .logo-dot) {
    opacity: 0;
    animation: logo-glyph-enter 460ms cubic-bezier(.2,.7,.2,1) var(--logo-delay, 0ms) both;
    transform-box: fill-box;
    transform-origin: center bottom;
  }
  .motion-enabled .footer-brand.motion-reveal.is-visible .footer-brand-logo .logo-dot {
    transform-origin: left bottom;
    animation: logo-dot-draw 2100ms 650ms ease-in-out both;
  }
  .motion-enabled .hero-eyebrow,
  .motion-enabled .hero h1,
  .motion-enabled .hero p,
  .motion-enabled .hero-actions { animation: motion-arrive 600ms both; }
  .motion-enabled .hero-eyebrow { animation-delay: 120ms; }
  .motion-enabled .hero h1 { animation-delay: 210ms; }
  .motion-enabled .hero p { animation-delay: 320ms; }
  .motion-enabled .hero-actions { animation-delay: 430ms; }
  .motion-enabled .hero-ceo {
    animation: ceo-enter 820ms 520ms cubic-bezier(.2,.7,.2,1) both;
    transform-origin: right bottom;
  }
  .motion-enabled .hero h1 em::after { animation: motion-draw 680ms 640ms both; transform-origin: left; }
  .motion-enabled .ring-one { animation: motion-ring 18s ease-in-out infinite; }
  .motion-enabled .ring-two { animation: motion-ring 21s ease-in-out -7s infinite; }
  .motion-enabled .ring-three { animation: motion-ring 24s ease-in-out -13s infinite; }
  .motion-enabled .trace-node { animation: motion-node 5.5s ease-in-out infinite; }
  .motion-enabled .node-two { animation-delay: -2.75s; }

  .motion-enabled .solutions .solution-rail i { transform: scaleY(0); transform-origin: top; transition: transform 850ms ease; }
  .motion-enabled .solutions.is-visible .solution-rail i { transform: scaleY(1); }
  .motion-enabled .institutional-history .history-year span { transform: scaleX(0); transform-origin: left; transition: transform 750ms 260ms ease; }
  .motion-enabled .institutional-history.is-visible .history-year span { transform: scaleX(1); }
  .motion-enabled .history-year { font-variant-numeric: tabular-nums; transition: color 350ms ease; }
  .motion-enabled .history-year.is-current-year { color: #126CB3; }
  .motion-enabled .history-year span::before { left: var(--history-dot-position, 0%); }
  .route-card,
  .solution-item,
  .button,
  .route-line,
  .route-icon,
  .solution-arrow,
  .connections-area > a span,
  .store-card a span,
  .stores-secondary span { transition: transform 190ms ease, box-shadow 190ms ease, background-color 190ms ease; }
  .route-card:hover,
  .route-card:focus-visible { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(11,45,69,.13); }
  .motion-enabled .route-card.motion-reveal.is-visible:hover,
  .motion-enabled .route-card.motion-reveal.is-visible:focus-visible { transform: translateY(-5px); }
  .route-card:hover .route-line,
  .route-card:focus-visible .route-line { transform: scaleX(1.28); transform-origin: left; }
  .solution-item::before { transform-origin: left; transition: transform 190ms ease; }
  .solution-item:hover::before,
  .solution-item:focus-visible::before { transform: scaleX(1.28); }
  .route-card:hover .route-icon,
  .route-card:focus-visible .route-icon,
  .solution-item:hover .solution-arrow,
  .solution-item:focus-visible .solution-arrow,
  .connections-area > a:hover span,
  .connections-area > a:focus-visible span,
  .store-card a:hover span,
  .store-card a:focus-visible span,
  .stores-secondary:hover span,
  .stores-secondary:focus-visible span { transform: translate(3px, -3px); }
  .solution-item:hover,
  .solution-item:focus-visible { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(11,45,69,.10); }
  .button:hover,
  .button:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(6,42,69,.18); }
  .motion-enabled .final-inner > .button.motion-reveal.is-visible:hover,
  .motion-enabled .final-inner > .button.motion-reveal.is-visible:focus-visible { transform: translateY(-3px); }
  @media (max-width: 1000px) {
    .desktop-nav.is-open { animation: motion-menu 190ms ease both; transform-origin: top; }
  }
  @media (max-width: 700px) {
    .motion-enabled .motion-reveal { transform: translate3d(0, 10px, 0); transition-duration: 420ms; }
    .motion-enabled .motion-reveal.is-visible { transform: translate3d(0, 0, 0); }
    .motion-enabled .main-photo.motion-reveal,
    .motion-enabled .small-photo.motion-reveal { transform: translate3d(0, 10px, 0); }
    .motion-enabled .main-photo.motion-reveal.is-visible,
    .motion-enabled .small-photo.motion-reveal.is-visible { transform: translate3d(0, 0, 0); }
    .motion-enabled .ring-one,
    .motion-enabled .ring-three { animation: none; }
    .motion-enabled .trace-node { animation-duration: 7s; }
  }

@keyframes motion-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes logo-glyph-enter {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes logo-dot-draw {
  0%, 12% { opacity: 0; transform: none; }
  16%, 24% { opacity: 1; transform: none; }
  40% { opacity: 1; transform: translateY(65%) scaleX(1) scaleY(.16); }
  56%, 64% { opacity: 1; transform: translateY(65%) scaleX(24) scaleY(.16); }
  80% { opacity: 1; transform: translateY(65%) scaleX(1) scaleY(.16); }
  96%, 100% { opacity: 1; transform: none; }
}
@keyframes ceo-enter {
  from { opacity: 0; transform: translate3d(32px, 24px, 0) scale(.95); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes motion-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes motion-ring {
  0%, 100% { opacity: .65; transform: translateX(-50%) scale(.985); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.025); }
}
@keyframes motion-node {
  0%, 100% { opacity: .7; transform: translate3d(0, 0, 0) scale(1); }
  50% { opacity: 1; transform: translate3d(8px, -8px, 0) scale(1.25); }
}
@keyframes motion-menu {
  from { opacity: 0; transform: scaleY(.96); }
  to { opacity: 1; transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-preview) .motion-reveal,
  html:not(.motion-preview) .motion-reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  html:not(.motion-preview) .hero *,
  html:not(.motion-preview) .site-header *,
  html:not(.motion-preview) .footer-brand-logo *,
  html:not(.motion-preview) .desktop-nav.is-open { animation: none !important; }
  html:not(.motion-preview) :is(.route-card,.solution-item,.button,.route-line,.route-icon,.solution-arrow,.connections-area > a span,.store-card a span,.stores-secondary span) { transition: none !important; }
}
/* A single red marker travels the already animated solution rail. */
.motion-enabled .solutions .solution-rail i{position:relative}
.motion-enabled .solutions .solution-rail i::after{content:"";position:absolute;left:50%;top:0;width:8px;height:8px;border:2px solid #fff;border-radius:50%;background:var(--red);box-shadow:0 0 0 1px var(--red);opacity:0;transform:translate(-50%,0)}
.motion-enabled .solutions.is-visible .solution-rail i::after{animation:solution-rail-travel 1.25s 850ms ease-in-out both}
@keyframes solution-rail-travel{0%{top:0;opacity:0}8%{opacity:1}90%{opacity:1}100%{top:calc(100% - 8px);opacity:0}}
@media(prefers-reduced-motion:reduce){.motion-enabled .solutions .solution-rail i::after{animation:none!important;opacity:0}}
/* Make the rail motion visible as a subtle loop while the section is on screen. */
.motion-enabled .solutions .solution-rail i::after{width:10px;height:10px;box-shadow:0 0 0 2px #fff,0 0 10px rgba(225,53,47,.45)}
.motion-enabled .solutions.is-visible .solution-rail i::after{animation:solution-rail-travel 2.2s .25s ease-in-out infinite}
@keyframes solution-rail-travel{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:calc(100% - 10px);opacity:0}}