/* Motion system for El Capitalista. Public site only. */
:root{
  --motion-fast:160ms;
  --motion-base:230ms;
  --motion-slow:480ms;
  --motion-stagger:55ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-standard:cubic-bezier(.2,.8,.2,1);
  --ease-exit:cubic-bezier(.4,0,1,1);
}

/* Stable transitions: transform and opacity first, layout stays untouched. */
.site-header,
.nav,
.nav a,
.menu-button span,
.read-button,
.primary-action,
.secondary-action,
.quiet-action,
.home-search button,
.newsletter-form button,
.filters button,
.calculator-presets button,
.share button,
.share a,
.story-card,
.tool-card,
.home-route a,
.discovery-card,
.topic-hub-card,
.story-image img,
.tool-card-art img,
.lead-art img,
.discovery-image img,
.tool-hero img,
.article-visual img{
  transition-timing-function:var(--ease-standard)!important;
}

.site-header{
  transition:
    background-color var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    backdrop-filter var(--motion-base) var(--ease-standard)!important;
}
.site-header.is-scrolled{
  background:rgba(251,250,247,.97)!important;
  border-bottom-color:rgba(16,45,98,.1)!important;
  box-shadow:0 12px 36px rgba(16,45,98,.09);
  backdrop-filter:blur(20px) saturate(1.12);
}

.nav a{
  transition:
    color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard)!important;
}
.nav a:active{transform:scale(.98)}

.menu-button span{
  transform-origin:center;
  transition:
    transform var(--motion-base) var(--ease-out),
    opacity var(--motion-fast) var(--ease-standard),
    width var(--motion-base) var(--ease-out)!important;
}
.menu-button[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-button[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.25)}
.menu-button[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1120px){
  .nav{
    transform-origin:top right;
    transform:translateY(-9px) scale(.985)!important;
    transition:
      opacity var(--motion-base) var(--ease-out),
      transform var(--motion-base) var(--ease-out),
      visibility 0s linear var(--motion-base)!important;
  }
  .nav.open{
    transform:none!important;
    transition:
      opacity var(--motion-base) var(--ease-out),
      transform var(--motion-base) var(--ease-out),
      visibility 0s!important;
  }
  .nav.open a{animation:motion-nav-item var(--motion-base) var(--ease-out) both}
  .nav.open a:nth-child(2){animation-delay:35ms}
  .nav.open a:nth-child(3){animation-delay:70ms}
  .nav.open a:nth-child(4){animation-delay:105ms}
  .nav.open a:nth-child(5){animation-delay:140ms}
  .nav.open a:nth-child(6){animation-delay:175ms}
}
@keyframes motion-nav-item{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:none}
}

/* Content stays visible without JS. JS adds motion-js only after elements are prepared. */
html.motion-js .motion-enter,
html.motion-js .motion-reveal{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:
    opacity var(--motion-slow) var(--ease-out),
    transform var(--motion-slow) var(--ease-out);
  transition-delay:var(--motion-delay,0ms);
}
html.motion-js .motion-enter.motion-scale,
html.motion-js .motion-reveal.motion-scale{
  transform:translate3d(0,10px,0) scale(.985);
}
html.motion-js .motion-enter.is-visible,
html.motion-js .motion-reveal.is-visible{
  opacity:1;
  transform:none;
}

/* Cards and imagery */
.story-card,
.tool-card,
.home-route a,
.discovery-card,
.topic-hub-card{
  will-change:auto;
  transition:
    transform var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-standard),
    background-color var(--motion-base) var(--ease-standard)!important;
}
.story-image,
.tool-card-art,
.lead-art,
.discovery-image,
.article-visual,
.tool-hero img{
  isolation:isolate;
}
.story-image img,
.tool-card-art img,
.lead-art img,
.discovery-image img,
.tool-hero img,
.article-visual img{
  backface-visibility:hidden;
  transform:translateZ(0);
  transition:
    opacity var(--motion-slow) var(--ease-out),
    transform 360ms var(--ease-out)!important;
}
img.motion-image{opacity:.94}
img.motion-image.is-loaded{opacity:1}

@media(hover:hover) and (pointer:fine){
  .story-card:hover,
  .tool-card:hover,
  .home-route a:hover,
  .discovery-card:hover,
  .topic-hub-card:hover{
    transform:translateY(-4px)!important;
    box-shadow:0 24px 62px rgba(16,45,98,.15)!important;
  }
  .story-card:hover .story-image img,
  .tool-card:hover .tool-card-art img,
  .lead-art:hover img,
  .discovery-card:hover .discovery-image img,
  .tool-hero img:hover{
    transform:scale(1.025)!important;
  }
  .story-card:hover h3 a,
  .tool-card:hover h3 a,
  .discovery-card:hover h3 a{color:var(--deep,#102d62)}
}

/* Buttons and links */
.read-button,
.primary-action,
.secondary-action,
.quiet-action,
.home-search button,
.newsletter-form button,
.next-step>a,
.commercial-cta>a,
.section-head>a{
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard)!important;
}
.read-button span,
.read-button b,
.primary-action b,
.next-step>a b,
.commercial-cta>a b,
.text-link{
  transition:transform var(--motion-fast) var(--ease-out)!important;
}
@media(hover:hover) and (pointer:fine){
  .read-button:hover,
  .primary-action:hover,
  .secondary-action:hover,
  .home-search button:hover,
  .newsletter-form button:hover,
  .next-step>a:hover,
  .commercial-cta>a:hover{
    transform:translateY(-2px)!important;
  }
  .read-button:hover span,
  .read-button:hover b,
  .primary-action:hover b,
  .next-step>a:hover b,
  .commercial-cta>a:hover b{
    transform:translateX(4px);
  }
}
.read-button:active,
.primary-action:active,
.secondary-action:active,
.quiet-action:active,
.home-search button:active,
.newsletter-form button:active,
.next-step>a:active,
.commercial-cta>a:active{transform:scale(.98)!important}

/* Newsletter */
.newsletter-form input[type="email"]{
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard)!important;
}
.newsletter-form input[type="email"]:focus{
  background:rgba(255,255,255,.55)!important;
  box-shadow:0 3px 0 rgba(16,45,98,.12)!important;
}
.newsletter-topics label{
  transition:
    transform var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard)!important;
}
.newsletter-topics input,
.form-consent input,
.consent input{accent-color:var(--deep,#102d62)}
@media(hover:hover) and (pointer:fine){
  .newsletter-topics label:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(16,45,98,.08)}
}
.newsletter-topics label:has(input:checked){transform:translateY(-1px);box-shadow:0 8px 18px rgba(16,45,98,.13)}
.api-form-status,
.lead-status{
  min-height:1.5em;
  opacity:.72;
  transform:translateY(3px);
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out),
    color var(--motion-fast) var(--ease-standard)!important;
}
.api-form-status.has-message,
.lead-status.has-message{opacity:1;transform:none}
.form-loading button{cursor:progress}
.form-loading button::after{content:"";display:inline-block;width:.75em;height:.75em;margin-left:9px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:motion-spin .7s linear infinite}
@keyframes motion-spin{to{transform:rotate(1turn)}}

/* Calculators */
.calculator-form input,
.calculator-form select,
.calculator-form textarea{
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard)!important;
}
.calculator-form input:focus,
.calculator-form select:focus,
.calculator-form textarea:focus{transform:translateY(-1px)}
.calculator-presets button{
  transition:
    transform var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard)!important;
}
.calculator-presets button.active{transform:translateY(-1px);box-shadow:0 8px 18px rgba(16,45,98,.12)}
.calculator-result [data-result]{transition:color var(--motion-fast) var(--ease-standard),transform var(--motion-base) var(--ease-out),opacity var(--motion-fast) var(--ease-standard)}
.calculator-result [data-result].is-updating{transform:translateY(-2px) scale(1.018);color:var(--yellow,#f5c625)}
.calculator-actions button{min-inline-size:0}
.calculator-actions [data-copy-result]{min-height:46px}

.lead-panel.motion-panel{
  opacity:0;
  transform:translateY(14px) scale(.992);
  transform-origin:top center;
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out)!important;
}
.lead-panel.motion-panel.is-open{opacity:1;transform:none}
.lead-panel.motion-panel.is-closing{opacity:0;transform:translateY(-7px) scale(.995)}

/* Search and filtered content */
.search-results.is-updating{opacity:.72;transition:opacity var(--motion-fast) var(--ease-standard)}
.search-results .discovery-card.motion-new{
  animation:motion-result-in 320ms var(--ease-out) both;
  animation-delay:var(--motion-delay,0ms);
}
@keyframes motion-result-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.search-empty{transition:opacity var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out)}

/* Footer */
.site-footer a{
  transition:color var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard)!important;
}
@media(hover:hover) and (pointer:fine){
  .site-footer a:hover{transform:translateX(3px)}
}

/* Focus remains immediate and visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(245,198,37,.85)!important;
  outline-offset:3px!important;
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  html.motion-js .motion-enter,
  html.motion-js .motion-reveal,
  html.motion-js .motion-enter.motion-scale,
  html.motion-js .motion-reveal.motion-scale{
    opacity:1!important;
    transform:none!important;
  }
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-delay:0ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    transition-delay:0ms!important;
  }
  .ticker div{animation:none!important;transform:none!important}
  .story-card:hover,
  .tool-card:hover,
  .home-route a:hover,
  .discovery-card:hover,
  .topic-hub-card:hover,
  .story-image img,
  .tool-card-art img,
  .lead-art img,
  .discovery-image img{transform:none!important}
}