/* hecho por r3k1 */
@view-transition { navigation: auto; }

@layer motion {
  @keyframes entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes asoma { from { opacity: 0; transform: translateY(14px); } }
  @keyframes sube { from { transform: translateY(104%); } }
  @keyframes funde { from { opacity: 0; } }

  ::view-transition-old(root) { animation: .35s var(--suave) both funde reverse; }
  ::view-transition-new(root) { animation: .55s var(--suave) both funde; }
  .cab { view-transition-name: cab; }
  ::view-transition-group(cab) { animation: none; }

  .fondo { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(80vmax 60vmax at 85% -10%, var(--mancha-1), transparent 60%); opacity: .7; }
  .fondo i { display: none; }
  .pausa .aros { animation-play-state: paused; }

  .js .rv { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--lento), transform 1.3s var(--lento); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .rv.in { opacity: 1; transform: none; }

  .js .h2.rv, .js .phero__h.rv { opacity: 1; transform: none; }
  .pal { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .14em 0; margin: 0 -.08em -.14em 0; }
  .pal > span { display: inline-block; transform: translateY(104%); transition: transform 1.3s var(--lento) calc(var(--w) * 70ms + var(--i, 0) * 80ms); }
  .in .pal > span { transform: none; }
  h1 em:has(.pal), h2 em:has(.pal) { background: none; }
  h1 em .pal > span, h2 em .pal > span { background: var(--oro-g); -webkit-background-clip: text; background-clip: text; color: transparent; }

  .js .cortina { clip-path: inset(0 0 100% 0); transition: clip-path 1.6s var(--lento); }
  .js .cortina img { scale: 1.12; transition: scale 2.2s var(--lento); }
  .js .cortina.in { clip-path: inset(0 round var(--r)); }
  .js .cortina.in img { scale: 1; }

  @media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
    .js .rv, .js .cortina { opacity: 1; transform: none; clip-path: none; }
  }
}