/* Animación de entrada · Yamile Restrepo nail studio
   El monograma YR se escribe a mano, aparece el nombre y el eslogan "Tus uñas, tu firma."
   Sin scripts en línea (el hosting no los permite): todo vive en este CSS y en intro-yr.js. */
#intro-yr{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;flex-direction:column;
  background:radial-gradient(120% 90% at 50% 38%,#2b2a28 0%,#1f1e1d 60%,#171615 100%);cursor:pointer;
  opacity:1;transition:opacity .7s ease, transform .7s ease, visibility 0s linear .7s;-webkit-tap-highlight-color:transparent}
#intro-yr.intro-yr--claro{background:radial-gradient(120% 90% at 50% 38%,#fbf8f2 0%,#f6f1e8 60%,#ece5d8 100%)}
#intro-yr .intro-yr__logo{width:min(78vw,400px);height:auto;display:block}
#intro-yr .intro-yr__logo[hidden]{display:none}
#intro-yr .intro-yr__barra{position:relative;width:min(46vw,160px);height:2px;margin-top:28px;border-radius:2px;overflow:hidden;background:rgba(201,165,90,.22)}
#intro-yr .intro-yr__barra i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:#C9A55A;animation:introyr-barra 3.1s cubic-bezier(.4,.1,.3,1) forwards}
#intro-yr.intro-yr--claro .intro-yr__barra{background:rgba(169,131,47,.2)}
#intro-yr.intro-yr--claro .intro-yr__barra i{background:#A9832F}
#intro-yr .intro-yr__saltar{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;font:400 12px/1 Outfit,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#C9A55A;opacity:0;animation:introyr-saltar .6s ease 1.6s forwards}
#intro-yr.intro-yr--claro .intro-yr__saltar{color:#7F6024}
#intro-yr.intro-yr--sale{opacity:0;transform:scale(1.03);visibility:hidden;pointer-events:none}
html.intro-yr-activa,html.intro-yr-activa body{overflow:hidden}
@keyframes introyr-barra{to{transform:scaleX(1)}}
@keyframes introyr-saltar{to{opacity:.75}}
@media (prefers-reduced-motion:reduce){
  #intro-yr{transition-duration:.01s}
  #intro-yr .intro-yr__barra i{animation:none;transform:scaleX(1)}
  #intro-yr .intro-yr__saltar{animation:none;opacity:.75}
}
