/* Pulso — motion layer (v90).
   One coherent motion language for the whole page, loaded last.
   Everything below only applies when pulso-motion.js has added html.pm, which it
   does only if the visitor has not asked for reduced motion. Without JS the page
   is fully visible and static. */

:root {
  --pm-ease: cubic-bezier(.16, 1, .3, 1);      /* fast start, long soft landing */
  --pm-ease-io: cubic-bezier(.65, 0, .35, 1);
  --pm-red: #c63d2d;
}

/* ---------- Performance: blur behind opaque or near-opaque surfaces costs a
   repaint on every scroll frame and is not visible. ---------- */
.pulso-content button.case-frame,
.examples-section .gallery-controls { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.pulso-content > .section-nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #fbfbf8 !important; }

/* Marquees: a tap on a phone leaves :hover stuck, which froze the tool band. */
@media (hover: none) {
  #hacemos .toolbelt-marquee:hover .toolbelt-track,
  #hacemos .toolbelt-marquee:focus-within .toolbelt-track { animation-play-state: running !important; }
}

/* ---------- Page-to-page (index ⇄ legal): native cross-fade ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--pm-ease); }

/* ---------- Sections no longer slide in as one heavy block; their content does ---------- */
html.pm.refero-ready .pulso-content .chapter-section,
html.pm.refero-ready .pulso-content .new-footer { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Staggered reveal: hidden until its group enters the viewport */
html.pm .pm-r { opacity: 0; }
html.pm .pm-r.pm-show {
  animation: pm-rise .95s var(--pm-ease) both;
  animation-delay: calc(var(--pm-i, 0) * 75ms);
}
@keyframes pm-rise {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Headings rise word by word from behind a mask */
.pm-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* room for descenders and tight negative tracking inside the mask */
  padding: 0 .06em .16em 0;
  margin: 0 -.06em -.16em 0;
}
.pm-w > span { display: inline-block; }
html.pm .pm-split:not(.pm-show) .pm-w > span { transform: translate3d(0, calc(100% + .7em), 0); }
html.pm .pm-split.pm-show .pm-w > span {
  animation: pm-word 1.05s var(--pm-ease) both;
  animation-delay: calc(var(--pm-d, 0ms) + var(--pm-wi, 0) * 42ms);
}
@keyframes pm-word { from { transform: translate3d(0, calc(100% + .7em), 0); } to { transform: none; } }

/* ---------- Hero entrance ---------- */
html.pm .scene.scene-auralis h1,
html.pm .scene.scene-auralis .copy,
html.pm .scene.scene-auralis .eye { animation: none !important; }   /* replaces the old 1.2 s fade */

html.pm .scene header { opacity: 0; }
/* the title stays hidden until the script has split it into words */
html.pm .scene h1:not(.pm-split) { opacity: 0; }
html.pm.pm-go .scene h1:not(.pm-split) { opacity: 1; animation: pm-fade .9s var(--pm-ease) both !important; }
html.pm.pm-go .scene header { animation: pm-fade .9s var(--pm-ease) .1s both; }
@keyframes pm-fade { from { opacity: 0; transform: translate3d(0, -10px, 0); } to { opacity: 1; transform: none; } }

/* the image opens like a shutter, then settles */
html.pm .scene .eye { clip-path: inset(0 0 100% 0); }
html.pm.pm-go .scene .eye { animation: pm-shutter 1.35s var(--pm-ease) .25s both !important; }
@keyframes pm-shutter { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* depth on scroll: the frames drift slower than the page (set by JS) */
html.pm .scene .eye .hero-loop-frame,
html.pm .scene .eye #eye-image {
  transform: translate3d(0, calc(var(--pm-par, 0) * 8%), 0) scale(1.08);
  transform-origin: 50% 50%;
  will-change: transform;
}
html.pm .scene .copy p { opacity: 0; }
html.pm.pm-go .scene .copy p { animation: pm-rise 1s var(--pm-ease) both; }
html.pm.pm-go .scene .copy p:nth-child(1) { animation-delay: .75s; }
html.pm.pm-go .scene .copy p:nth-child(2) { animation-delay: .87s; }

/* ---------- Sticky menu: one indicator that slides to the current section ---------- */
html.pm .pulso-content > .section-nav a::after { display: none !important; }
.pm-ind {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--pm-red);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform .55s var(--pm-ease), width .55s var(--pm-ease), opacity .3s ease;
}
.pm-ind.is-on { opacity: 1; }
.pulso-content > .section-nav { scroll-behavior: smooth; }

/* ---------- Carousel: cards follow the finger while swiping ---------- */
#ejemplos #gallery-track { transform: translate3d(var(--pm-drag, 0px), 0, 0); transition: transform .6s var(--pm-ease); }
#ejemplos .gallery.pm-dragging #gallery-track { transition: none; }

/* ---------- Small finishing touches ---------- */
/* buttons and links settle with the same curve as the rest of the page */
html.pm .pulso-content .outline-button:active,
html.pm .pulso-content .gallery-controls button:active { transform: scale(.96) !important; transition-duration: .08s !important; }

/* The FAQ "+" turns as the answer opens */
html.pm #preguntas .faq-list details summary::after { transition: transform .45s var(--pm-ease) !important; }

@media (prefers-reduced-motion: reduce) {
  #ejemplos #gallery-track { transition: none; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}