/* RSR IT motion: the brand's diagonal opens the scene; connections explain it. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-quick: 220ms;
}

.button .icon, .text-link .icon, .related a > .icon:last-child {
  transition: transform var(--motion-quick) var(--motion-ease);
}
.button:active { transform: translateY(1px); }
.button:is(:hover, :focus-visible) .icon { transform: translate(3px, -3px); }
.text-link:is(:hover, :focus-visible) .icon,
.related a:is(:hover, :focus-visible) > .icon:last-child { transform: translateX(5px); }
.main-nav a { position: relative; }
.main-nav a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 280ms var(--motion-ease);
}
.main-nav a:is(:hover, :focus-visible)::after { transform: scaleX(1); transform-origin: left; }
.run-flow { transition: transform 220ms var(--motion-ease), background 180ms; }
.run-flow:is(:hover, :focus-visible) { transform: scale(1.1); }
.run-flow:active { transform: scale(.95); }
.challenge-tabs button { transition: background 180ms, color 180ms, border-color 180ms; }
.faqs details[data-closing] summary .icon { transform: rotate(0); }
.review-hero h1 > span { display: block; }

@media (prefers-reduced-motion: no-preference) {
  /* All content is visible by default. Failed or disabled JS never hides it. */
  .site-header .brand-mark span {
    animation: brand-slash 750ms var(--motion-ease) both;
    transform-origin: bottom left;
  }
  .hero h1 > span { animation: headline-cut 850ms var(--motion-ease) both; }
  .hero h1 > span:nth-child(2) { animation-delay: 120ms; }
  .hero h1 > span:nth-child(3) { animation-delay: 240ms; }
  .hero-copy > p, .hero-actions, .hero-note { animation: settle 650ms var(--motion-ease) both; }
  .hero-copy > p { animation-delay: 300ms; }
  .hero-actions { animation-delay: 390ms; }
  .hero-note { animation-delay: 470ms; }
  .hero-copy:focus-within .hero-actions { animation: none; }

  /* The review follows the same headline rhythm and connection language. */
  .review-hero h1 > span { animation: headline-cut 850ms var(--motion-ease) both; }
  .review-hero h1 > span:nth-child(2) { animation-delay: 120ms; }
  .review-hero-copy > p, .review-actions { animation: settle 650ms var(--motion-ease) both; }
  .review-hero-copy > p { animation-delay: 300ms; }
  .review-actions { animation-delay: 390ms; }
  .review-hero-copy:focus-within .review-actions { animation: none; }
  .review-hero .service-art.motion-entered .big-service-icon path {
    stroke-dasharray: 100;
    animation: review-shield-draw 1100ms var(--motion-ease) both;
  }
  .review-hero .service-art.motion-entered .mini-core .icon {
    animation: agent-confirm 650ms var(--motion-ease) 650ms backwards;
  }
  .review-package.motion-entered { animation: settle 650ms var(--motion-ease) backwards; }
  .review-package:focus-within { animation: none; }
  @media (min-width: 641px) {
    .review-package.motion-entered:nth-child(2) { animation-delay: 120ms; }
  }

  .system-visual.motion-entered::before { animation: diagonal-in 1100ms var(--motion-ease) both; }
  .system-visual.motion-entered .core { animation: core-in 800ms var(--motion-ease) 120ms both; }
  .system-visual.motion-entered .map-node { animation: node-in 650ms var(--motion-ease) both; }
  .system-visual.motion-entered .n1 { animation-delay: 220ms; }
  .system-visual.motion-entered .n2 { animation-delay: 320ms; }
  .system-visual.motion-entered .n3 { animation-delay: 420ms; }
  .system-visual.motion-entered .n4 { animation-delay: 620ms; }
  .system-visual.motion-entered .n5 { animation-delay: 720ms; }
  .system-visual.motion-entered .n6 { animation-delay: 820ms; }
  .system-visual.motion-entered .connections > g:first-child path {
    stroke-dasharray: 600;
    animation: connect-in 1400ms var(--motion-ease) 300ms both;
  }
  .system-visual.motion-intro .beam { animation: travel 2300ms ease-in-out 650ms both; }
  .system-visual.motion-entered .flow-card { animation: settle 700ms var(--motion-ease) 550ms both; }
  .system-visual:focus-within .flow-card { animation: none; }
  .is-running .core .icon { animation: agent-confirm 650ms var(--motion-ease); }

  .service-illustration.motion-entered .mini-flow > i,
  .service-art.motion-entered .mini-flow > i { animation: line-in 650ms var(--motion-ease) both; transform-origin: left; }
  :is(.service-illustration, .service-art).motion-entered .mini-flow > i::after { animation: data-pass 1000ms var(--motion-ease) 200ms both; }
  :is(.service-illustration, .service-art).motion-entered .mini-flow > i:nth-of-type(2)::after { animation-delay: 700ms; }
  :is(.service-illustration, .service-art).motion-entered .mini-stack span { animation: stack-in 850ms var(--motion-ease) both; }
  :is(.service-illustration, .service-art).motion-entered .mini-stack span:nth-child(2) { animation-delay: 120ms; }
  :is(.service-illustration, .service-art).motion-entered .mini-stack span:nth-child(3) { animation-delay: 240ms; }
  :is(.service-illustration, .service-art).motion-entered .mini-bars i { animation: line-in 1000ms var(--motion-ease) both; transform-origin: left; }
  :is(.service-illustration, .service-art).motion-entered .mini-bars > div:nth-child(2) i { animation-delay: 130ms; }
  :is(.service-illustration, .service-art).motion-entered .mini-bars > div:nth-child(3) i { animation-delay: 260ms; }
  :is(.service-illustration, .service-art).motion-entered .mini-learning > span { animation: learning-in 850ms var(--motion-ease) both; }
  :is(.service-illustration, .service-art).motion-entered .mini-learning strong { animation: settle 650ms var(--motion-ease) both; }
  :is(.service-illustration, .service-art).motion-entered .mini-learning strong:nth-child(2) { animation-delay: 140ms; }
  :is(.service-illustration, .service-art).motion-entered .mini-learning strong:nth-child(3) { animation-delay: 280ms; }

  .method-grid article { position: relative; }
  .method-grid article::before {
    content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 2px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
  }
  .method-grid article.motion-entered::before { animation: method-line 1100ms var(--motion-ease) both; }
  @media (min-width: 641px) {
    .method-grid article.motion-entered:nth-child(2)::before { animation-delay: 220ms; }
    .method-grid article.motion-entered:nth-child(3)::before { animation-delay: 440ms; }
  }

  @media (hover: hover) and (pointer: fine) {
    .service-illustration { transition: transform 450ms var(--motion-ease); }
    .service-card:is(:hover, :focus-within) .service-illustration { transform: translateX(7px); }
    .review-package { transition: transform 450ms var(--motion-ease), border-color var(--motion-quick), box-shadow var(--motion-quick); }
    .review-package:is(:hover, :focus-within) { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 14px 28px #0001; }
  }
  @media (max-width: 640px) {
    .main-nav.is-open { animation: menu-open 300ms var(--motion-ease); transform-origin: top; }
    .main-nav.is-open a { animation: settle 350ms var(--motion-ease) both; }
    .main-nav.is-open a:nth-child(2) { animation-delay: 40ms; }
    .main-nav.is-open a:nth-child(3) { animation-delay: 80ms; }
    .main-nav.is-open a:nth-child(4) { animation-delay: 120ms; }
    .main-nav:focus-within a { animation: none; }
  }
}

@keyframes brand-slash { from { transform: skew(-28deg) scaleY(0); } to { transform: skew(-28deg) scaleY(1); } }
@keyframes headline-cut { from { clip-path: inset(0 0 100% 0); transform: translateY(28px); } to { clip-path: inset(-10% -2% -10% -2%); transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes diagonal-in { from { opacity: 0; transform: translate(45px, -70px); } to { opacity: 1; transform: none; } }
@keyframes core-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.82); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes node-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes connect-in { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
@keyframes agent-confirm { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.15); } }
@keyframes line-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes data-pass { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 70% { left: calc(100% - 5px); opacity: 1; } 85% { left: calc(100% - 5px); opacity: 0; } 86% { left: 40%; opacity: 0; } 100% { left: 40%; opacity: 1; } }
@keyframes stack-in { from { opacity: 0; transform: perspective(400px) rotateX(10deg) rotateZ(-5deg) translateY(24px); } to { opacity: 1; transform: perspective(400px) rotateX(10deg) rotateZ(-5deg); } }
@keyframes learning-in { from { opacity: 0; transform: rotate(-18deg) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes method-line { 0% { transform: scaleX(0); opacity: 1; } 65% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes menu-open { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes review-shield-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .button:active, .button .icon, .text-link .icon, .related a > .icon:last-child,
  .run-flow:is(:hover, :focus-visible, :active) { transform: none; }
}