/* Short gestures and direct feedback; only the journey ribbon loops continuously. */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-shift: cubic-bezier(.65, 0, .25, 1);
}

.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 0;
  background: transparent;
  color: #cbd2bc;
  border: 0;
  font: inherit;
  white-space: nowrap;
}
.motion-toggle::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--acid); }
.motion-toggle[aria-pressed="true"]::before { background: #8b947d; }
.motion-toggle[hidden] { display: none; }
.motion-toggle:disabled { cursor: default; }
.motion-toggle:hover:not(:disabled) { color: var(--acid); }
.reset-demo .reset-icon { display: inline-block; font-size: 22px; line-height: 1; }

/* Content stays visible unless the motion controller is running. */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 23px, 0);
  transition: opacity 700ms var(--ease-out), transform 850ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready [data-reveal].is-visible,
.motion-ready [data-reveal]:focus-within {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.motion-ready .hero-visual[data-reveal] { transform: translate3d(0, 25px, 0) scale(.985); }
.motion-ready .hero-visual.is-visible { transform: translate3d(0, 0, 0) scale(1); }

/* Buttons react in place; their clickable areas do not follow the pointer. */
.motion-ready .button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 420ms var(--ease-out), background-color 350ms ease,
    box-shadow 420ms var(--ease-out), border-color 350ms ease;
}
.motion-ready .button::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, #d5fa4224 48%, transparent 76%);
  transform: translateX(-130%);
  transition: transform 650ms var(--ease-out);
}
.motion-ready .button > span,
.motion-ready .text-link > span,
.motion-ready .footer-bottom a > span {
  display: inline-block;
  transition: transform 420ms var(--ease-out);
}
.motion-ready .button:focus-visible,
.motion-ready .button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px #20211f1c;
}
.motion-ready .button:is(:hover, :focus-visible)::before { transform: translateX(130%); }
.motion-ready .button:is(:hover, :focus-visible) > span { transform: translate(3px, -3px); }
.motion-ready .demo-next:is(:hover, :focus-visible) > span { transform: translateX(5px); }
.motion-ready .button:active { transform: translateY(0) scale(.975); box-shadow: 0 2px 5px #20211f16; }
.motion-ready .text-link:is(:hover, :focus-visible) > span { transform: translateY(4px); }
.motion-ready .footer-bottom a:is(:hover, :focus-visible) > span { transform: translate(2px, -3px); }
.motion-ready .followup-demo,
.motion-ready .reset-demo,
.motion-ready .menu-toggle {
  transition: transform 320ms var(--ease-out), background-color 300ms ease, color 300ms ease;
}
.motion-ready .followup-demo:is(:hover, :focus-visible) { transform: translateX(3px); }
.motion-ready :is(.followup-demo, .reset-demo, .demo-tab, .menu-toggle):active { transform: scale(.97); }
.motion-ready .reset-icon { transition: transform 650ms var(--ease-out); }
.motion-ready .reset-demo:is(:hover, :focus-visible) .reset-icon { transform: rotate(-65deg); }
.motion-ready .wordmark > img,
.motion-ready .demo-brand > img,
.motion-ready .footer-wordmark > img { transition: transform 500ms var(--ease-out), opacity 400ms ease; }
.motion-ready :is(.wordmark, .demo-brand, .footer-wordmark):is(:hover, :focus-visible) > img { transform: translateY(-2px); opacity: .82; }
.motion-ready .desktop-nav a::after { transition: right 450ms var(--ease-out); }
.motion-ready .desktop-nav a:focus-visible::after { right: 0; }

/* The photograph has a small, pointer-driven drift only on precision devices. */
.motion-ready .image-frame img {
  transform: translate3d(var(--photo-x, 0px), var(--photo-y, 0px), 0) scale(1.035);
  transition: transform 1100ms var(--ease-out);
}
.motion-ready .hero-visual.is-visible .floating-update { animation: card-settle 4200ms var(--ease-out) 650ms 1 both; }
.motion-ready .hero-visual.is-visible .photo-caption .status-dot { animation: signal-pulse 1600ms ease-in-out 700ms 2; }
.motion-ready .floating-update { transition: box-shadow 500ms var(--ease-out); }

/* The trace draws once when its section enters view. */
.motion-ready :is(.underlined, .hand-line, .closing-line) path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.motion-ready .is-visible .underlined path { animation: draw-trace 1050ms var(--ease-out) 250ms forwards; }
.motion-ready .is-visible .hand-line path,
.motion-ready .closing-section.is-visible .closing-line path { animation: draw-trace 1500ms var(--ease-out) 150ms forwards; }
.motion-ready .journey-strip.is-visible i { animation: route-step 550ms var(--ease-out) both; animation-delay: var(--route-delay, 0ms); }

/* Feature icons and dividers share the diagonal gesture of the logo. */
.motion-ready .feature { position: relative; }
.motion-ready .feature::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: #829b2c;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease-out);
}
.motion-ready .feature h3,
.motion-ready .feature svg { transition: transform 550ms var(--ease-out), stroke 400ms ease; }
.motion-ready .feature:hover::after { transform: scaleX(1); }
.motion-ready .feature:hover h3 { transform: translateX(3px); }
.motion-ready .feature:hover svg { transform: translateY(-4px) rotate(-5deg); stroke: #657e1a; }
.motion-ready .manifesto-inner.is-visible .manifesto-symbol img { animation: signature-enter 1000ms var(--ease-out) 120ms both; }

/* A sliding highlight connects the demo's stages without moving the labels. */
.motion-ready .demo-tabs { position: relative; isolation: isolate; }
.motion-ready .demo-tabs::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25%;
  z-index: 0;
  background: var(--acid);
  transform: translateX(calc(var(--active-step, 0) * 100%));
  transition: transform 550ms var(--ease-shift);
}
.motion-ready .demo-tab { z-index: 1; transition: color 250ms ease, transform 250ms var(--ease-out), background-color 300ms ease; }
.motion-ready .demo-tab.active { background: transparent; }
.motion-ready .message { animation: bubble-enter 550ms var(--ease-out) both; animation-delay: var(--message-delay, 0ms); }
.motion-ready .followup-interval { animation: bubble-enter 500ms var(--ease-out) 100ms both; }
.motion-ready .client-data > div { animation: detail-enter 450ms var(--ease-out) both; }
.motion-ready .client-data > div:nth-child(2) { animation-delay: 55ms; }
.motion-ready .client-data > div:nth-child(3) { animation-delay: 110ms; }
.motion-ready #scenario { transition: border-color 350ms ease, box-shadow 350ms ease, background-color 350ms ease; }
.motion-ready #scenario:is(:hover, :focus-visible) { border-color: #a4b378; background: #f3f6ea; box-shadow: 0 0 0 3px #d5fa4222; }
.motion-ready .stage-status { animation: detail-enter 450ms var(--ease-out); }

/* Native details remain operable without this enhancement. */
.faq-animating { overflow: hidden; }
.motion-ready .faq-list summary { transition: color 300ms ease; }
.motion-ready .faq-list summary > span { transition: transform 450ms var(--ease-out); }
.motion-ready .faq-list summary:is(:hover, :focus-visible) { color: #617922; }
.motion-ready .faq-list details[data-motion-state="closing"] summary > span { transform: rotate(0); }
.motion-ready .mobile-nav:not([hidden]) { animation: menu-enter 350ms var(--ease-out) both; }
.motion-ready .mobile-nav:not([hidden]) a { animation: menu-enter 400ms var(--ease-out) both; }
.motion-ready .mobile-nav:not([hidden]) a:nth-child(2) { animation-delay: 40ms; }
.motion-ready .mobile-nav:not([hidden]) a:nth-child(3) { animation-delay: 80ms; }

@keyframes bubble-enter { from { opacity: 0; transform: translate3d(0, 11px, 0) scale(.987); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes detail-enter { from { opacity: 0; transform: translate3d(8px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes card-settle { 0% { transform: translateY(9px) rotate(-1deg); } 28% { transform: translateY(-6px) rotate(-2.4deg); } 65% { transform: translateY(2px) rotate(-1.8deg); } 100% { transform: translateY(0) rotate(-2deg); } }
@keyframes signal-pulse { 0%, 100% { box-shadow: 0 0 0 0 #d5fa4200; } 48% { box-shadow: 0 0 0 5px #d5fa422b; } }
@keyframes draw-trace { to { stroke-dashoffset: 0; } }
@keyframes route-step { from { opacity: 0; transform: translate(-5px, 4px); } to { opacity: 1; transform: translate(0, 0); } }
@keyframes signature-enter { from { opacity: 0; transform: translateY(12px) rotate(-14deg) scale(.93); } to { opacity: 1; transform: translateY(0) rotate(-5deg) scale(1); } }
@keyframes menu-enter { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }

/* Two identical groups make the end of each lap meet the next without a jump. */
.journey-strip { overflow: hidden; }
.journey-track { display: flex; }
.journey-group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  gap: 22px 34px;
  padding-inline: 24px;
}
.journey-group[aria-hidden="true"] { display: none; }
.journey-strip .journey-group span,
.journey-strip .journey-group i,
.journey-strip .journey-group .strip-mark { display: block; flex-shrink: 0; }
.motion-ready .journey-strip {
  --ribbon-gap: clamp(32px, 5vw, 84px);
  --ribbon-duration: 32s;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.motion-ready .journey-track { width: max-content; will-change: transform; }
.motion-ready .journey-group {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: space-around;
  width: max-content;
  min-width: 100vw;
  gap: var(--ribbon-gap);
  padding-inline: calc(var(--ribbon-gap) / 2);
}
.motion-ready .journey-strip.is-visible .journey-track {
  animation: journey-marquee var(--ribbon-duration) linear infinite;
}
.motion-ready .journey-strip.is-visible i { animation: none; }
@keyframes journey-marquee { to { transform: translate3d(-50%, 0, 0); } }
@media (hover: hover) and (pointer: fine) {
  .motion-ready .journey-strip:hover .journey-track { animation-play-state: paused; }
}
@media (max-width: 620px) {
  .motion-ready .journey-strip { --ribbon-duration: 26s; }
  .journey-strip .journey-group span { font-size: 11px; letter-spacing: 1px; }
  .journey-strip .journey-group .strip-mark { width: 25px; height: 25px; }
}

@media (hover: hover) and (pointer: fine) {
  .motion-ready .floating-update:hover { box-shadow: 0 15px 35px #0002; }
}
@media (hover: none), (pointer: coarse) {
  .motion-ready .image-frame img { transform: none; }
  .motion-ready .button:hover { transform: none; box-shadow: none; }
  .motion-ready .button:active { transform: scale(.975); }
}
@media (max-width: 850px) { .footer-bottom { flex-wrap: wrap; } }
@media (max-width: 620px) {
  .motion-ready [data-reveal] { transform: translate3d(0, 15px, 0); transition-duration: 650ms; }
  .motion-ready [data-reveal].is-visible { transform: none; }
  .motion-ready .hero-visual.is-visible .floating-update { animation-duration: 3600ms; }
  .motion-ready .manifesto-inner.is-visible .manifesto-symbol img { animation: bubble-enter 750ms var(--ease-out) 100ms both; }
  .reset-demo .reset-icon { display: inline-block; }
  .footer-bottom a[href="#inicio"] { margin-left: auto; }
  .motion-toggle { flex-basis: 100%; margin-top: -3px; }
}

/* Also responds immediately to the site's pause control. */
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
}
html[data-motion="off"] [data-reveal] { opacity: 1 !important; transform: none !important; }
html[data-motion="off"] .button:hover { transform: none; }
html[data-motion="off"] :is(.underlined, .hand-line, .closing-line) path { stroke-dasharray: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .image-frame img { transform: none !important; }
  .button:hover { transform: none; }
}