/* ══════════════════════════════════════════════════════════════════
   🎬 QUIROMANCIA SUPREMA — GENESIS INTRO v13.0
   Secuencia cinematográfica de apertura en 7 actos.
   Todo con transform/opacity (compuesto en GPU, sin reflow).
   Púrpura Real × Oro Imperial.
   ══════════════════════════════════════════════════════════════════ */

#genesis {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #06010f;
    /* aísla el pintado: nada del intro invalida el layout de la app */
    contain: strict;
    will-change: opacity;
    transition: opacity 900ms cubic-bezier(0.65, 0, 0.35, 1),
                visibility 900ms step-end;
}
#genesis[hidden] { display: none; }
#genesis.genesis-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Bloquea el scroll mientras corre la intro */
html.genesis-locked, html.genesis-locked body {
    overflow: hidden !important;
    height: 100%;
}

/* ─────────────────────────────────────────────
   ACTO 0 · Vacío primordial — vórtice de fondo
   ───────────────────────────────────────────── */
.gen-void {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(closest-side at 50% 50%, rgba(124, 58, 237, 0.30), transparent 70%),
        radial-gradient(closest-side at 30% 70%, rgba(212, 175, 55, 0.16), transparent 68%),
        radial-gradient(closest-side at 72% 28%, rgba(168, 85, 247, 0.18), transparent 66%);
    opacity: 0;
    transform: scale(1.35) rotate(0deg);
    animation: genVoidAwake 3200ms cubic-bezier(0.22, 1, 0.36, 1) forwards,
               genVoidDrift 26s linear infinite;
}
@keyframes genVoidAwake {
    0%   { opacity: 0; transform: scale(1.5); filter: blur(30px); }
    100% { opacity: 1; transform: scale(1);   filter: blur(0); }
}
@keyframes genVoidDrift {
    to { rotate: 360deg; }
}

/* Rejilla de perspectiva infinita */
.gen-grid {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-image:
        linear-gradient(rgba(212, 175, 55, 0.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 55, 0.11) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(520px) rotateX(66deg) translateY(0);
    transform-origin: center 78%;
    animation: genGridIn 1600ms 500ms ease-out forwards,
               genGridScroll 3.2s linear infinite 500ms;
    mask-image: linear-gradient(to top, #000 0%, transparent 72%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 72%);
}
@keyframes genGridIn { to { opacity: 1; } }
@keyframes genGridScroll { to { background-position: 0 64px; } }

/* ─────────────────────────────────────────────
   ACTO 1 · Canvas de partículas (estrellas + polvo de oro)
   ───────────────────────────────────────────── */
#genesisCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: genFadeIn 1800ms 300ms ease-out forwards;
}
@keyframes genFadeIn { to { opacity: 1; } }

/* ─────────────────────────────────────────────
   ACTO 2 · Anillos orbitales de oro
   ───────────────────────────────────────────── */
.gen-rings {
    position: absolute;
    width: min(78vmin, 620px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.gen-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid transparent;
    opacity: 0;
    transform: scale(0.2) rotate(0deg);
}
.gen-ring::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    padding: 1px;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        rgba(212, 175, 55, 0.9) 40deg,
        transparent 110deg,
        rgba(167, 139, 250, 0.75) 220deg,
        transparent 300deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.gen-ring-1 { animation: genRingIn 1500ms 900ms  cubic-bezier(0.16,1,0.3,1) forwards, genSpin 14s 2.4s linear infinite; }
.gen-ring-2 { inset: 11%; animation: genRingIn 1500ms 1100ms cubic-bezier(0.16,1,0.3,1) forwards, genSpinRev 19s 2.6s linear infinite; }
.gen-ring-3 { inset: 22%; animation: genRingIn 1500ms 1300ms cubic-bezier(0.16,1,0.3,1) forwards, genSpin 24s 2.8s linear infinite; }
@keyframes genRingIn {
    0%   { opacity: 0; transform: scale(0.25) rotate(-90deg); }
    70%  { opacity: 1; }
    100% { opacity: 0.85; transform: scale(1) rotate(0deg); }
}
@keyframes genSpin    { to { transform: rotate(360deg); } }
@keyframes genSpinRev { to { transform: rotate(-360deg); } }

/* ─────────────────────────────────────────────
   ACTO 3 · La mano se dibuja a sí misma (stroke-draw SVG)
   ───────────────────────────────────────────── */
.gen-hand {
    position: relative;
    width: min(42vmin, 330px);
    aspect-ratio: 1;
    filter: drop-shadow(0 0 34px rgba(212, 175, 55, 0.45));
    opacity: 0;
    animation: genHandIn 1300ms 1200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes genHandIn {
    0%   { opacity: 0; transform: scale(0.72) translateY(24px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.gen-hand svg { width: 100%; height: 100%; overflow: visible; }

/* Respiración orgánica sutil de la mano completa */
.gen-hand-g {
    transform-box: fill-box;
    transform-origin: 50% 88%;
    animation: genHandBreathe 7s 3200ms ease-in-out infinite;
}
@keyframes genHandBreathe {
    0%, 100% { transform: translate(24px, -12px) scale(1) rotate(0deg); }
    50%      { transform: translate(24px, -16px) scale(1.014) rotate(-0.5deg); }
}

/* ── Piel: la palma se materializa antes de trazarse ── */
.gen-skin {
    opacity: 0;
    animation: genSkinIn 1500ms 2050ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    filter: blur(0.4px);
}
.gen-skin.gen-sheen {
    animation-delay: 2350ms;
    mix-blend-mode: screen;
    filter: blur(2.5px);
}
@keyframes genSkinIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* ── Trazos animados (silueta + líneas mayores) ── */
.gen-draw {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--len, 1400);
    stroke-dashoffset: var(--len, 1400);
    animation: genDraw var(--dur, 1600ms) var(--delay, 1400ms) cubic-bezier(0.62, 0.03, 0.3, 1) forwards;
}
@keyframes genDraw { to { stroke-dashoffset: 0; } }

/* La silueta lleva un halo más marcado; las líneas, brillo de color */
.gen-outline { filter: drop-shadow(0 0 6px rgba(230, 198, 92, 0.75)); }
.gen-line    { filter: drop-shadow(0 0 5px currentColor); opacity: 0.96; }

/* ── Contorno luminoso: repasa la silueta con luz nacarada ── */
.gen-rim {
    fill: none;
    stroke: rgba(255, 248, 224, 0.85);
    stroke-width: 0.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--len, 1400);
    stroke-dashoffset: var(--len, 1400);
    opacity: 0;
    animation: genRimDraw 2100ms 2500ms cubic-bezier(0.62, 0.03, 0.3, 1) forwards;
}
@keyframes genRimDraw {
    0%   { opacity: 0; }
    18%  { opacity: 0.9; }
    100% { opacity: 0.55; stroke-dashoffset: 0; }
}

/* ── Pliegues falángicos y líneas menores ── */
.gen-detail {
    fill: none;
    stroke: rgba(244, 221, 154, 0.5);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-dasharray: var(--len, 40);
    stroke-dashoffset: var(--len, 40);
    opacity: 0;
    animation: genDetailIn 900ms var(--delay, 2900ms) ease-out forwards;
}
@keyframes genDetailIn {
    0%   { opacity: 0; }
    40%  { opacity: 0.85; }
    100% { opacity: 0.62; stroke-dashoffset: 0; }
}

/* ── Montes de la palma: laten como brasas ── */
.gen-mount {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: genMountIn 1200ms var(--delay, 2800ms) ease-out forwards;
}
@keyframes genMountIn {
    0%   { opacity: 0; transform: scale(0.4); }
    60%  { opacity: 1; transform: scale(1.12); }
    100% { opacity: 0.8; transform: scale(1); }
}

/* Pulso de energía que recorre la línea de la vida tras dibujarse */
.gen-pulse {
    fill: none;
    stroke: #fbf0cd;
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-dasharray: 22 var(--plen, 1400);
    stroke-dashoffset: var(--plen, 1400);
    opacity: 0;
    animation: genPulseRun 1600ms 3900ms ease-in-out 2 forwards;
    filter: drop-shadow(0 0 9px #f4dd9a);
}
@keyframes genPulseRun {
    0%   { opacity: 0; stroke-dashoffset: var(--plen, 1400); }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { opacity: 0; stroke-dashoffset: 0; }
}

/* Destello del centro de la palma (centrado en el hueco de la mano) */
.gen-flare {
    position: absolute;
    top: 62%; left: 54%;
    width: 38%; aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251,240,205,0.95), rgba(212,175,55,0.45) 40%, transparent 72%);
    opacity: 0;
    animation: genFlare 1700ms 3000ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes genFlare {
    0%   { opacity: 0; transform: scale(0.2); }
    36%  { opacity: 1; transform: scale(1.18); }
    100% { opacity: 0.30; transform: scale(1); }
}

/* ─────────────────────────────────────────────
   ACTO 4 · Título — revelado letra a letra con foil dorado
   ───────────────────────────────────────────── */
.gen-stage {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 2.4vh, 28px);
    padding: 4vh 6vw;
    text-align: center;
}

.gen-title {
    margin: 0;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 900;
    font-size: clamp(1.85rem, 7.2vw, 4.6rem);
    line-height: 1.04;
    letter-spacing: 0.06em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.06em;
}
.gen-title .gen-word { display: inline-flex; }
.gen-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.7em) rotateX(-88deg) scale(0.82);
    transform-origin: 50% 100%;
    background: linear-gradient(105deg, #a37a12 0%, #d4af37 26%, #fbf0cd 48%, #e8c766 68%, #a37a12 100%);
    background-size: 320% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: genCharIn 900ms var(--d, 0ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
    filter: drop-shadow(0 3px 16px rgba(212, 175, 55, 0.35));
}
@keyframes genCharIn {
    0%   { opacity: 0; transform: translateY(0.7em) rotateX(-88deg) scale(0.82); }
    62%  { opacity: 1; transform: translateY(-0.06em) rotateX(6deg) scale(1.03); }
    100% { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}
/* Barrido de foil sobre el título ya formado */
.gen-title.gen-foil .gen-char { animation: genCharIn 900ms var(--d,0ms) cubic-bezier(0.16,1,0.3,1) forwards, genFoil 2.6s 400ms linear infinite; }
@keyframes genFoil { to { background-position: 320% center; } }

.gen-sub {
    margin: 0;
    font-family: 'Quicksand', system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(0.76rem, 2.6vw, 1.06rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #c4b5fd;
    opacity: 0;
    animation: genSubIn 1200ms 2600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes genSubIn {
    0%   { opacity: 0; letter-spacing: 0.9em; filter: blur(8px); }
    100% { opacity: 1; letter-spacing: 0.32em; filter: blur(0); }
}

/* Filete divisorio que se expande */
.gen-rule {
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    animation: genRuleIn 1400ms 2400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes genRuleIn { to { width: min(320px, 62vw); } }

/* ─────────────────────────────────────────────
   ACTO 5 · Sigilos de las 5 tradiciones
   ───────────────────────────────────────────── */
.gen-sigils {
    display: flex;
    gap: clamp(10px, 3vw, 22px);
    justify-content: center;
    flex-wrap: wrap;
}
.gen-sigil {
    width: clamp(34px, 9vw, 48px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: clamp(0.95rem, 3.4vw, 1.3rem);
    color: #f4dd9a;
    background: radial-gradient(circle at 34% 28%, rgba(212,175,55,0.24), rgba(76,29,149,0.32));
    border: 1px solid rgba(212, 175, 55, 0.42);
    opacity: 0;
    transform: scale(0.4) translateY(14px);
    animation: genSigilIn 820ms var(--d, 3000ms) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}
@keyframes genSigilIn {
    0%   { opacity: 0; transform: scale(0.4) translateY(14px) rotate(-40deg); }
    100% { opacity: 1; transform: scale(1) translateY(0) rotate(0); }
}

/* ─────────────────────────────────────────────
   ACTO 6 · Barra de progreso de carga real
   ───────────────────────────────────────────── */
.gen-loader {
    width: min(300px, 62vw);
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: center;
    opacity: 0;
    animation: genFadeIn 900ms 1800ms ease-out forwards;
}
.gen-bar {
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: rgba(196, 181, 253, 0.16);
    overflow: hidden;
}
.gen-bar-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6d28d9, #d4af37, #fbf0cd);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.7);
    transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gen-status {
    font-family: 'Courier New', monospace;
    font-size: clamp(0.6rem, 2.2vw, 0.72rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8b7ab0;
    min-height: 1.2em;
}

/* ─────────────────────────────────────────────
   ACTO 7 · Botón de entrada + omitir
   ───────────────────────────────────────────── */
.gen-enter {
    position: relative;
    margin-top: 4px;
    padding: 14px 38px;
    min-height: 48px;
    border: 1px solid rgba(255, 240, 200, 0.55);
    border-radius: 999px;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: clamp(0.82rem, 3vw, 1rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2a1055;
    background: linear-gradient(135deg, #a37a12, #d4af37 30%, #fbf0cd 50%, #d4af37 72%, #a37a12);
    background-size: 220% auto;
    cursor: pointer;
    opacity: 0;
    transform: translateY(16px) scale(0.94);
    animation: genEnterIn 900ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7),
                inset 0 -3px 8px rgba(107,74,6,0.35),
                0 14px 40px -10px rgba(212, 175, 55, 0.7);
    overflow: hidden;
    transition: background-position 600ms ease, transform 320ms cubic-bezier(0.22,1,0.36,1), box-shadow 320ms ease;
}
@keyframes genEnterIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.gen-enter:hover {
    background-position: 100% center;
    transform: translateY(-3px) scale(1.03);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 22px 50px -12px rgba(212,175,55,0.85);
}
.gen-enter:active { transform: translateY(-1px) scale(0.99); }
.gen-enter:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 4px; }
/* Halo latiente que invita a pulsar */
.gen-enter::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 1px solid rgba(251, 240, 205, 0.6);
    animation: genEnterHalo 2.2s ease-out infinite;
    pointer-events: none;
}
@keyframes genEnterHalo {
    0%   { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.28); }
}

.gen-skip {
    position: absolute;
    top: max(16px, env(safe-area-inset-top, 0px));
    right: 16px;
    z-index: 5;
    padding: 9px 18px;
    min-height: 40px;
    border: 1px solid rgba(196, 181, 253, 0.30);
    border-radius: 999px;
    background: rgba(16, 4, 31, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #c4b5fd;
    font-family: 'Quicksand', system-ui, sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    animation: genFadeIn 700ms 1500ms ease-out forwards;
    transition: color 240ms ease, border-color 240ms ease, background 240ms ease;
}
.gen-skip:hover { color: #f4dd9a; border-color: rgba(212,175,55,0.6); background: rgba(76,29,149,0.45); }
.gen-skip:focus-visible { outline: 2px solid #d4af37; outline-offset: 3px; }

/* Viñeta cinematográfica encima de todo */
.gen-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 120% 90% at 50% 50%, transparent 42%, rgba(3, 0, 10, 0.78) 100%);
}

/* Flash blanco de transición al entrar */
.gen-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, #fff8e6, #d4af37 45%, transparent 78%);
    opacity: 0;
    pointer-events: none;
}
#genesis.genesis-burst .gen-flash {
    animation: genBurst 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes genBurst {
    0%   { opacity: 0; transform: scale(0.4); }
    24%  { opacity: 0.95; }
    100% { opacity: 0; transform: scale(2.6); }
}
#genesis.genesis-burst .gen-stage,
#genesis.genesis-burst .gen-rings {
    animation: genZoomOut 900ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes genZoomOut {
    to { opacity: 0; transform: scale(1.5); filter: blur(14px); }
}

/* ─────────────────────────────────────────────
   Responsive fino
   ───────────────────────────────────────────── */
@media (max-height: 620px) {
    .gen-hand { width: min(28vmin, 190px); }
    .gen-sigils { display: none; }
    .gen-stage { gap: 10px; }
}
@media (max-width: 420px) {
    .gen-title { letter-spacing: 0.03em; }
    .gen-sub { letter-spacing: 0.2em; }
}

/* ─────────────────────────────────────────────
   Accesibilidad: movimiento reducido → revelado instantáneo
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #genesis *,
    #genesis *::before,
    #genesis *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
    }
    .gen-void, .gen-grid, #genesisCanvas, .gen-hand, .gen-loader,
    .gen-skip, .gen-sub, .gen-char, .gen-sigil, .gen-enter,
    .gen-skin, .gen-mount, .gen-detail { opacity: 1 !important; }
    .gen-char { transform: none !important; }
    .gen-draw, .gen-detail, .gen-rim { stroke-dashoffset: 0 !important; }
    .gen-rim { opacity: 0.55 !important; }
    .gen-hand-g { animation: none !important; transform: translate(24px, -12px) !important; }
    .gen-pulse { display: none; }
    .gen-rule { width: min(320px, 62vw) !important; }
    .gen-enter::after { display: none; }
}

/* Alto contraste */
@media (prefers-contrast: more) {
    .gen-sub { color: #e9e2ff; }
    .gen-status { color: #c4b5fd; }
}

@media print { #genesis { display: none !important; } }