/* =========================================================
   PORTADA — animación de inicio del monograma FV
   Estado por defecto = estado final (sin JS se ve completo).
   body.play activa la secuencia: aparición → luz en el contorno → caminos.
   ========================================================= */
.intro { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; background: var(--navy); color: var(--bone); overflow: hidden; }
.intro__center { display: grid; place-items: center; align-content: center; gap: 1.75rem; padding: 3rem var(--gutter) 2rem; text-align: center; }
.mark { position: relative; width: clamp(190px, 44vmin, 330px); aspect-ratio: 1; }
.mark picture, .mark img { width: 100%; height: 100%; display: block; }

/* Luz que recorre el borde: capa enmascarada con el contorno del logo; dentro gira un haz cónico */
.edge { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask: url("../img/fv-edge.png") center / 100% 100% no-repeat; mask: url("../img/fv-edge.png") center / 100% 100% no-repeat; }
.edge--glow { -webkit-mask-image: url("../img/fv-edge-glow.png"); mask-image: url("../img/fv-edge-glow.png"); opacity: 1; }
.edge::before { content: ""; position: absolute; inset: -30%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 290deg, rgba(255,226,160,.35) 320deg, rgba(255,246,220,1) 348deg, rgba(255,226,160,.35) 356deg, transparent 360deg);
  animation: sweep 4.2s linear infinite; }
.edge--glow::before { filter: blur(2px); }
@keyframes sweep { to { transform: rotate(360deg); } }

.intro__brand { display: grid; justify-items: center; gap: .35rem; }
.intro__brand .signature__name { font-size: 1.75rem; color: var(--gold-light); }
.intro__brand .signature__desc { font-size: .6875rem; letter-spacing: .42em; color: var(--bone); }
.intro__actions { display: grid; gap: .9rem; width: min(100%, 300px); }
@media (min-width: 720px) { .intro__actions { grid-template-columns: 1fr 1fr; width: min(100%, 460px); gap: 1.25rem; } }

.path-btn { position: relative; display: grid; place-items: center; min-height: 56px; padding: 0 1.25rem; border-radius: 8px;
  border: 1px solid rgba(201,168,76,.7); color: var(--bone); text-decoration: none; font: 600 1rem/1 var(--font-body); letter-spacing: .04em;
  background: rgba(26,53,82,.35); transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), background-color .28s, border-color .28s; }
.path-btn:hover, .path-btn:focus-visible { transform: scale(1.06); background: var(--navy-2); border-color: var(--gold-light);
  box-shadow: 0 0 0 1px var(--gold-light), 0 10px 34px rgba(201,168,76,.28); outline: none; }
.path-btn:active { transform: scale(.97); }

.intro__foot { display: flex; justify-content: center; gap: 1rem; padding: 1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom)); font-size: .75rem; color: rgba(251,250,246,.72); }
.intro__foot a { color: inherit; }
.skip { position: fixed; right: 1rem; top: calc(.75rem + env(safe-area-inset-top)); background: none; border: 0; color: rgba(251,250,246,.72); font: 500 .75rem var(--font-body); letter-spacing: .06em; cursor: pointer; padding: .6rem .4rem; display: none; }
.skip:hover { color: var(--bone); text-decoration: underline; }

/* ---------- Secuencia (solo con body.play) ---------- */
.play .skip { display: block; }
.play .mark { animation: appear 1.2s .2s var(--ease-out) both; }
.play .edge { animation: fadein .7s 1.35s ease both; }
.play .intro__brand { animation: rise .6s 1.8s var(--ease-out) both; }
.play .path-btn:nth-child(1) { animation: rise .6s 1.95s var(--ease-out) both; }
.play .path-btn:nth-child(2) { animation: rise .6s 2.1s var(--ease-out) both; }
.play .intro__foot { animation: fadein .6s 2.3s ease both; }
@keyframes appear { from { opacity: 0; filter: blur(12px); transform: scale(.94); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* tras la animación de entrada el botón debe poder escalar con hover */
.play .path-btn.done { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .edge { display: none; }
  .path-btn { transition: none; }
  .path-btn:hover { transform: none; }
}