/* v29 · Presentación al entrar */
.intro { display: none; }
html.intro-on { overflow: hidden; }
.intro-on .intro {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: radial-gradient(45% 38% at 50% 52%, rgba(216, 196, 149, .1), transparent 72%), #050907;
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1) .15s, visibility 0s linear 1s;
}
.intro-stage { position: relative; display: flex; flex-direction: column; align-items: center; transition: transform 1s cubic-bezier(.16, 1, .3, 1), filter .8s, opacity .7s; }
.intro-mark { position: relative; width: clamp(150px, 15vw, 220px); aspect-ratio: 1002 / 1082; }
.intro-mark img { display: block; width: 100%; height: 100%; clip-path: inset(100% 0 0 0); transform: translateY(14px);
  animation: introBuild 1.3s cubic-bezier(.65, 0, .2, 1) .45s forwards; }
/* brillo que recorre el logo cuando termina de levantarse */
.intro-mark::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(255, 244, 214, .95) 50%, transparent 70%) 0 0 / 100% 300% no-repeat;
  -webkit-mask: url("assets/plinto-logo.svg") center / 100% 100% no-repeat; mask: url("assets/plinto-logo.svg") center / 100% 100% no-repeat;
  animation: introSheen 1s cubic-bezier(.45, 0, .3, 1) 1.55s forwards; }
/* el plinto: la base sobre la que se levanta todo */
.intro-base { width: clamp(190px, 19vw, 280px); height: 1px; margin-top: 26px; transform: scaleX(0);
  background: linear-gradient(90deg, transparent, #D8C495 20%, #EADBB5 50%, #D8C495 80%, transparent);
  box-shadow: 0 0 18px rgba(216, 196, 149, .55); animation: introBase .7s cubic-bezier(.65, 0, .2, 1) .1s forwards; }

@keyframes introBase { to { transform: scaleX(1); } }
@keyframes introBuild { to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes introSheen { 0% { opacity: 1; background-position: 0 100%; } 100% { opacity: 1; background-position: 0 0; } }

/* salida: se abre hacia la portada */
.intro-out .intro { opacity: 0; visibility: hidden; }
.intro-out .intro-stage { transform: scale(1.08); filter: blur(10px); opacity: 0; }