/* Finite, content-specific motion. The unenhanced state is a complete diagram. */
.story-motion {
  position: relative;
  isolation: isolate;
  margin: 32px 0 36px;
  color: #a8c7df;
  border: 1px solid #8bbdec28;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 70%, #153c5c55, transparent 72%), #071321;
  overflow: hidden;
  contain: layout paint;
}
.story-motion::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-top: 1px solid #c5e5ff30;
  pointer-events: none;
}
.story-motion-diagram { display: block; width: 100%; height: auto; padding: 15px 12px 0; overflow: visible; }
.story-motion .motion-glass { fill: #17324a; stroke: #8fb6d3; }
.story-motion .motion-paper { fill: #11283c; stroke: #b1d0e5; }
.story-motion .motion-line { stroke: #8dafc9; }
.story-motion .motion-accent { fill: #1174bf; stroke: #75d6ff; }
.story-motion .motion-check { fill: none; stroke: #8be0ff; stroke-width: 2.5; stroke-dasharray: 50; stroke-dashoffset: 0; transition: stroke-dashoffset .65s ease; }
.story-motion .motion-muted { opacity: .42; }
.story-motion .motion-review { stroke: #e9b454; fill: #584020; }
.story-motion path.motion-accent:not(.motion-fill):not(.motion-glass),
.story-motion path.motion-check, .story-motion path.motion-review:not(.motion-glass) { fill: none; }
.story-motion .motion-wire { fill: none; stroke: #649ec8; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.story-motion .motion-beat {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .55s ease, transform .75s cubic-bezier(.2,.75,.2,1), stroke-dashoffset .8s ease;
}
.story-motion.is-complete .motion-beat, .story-motion.is-complete .motion-check { transition: none; }
.story-motion.is-playing[data-motion-step="0"] .motion-beat,
.story-motion.is-playing[data-motion-step="1"] :is(.motion-beat-2,.motion-beat-3,.motion-beat-4),
.story-motion.is-playing[data-motion-step="2"] :is(.motion-beat-3,.motion-beat-4),
.story-motion.is-playing[data-motion-step="3"] .motion-beat-4 {
  opacity: .12;
  transform: translateY(7px) scale(.96);
}
.story-motion.is-playing[data-motion-step="0"] .motion-beat { transition: none; }
.story-motion.is-playing[data-motion-step="0"] .motion-wire,
.story-motion.is-playing[data-motion-step="1"] :is(.motion-wire.motion-beat-2,.motion-wire.motion-beat-3,.motion-wire.motion-beat-4),
.story-motion.is-playing[data-motion-step="2"] :is(.motion-wire.motion-beat-3,.motion-wire.motion-beat-4),
.story-motion.is-playing[data-motion-step="3"] .motion-wire.motion-beat-4 {
  opacity: 0;
  transform: none;
  stroke-dashoffset: 1;
}
.story-motion.is-playing[data-motion-step="0"] .motion-check,
.story-motion.is-playing[data-motion-step="1"] :is(.motion-beat-2,.motion-beat-3,.motion-beat-4) .motion-check,
.story-motion.is-playing[data-motion-step="2"] :is(.motion-beat-3,.motion-beat-4) .motion-check,
.story-motion.is-playing[data-motion-step="3"] .motion-beat-4 .motion-check { stroke-dashoffset: 50; }
.story-motion.is-playing .motion-scan { animation: story-scan 1s ease-in-out 80ms 1 both; }
.story-motion.is-playing .motion-beat-2 .motion-scan { animation-delay: 1.1s; }
.story-motion.is-playing .motion-truck { animation: story-delivery 1s cubic-bezier(.16,.8,.26,1) 2.15s 1 both; }
.story-motion.is-playing .motion-result { animation: story-result .8s ease 3.3s 1 both; }
.story-motion.is-playing .motion-beat-3 .motion-result { animation-delay: 2.2s; }
.story-motion.is-playing .motion-beat-2 .motion-result { animation-delay: 1.1s; }
.story-motion.is-playing .motion-beat-4 .motion-truck { animation-delay: 3.3s; }
.story-motion .motion-signal { fill: #aeebff; stroke: #aeebff; opacity: 0; }
.story-motion .motion-shutter { transform-box: fill-box; transform-origin: center top; transform: scaleY(.04); }
.story-motion.is-playing .motion-signal { animation: story-signal .85s ease-in-out 1.1s 1 both; }
.story-motion.is-playing .motion-signal.motion-beat-3 { animation-delay: 2.2s; }
.story-motion.is-playing .motion-signal.motion-beat-4 { animation-delay: 3.3s; }
.story-motion.is-playing .motion-offer-paper { animation: story-paper .8s ease 80ms 1 both; }
.story-motion.is-playing .motion-selected { animation: story-selected 1.1s ease 80ms 1 both; }
.story-motion.is-playing .motion-faq-answer { transform-box: fill-box; transform-origin: center top; animation: story-answer .7s ease 1.1s 1 both; }
.story-motion.is-playing .motion-submit { animation: story-selected .7s ease 2.4s 1 both; }
.story-motion.is-playing .motion-shutter { animation: story-shutter .9s cubic-bezier(.22,.7,.2,1) 3.3s 1 both; }
@keyframes story-signal { 0% { opacity: 0; transform: translateX(0); } 20%,70% { opacity: 1; } 100% { opacity: 0; transform: translateX(40px); } }
@keyframes story-paper { from { transform: translateY(7px); } to { transform: translateY(0); } }
@keyframes story-selected { 0% { opacity: .4; } 45% { opacity: 1; } 70% { opacity: .65; } 100% { opacity: 1; } }
@keyframes story-answer { from { opacity: .2; transform: scaleY(.7); } to { opacity: 1; transform: scaleY(1); } }
@keyframes story-shutter { from { transform: scaleY(1); } to { transform: scaleY(.04); } }
@keyframes story-scan { 0% { transform: translateY(-30px); opacity: 0; } 25%,75% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }
@keyframes story-delivery { from { transform: translateX(-16px); } to { transform: translateX(0); } }
@keyframes story-result { from { opacity: .2; } to { opacity: 1; } }
.story-motion > figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 0 20px 8px;
  font-size: 11px;
  line-height: 1.5;
  color: #91abc3;
}
[data-motion-replay] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 9px;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #d2e8fa;
  font: inherit;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
[data-motion-replay][hidden] { display: none; }
[data-motion-replay] svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
[data-motion-replay]:hover, [data-motion-replay]:focus-visible { background: #acd5ff12; color: #fff; }
[data-motion-replay][aria-disabled="true"] { cursor: default; color: #7995ad; }
[data-motion-replay]:focus-visible { outline: 2px solid #75cfff; outline-offset: 2px; }
.motion-compact { margin: 0; border: 0; border-radius: 0; border-top: 1px solid #9bcdff24; pointer-events: none; }
.motion-compact::before { display: none; }
.motion-compact .story-motion-diagram { height: clamp(66px, 8vw, 108px); padding: 3px 6px; }
.story-image { background: #071321; }
.story-image > img { display: block; }
.story-image .motion-compact { transition: background .35s ease; }
.story-card:hover .motion-compact, .story-card:focus-within .motion-compact { background-color: #0b1c2d; }
.motion-reveal-ready { transition: opacity .7s ease, transform .8s cubic-bezier(.2,.75,.2,1); }
.motion-reveal-ready:not(.is-arrived) { opacity: 0; transform: translateY(16px); }
.motion-reveal-ready:focus-within { opacity: 1; transform: none; transition: none; }
.service-row, .guide-row { position: relative; }
.service-row::after, .guide-row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #46b5ff, #b5eaff99 38%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform .65s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
  pointer-events: none;
}
.service-row:is(:hover,:focus-within)::after, .guide-row:is(:hover,:focus-within)::after { transform: scaleX(1); opacity: .8; }
.story-copy .sx-text-link .icon, .service-row .sx-text-link .icon, .guide-row .sx-text-link .icon { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.story-card:is(:hover,:focus-within) .sx-text-link .icon, .service-row:is(:hover,:focus-within) .sx-text-link .icon, .guide-row:is(:hover,:focus-within) .sx-text-link .icon { transform: translateX(4px); }
@media(max-width: 700px) {
  .story-motion { margin-block: 24px 28px; border-radius: 10px; }
  .story-motion-diagram { padding: 12px 0 2px; }
  .story-motion > figcaption { padding: 2px 8px 6px 12px; gap: 6px; font-size: 10px; }
  [data-motion-replay] { gap: 6px; padding-inline: 7px; }
  .motion-compact { margin: 0; border-radius: 0; }
  .motion-compact .story-motion-diagram { height: 78px; padding: 0 5px; }
}
@media(prefers-reduced-motion: reduce) {
  .story-motion *, .motion-reveal-ready, .story-copy .sx-text-link .icon,
  .service-row::after, .guide-row::after, .service-row .sx-text-link .icon,
  .guide-row .sx-text-link .icon { animation: none !important; transition: none !important; }
  .motion-reveal-ready:not(.is-arrived) { opacity: 1; transform: none; }
}