/* ═════════════════════════════════════════════════════════════════
   LANDING FX — capa de efectos OPCIONAL para shorts-landing.html.
   Hereda variables de shorts.css (--bg, --accent, --card-bg, --text...).
   Quitar <link> de este archivo en shorts-landing.html → la landing
   pierde animaciones pero queda 100% funcional con look base shorts.
   ═════════════════════════════════════════════════════════════════ */

/* ────────────────────────────── HERO ────────────────────────────── */

.lp-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.lp-hero::before {
    content: '';
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at var(--lp-mx, 30%) var(--lp-my, 30%),
            color-mix(in srgb, var(--accent) 35%, transparent), transparent 55%),
        radial-gradient(circle at 75% 70%,
            color-mix(in srgb, var(--accent) 22%, transparent), transparent 50%);
    filter: blur(40px);
    z-index: -1;
    animation: lp-hero-pulse 8s ease-in-out infinite alternate;
    transition: background 0.6s ease-out;
}

.lp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg,
            transparent 30%,
            color-mix(in srgb, var(--accent) 8%, transparent) 50%,
            transparent 70%);
    background-size: 200% 100%;
    animation: lp-hero-shine 6s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes lp-hero-pulse {
    from { transform: scale(1) rotate(0deg); opacity: .85; }
    to   { transform: scale(1.08) rotate(2deg); opacity: 1; }
}

@keyframes lp-hero-shine {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

/* CTA principal con conic-gradient rotando detrás */
.lp-hero-cta {
    position: relative;
    isolation: isolate;
}

.lp-hero-cta::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: conic-gradient(from 0deg,
        var(--accent),
        color-mix(in srgb, var(--accent) 50%, white),
        var(--accent),
        color-mix(in srgb, var(--accent) 30%, transparent),
        var(--accent));
    animation: lp-cta-spin 4s linear infinite;
    z-index: -1;
    filter: blur(2px);
}

/* El button background (var(--accent)) ya tapa el centro del conic-gradient.
   Solo los 3px sobresalidos del ::before se ven como borde rotativo.
   Cero ::after — evita doble-pintado opaco que ocultaba el button. */

@keyframes lp-cta-spin {
    to { transform: rotate(360deg); }
}

/* ─────────────────────────── GLASSMORPHISM ─────────────────────── */

.lp-glass {
    background: color-mix(in srgb, var(--card-bg) 65%, transparent);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, .25),
        inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
}

.lp-glass:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow:
        0 12px 40px color-mix(in srgb, var(--accent) 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 12%, transparent);
    transition: border-color .35s ease, box-shadow .35s ease;
}

/* ─────────────────────── SCROLL REVEAL ─────────────────────────── */

.lp-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.2, .8, .2, 1),
                transform .8s cubic-bezier(.2, .8, .2, 1);
    will-change: opacity, transform;
}

.lp-reveal.lp-in {
    opacity: 1;
    transform: translateY(0);
}

.lp-reveal[data-delay="1"] { transition-delay: .08s; }
.lp-reveal[data-delay="2"] { transition-delay: .16s; }
.lp-reveal[data-delay="3"] { transition-delay: .24s; }
.lp-reveal[data-delay="4"] { transition-delay: .32s; }

/* ─────────────────── ANIMATED GRADIENT TEXT ───────────────────── */

.lp-grad-text {
    background: linear-gradient(110deg,
        var(--accent) 0%,
        color-mix(in srgb, var(--accent) 60%, white) 50%,
        var(--accent) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: lp-grad-pan 5s ease-in-out infinite alternate;
}

@keyframes lp-grad-pan {
    from { background-position: 0% 0; }
    to   { background-position: 100% 0; }
}

/* ─────────────────────── ICONO FLOAT ─────────────────────────── */

.lp-float {
    animation: lp-float-anim 4s ease-in-out infinite alternate;
}

@keyframes lp-float-anim {
    from { transform: translateY(0); }
    to   { transform: translateY(-8px); }
}

/* ─────────────────── BORDE ACENTO ANIMADO ─────────────────────── */

.lp-accent-border {
    position: relative;
}

.lp-accent-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 70%, transparent),
        transparent 40%,
        color-mix(in srgb, var(--accent) 40%, transparent));
    -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;
    pointer-events: none;
}

/* ─────────────────── REDUCE MOTION OPT-OUT ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .lp-hero::before,
    .lp-hero::after,
    .lp-hero-cta::before,
    .lp-grad-text,
    .lp-float {
        animation: none !important;
    }
    .lp-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}