/* ==========================================================================
   La Llave de Lazurhi — Animaciones mejoradas
   Scroll-linked, parallax, transiciones entre páginas, efectos deslumbrantes
   ========================================================================== */

/* ---------- Transiciones entre páginas — 12 efectos únicos ---------- */
.page-transition {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
}

/* Base: todos los paneles ocultos */
.page-transition__panel {
    position: absolute;
    inset: 0;
    background: var(--color-bg-deep, #080a0f);
    transform: scaleY(0);
    transform-origin: bottom;
}

.page-transition__glow {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    top: 50%;
    transform: translateY(-50%) scaleX(0);
    background: linear-gradient(90deg, transparent, var(--color-gold, #c9a24b), transparent);
    opacity: 0;
}

/* === TRANSICIÓN 1: Cortina vertical (La saga) === */
.page-transition--cortina-vertical .page-transition__panel {
    animation: panelUp 0.6s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes panelUp {
    from { transform: scaleY(0); transform-origin: bottom; }
    to   { transform: scaleY(1); transform-origin: bottom; }
}

/* === TRANSICIÓN 2: Barrido horizontal derecha (La isla) === */
.page-transition--barrido-derecha .page-transition__panel {
    transform: scaleX(0);
    transform-origin: left;
    animation: sweepRight 0.6s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes sweepRight {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* === TRANSICIÓN 3: Círculo expandiéndose desde centro (Costumbres) === */
.page-transition--circulo .page-transition__panel {
    transform: scale(0);
    border-radius: 50%;
    left: 50%; top: 50%;
    width: 200vmax; height: 200vmax;
    margin-left: -100vmax; margin-top: -100vmax;
    animation: circleExpand 0.7s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes circleExpand {
    from { transform: scale(0); }
    to   { transform: scale(1); border-radius: 0; }
}

/* === TRANSICIÓN 4: Diamantes que cubren (Personajes) === */
.page-transition--diamantes .page-transition__panel {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transform: scale(0);
    left: 50%; top: 50%;
    width: 200vmax; height: 200vmax;
    margin-left: -100vmax; margin-top: -100vmax;
    animation: diamondGrow 0.7s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes diamondGrow {
    from { transform: scale(0) rotate(0deg); }
    to   { transform: scale(1.5) rotate(45deg); }
}

/* === TRANSICIÓN 5: Fundido con niebla (Cisnes) === */
.page-transition--niebla .page-transition__panel {
    opacity: 0;
    background: radial-gradient(ellipse at 50% 50%, #0a1520 0%, #080a0f 100%);
    animation: fadeNiebla 0.8s ease forwards;
}
@keyframes fadeNiebla {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* === TRANSICIÓN 6: Paneles diagonales (Booktrailers) === */
.page-transition--diagonal .page-transition__panel {
    transform: scaleX(0);
    transform-origin: left;
    clip-path: polygon(0 0, 100% 8%, 100% 100%, 0% 92%);
    animation: diagSweep 0.6s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes diagSweep {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* === TRANSICIÓN 7: Páginas de libro (Leer inicio) === */
.page-transition--libro .page-transition__panel {
    transform-origin: left center;
    transform: perspective(1200px) rotateY(-90deg);
    animation: bookOpen 0.7s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes bookOpen {
    from { transform: perspective(1200px) rotateY(-90deg); }
    to   { transform: perspective(1200px) rotateY(0deg); }
}

/* === TRANSICIÓN 8: Zoom hacia dentro (La autora) === */
.page-transition--zoom .page-transition__panel {
    transform: scale(3);
    opacity: 0;
    animation: zoomIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes zoomIn {
    from { transform: scale(3); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* === TRANSICIÓN 9: Cortina desde arriba (Noticias) === */
.page-transition--cortina-abajo .page-transition__panel {
    transform: scaleY(0);
    transform-origin: top;
    animation: panelDown2 0.6s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes panelDown2 {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

/* === TRANSICIÓN 10: Iris (Foro) === */
.page-transition--iris .page-transition__panel {
    clip-path: circle(0% at 50% 50%);
    animation: irisOpen 0.7s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes irisOpen {
    from { clip-path: circle(0% at 50% 50%); }
    to   { clip-path: circle(100% at 50% 50%); }
}

/* === TRANSICIÓN 11: Barrido izquierda (Contacto) === */
.page-transition--barrido-izquierda .page-transition__panel {
    transform: scaleX(0);
    transform-origin: right;
    animation: sweepLeft 0.6s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes sweepLeft {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* === TRANSICIÓN 12: Fragmentos (Inicio) === */
.page-transition--fragmentos .page-transition__panel {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    animation: fragReveal 0.7s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes fragReveal {
    from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

/* === SALIDA: la cortina se retira (universal) === */
.page-transition--exit .page-transition__panel {
    transform: scaleY(1);
    transform-origin: top;
    animation: exitDown 0.5s cubic-bezier(0.76, 0, 0.24, 1) 0.1s forwards;
}
@keyframes exitDown {
    from { transform: scaleY(1); opacity: 1; }
    to   { transform: scaleY(0); opacity: 0; }
}

.page-transition--exit .page-transition__glow {
    animation: glowLine 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes glowLine {
    0%   { transform: translateY(-50%) scaleX(0); opacity: 0; }
    50%  { transform: translateY(-50%) scaleX(1); opacity: 1; }
    100% { transform: translateY(-50%) scaleX(1); opacity: 0; }
}

/* ---------- Barrido de luz en títulos (sheen) ---------- */
.sheen {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.sheen::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(201, 162, 75, 0.25) 45%,
        rgba(230, 200, 119, 0.4) 50%,
        rgba(201, 162, 75, 0.25) 55%,
        transparent 80%
    );
    animation: sheenSlide 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    animation-delay: 2s;
    pointer-events: none;
}

@keyframes sheenSlide {
    0%   { left: -100%; }
    30%  { left: 150%; }
    100% { left: 150%; }
}

/* ---------- Parallax por scroll (clases JS) ---------- */
[data-parallax] {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ---------- Scroll-linked fade y movimiento ---------- */
[data-scroll-fade] {
    will-change: opacity, transform;
}

/* ---------- Efecto de resplandor en tarjetas al hover ---------- */
.personaje-card,
.portal,
.lugar-card {
    position: relative;
    overflow: hidden;
}

.personaje-card::before,
.portal::before,
.lugar-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(201, 162, 75, 0.12) 0%,
        transparent 50%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.personaje-card:hover::before,
.portal:hover::before,
.lugar-card:hover::before {
    opacity: 1;
}

/* ---------- Efecto de partículas doradas flotantes en secciones ---------- */
.section--particles {
    position: relative;
    overflow: hidden;
}

.section--particles::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 15% 25%, rgba(201, 162, 75, 0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 45% 65%, rgba(230, 200, 119, 0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 72% 35%, rgba(201, 162, 75, 0.35) 0%, transparent 100%),
        radial-gradient(1px 1px at 88% 78%, rgba(70, 179, 166, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 85%, rgba(201, 162, 75, 0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 60% 15%, rgba(230, 200, 119, 0.3) 0%, transparent 100%);
    background-size: 100% 100%;
    animation: floatDust 20s ease-in-out infinite alternate;
    opacity: 0.6;
}

@keyframes floatDust {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-8px, 12px) scale(1.02); }
    100% { transform: translate(5px, -8px) scale(0.98); }
}

/* ---------- Imágenes con revelado parallax ---------- */
.parallax-img-wrap {
    overflow: hidden;
    border-radius: var(--radius-lg, 12px);
}

.parallax-img-wrap img {
    transform: scale(1.15);
    transition: transform 0.1s linear;
    will-change: transform;
}

/* ---------- Separadores animados ---------- */
.divider--animated {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.divider--animated::before,
.divider--animated::after {
    content: '';
    flex: 1;
    height: 1px;
    max-width: 200px;
}

.divider--animated::before {
    background: linear-gradient(90deg, transparent, var(--color-gold, #c9a24b));
    animation: divPulse 4s ease-in-out infinite;
}

.divider--animated::after {
    background: linear-gradient(90deg, var(--color-gold, #c9a24b), transparent);
    animation: divPulse 4s ease-in-out infinite 2s;
}

@keyframes divPulse {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

/* ---------- Texto que aparece carácter a carácter ---------- */
.typewriter-line {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.typewriter-line.is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- Hover en imágenes de personajes: zoom + brillo ---------- */
.personaje-card__imagen {
    overflow: hidden;
    position: relative;
}

.personaje-card__imagen img {
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}

.personaje-card:hover .personaje-card__imagen img {
    transform: scale(1.08);
    filter: brightness(1.1);
}

/* Borde dorado que aparece al hover */
.personaje-card__imagen::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid rgba(201, 162, 75, 0);
    border-radius: inherit;
    transition: border-color 0.4s ease;
    pointer-events: none;
}

.personaje-card:hover .personaje-card__imagen::after {
    border-color: rgba(201, 162, 75, 0.5);
}

/* ---------- Títulos de sección: aparición con escala ---------- */
.section__title {
    position: relative;
}

.section__title.is-visible {
    animation: titleReveal 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes titleReveal {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
        letter-spacing: -0.02em;
    }
    to {
        opacity: 1;
        transform: none;
        letter-spacing: normal;
    }
}

/* ---------- Scroll suave mejorado ---------- */
html {
    scroll-behavior: smooth;
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
    .sheen::after,
    .page-transition__panel,
    .page-transition__glow,
    .section--particles::after,
    .divider--animated::before,
    .divider--animated::after {
        animation: none !important;
    }

    .personaje-card__imagen img,
    .parallax-img-wrap img,
    [data-parallax],
    [data-scroll-fade] {
        transition: none !important;
        transform: none !important;
    }
}