/* ========================================== */
/* CEPJK PREMIUM EFFECTS SYSTEM v1             */
/* Cohesionado · Sutil · Performant            */
/* ========================================== */

/* TIMING & VARIABLES */
:root {
    --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 220ms;
    --duration-base: 380ms;
    --duration-slow: 700ms;
}

/* ========================================== */
/* 1. CURSOR REACTIVO (DESKTOP ONLY)            */
/* ========================================== */
.cepjk-cursor-dot,
.cepjk-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    will-change: transform;
}
.cepjk-cursor-dot {
    width: 6px; height: 6px;
    background: var(--color-orange);
    transition: width 220ms var(--ease-premium), height 220ms var(--ease-premium), background 220ms ease;
    z-index: 9999;
}
.cepjk-cursor-ring {
    width: 32px; height: 32px;
    border: 1.5px solid rgba(255, 107, 53, 0.45);
    transition: width 280ms var(--ease-premium), height 280ms var(--ease-premium), border-color 280ms ease, background 280ms ease;
    backdrop-filter: blur(2px);
}
/* Cuando hover sobre clickable */
.cepjk-cursor-ring.is-hovering {
    width: 56px; height: 56px;
    border-color: rgba(255, 107, 53, 0.75);
    background: rgba(255, 107, 53, 0.06);
}
.cepjk-cursor-dot.is-hovering {
    width: 0; height: 0;
}
/* Estado activo (clic) */
.cepjk-cursor-ring.is-active {
    width: 24px; height: 24px;
    background: rgba(255, 107, 53, 0.18);
}
/* Solo desktop con puntero fino */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
    .cepjk-cursor-dot, .cepjk-cursor-ring { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .cepjk-cursor-dot, .cepjk-cursor-ring { display: none !important; }
}

/* ========================================== */
/* 2. SHINE EN CARDS (BRILLO DIRECCIONAL)       */
/* ========================================== */
[data-shine] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
[data-shine]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
        circle 280px at var(--shine-x, 50%) var(--shine-y, 50%),
        rgba(255, 107, 53, 0.12) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 450ms var(--ease-premium);
}
[data-shine]:hover::before {
    opacity: 1;
}
[data-shine] > * {
    position: relative;
    z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
    [data-shine]::before { display: none; }
}

/* ========================================== */
/* 3. MAGNETIC BUTTONS                          */
/* ========================================== */
[data-magnetic] {
    transition: transform 280ms var(--ease-premium);
    will-change: transform;
}
@media (hover: none), (pointer: coarse) {
    [data-magnetic] { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    [data-magnetic] { transform: none !important; }
}

/* ========================================== */
/* 4. KEN BURNS EN HEROS CON FOTO               */
/* ========================================== */
.kenburns {
    animation: kenburnsZoom 22s ease-in-out infinite alternate;
    transform-origin: center;
}
@keyframes kenburnsZoom {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.08) translate(-2%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
    .kenburns { animation: none !important; }
}

/* ========================================== */
/* 5. GLOW EN FOCUS (ACCESIBILIDAD PREMIUM)     */
/* ========================================== */
a:focus-visible, button:focus-visible, summary:focus-visible,
[role="button"]:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px white,
        0 0 0 4px var(--color-orange),
        0 0 18px rgba(255, 107, 53, 0.4);
    border-radius: 6px;
    transition: box-shadow 200ms var(--ease-premium);
}

/* ========================================== */
/* 6. STAGGER REVEAL (mejorado)                 */
/* ========================================== */
.cepjk-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms var(--ease-premium), transform 700ms var(--ease-premium);
}
.cepjk-reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}
.cepjk-stagger > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 600ms var(--ease-premium), transform 600ms var(--ease-premium);
}
.cepjk-stagger.in-view > *:nth-child(1)  { transition-delay: 0ms;   opacity: 1; transform: none; }
.cepjk-stagger.in-view > *:nth-child(2)  { transition-delay: 80ms;  opacity: 1; transform: none; }
.cepjk-stagger.in-view > *:nth-child(3)  { transition-delay: 160ms; opacity: 1; transform: none; }
.cepjk-stagger.in-view > *:nth-child(4)  { transition-delay: 240ms; opacity: 1; transform: none; }
.cepjk-stagger.in-view > *:nth-child(5)  { transition-delay: 320ms; opacity: 1; transform: none; }
.cepjk-stagger.in-view > *:nth-child(6)  { transition-delay: 400ms; opacity: 1; transform: none; }
.cepjk-stagger.in-view > *:nth-child(7)  { transition-delay: 480ms; opacity: 1; transform: none; }
.cepjk-stagger.in-view > *:nth-child(8)  { transition-delay: 560ms; opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .cepjk-reveal, .cepjk-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ========================================== */
/* 7. PAGE TRANSITION (FADE-OUT INTERNO)        */
/* ========================================== */
body.cepjk-leaving {
    opacity: 0;
    transition: opacity 200ms var(--ease-premium);
}
@media (prefers-reduced-motion: reduce) {
    body.cepjk-leaving { transition: none !important; opacity: 1 !important; }
}

/* ========================================== */
/* 8. TILT 3D EN CARDS                          */
/* ========================================== */
[data-tilt] {
    transform-style: preserve-3d;
    transition: transform 380ms var(--ease-premium);
    will-change: transform;
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    [data-tilt] { transform: none !important; }
}

/* ========================================== */
/* 9. UNDERLINE ANIMADO EN LINKS DEL CONTENIDO  */
/* ========================================== */
.post-content a:not(.btn):not(.related-card),
.cepjk-link {
    background-image: linear-gradient(transparent calc(100% - 1px), var(--color-orange) 1px);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    transition: background-size 380ms var(--ease-premium);
    text-decoration: none !important;
}
.post-content a:not(.btn):not(.related-card):hover,
.cepjk-link:hover {
    background-size: 100% 100%;
}

/* ========================================== */
/* 10. SCROLL-DRIVEN SECTION HEADERS            */
/* ========================================== */
.cepjk-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 800ms var(--ease-premium), transform 800ms var(--ease-premium);
}
.cepjk-fade-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================== */
/* 11. NÚMEROS TIPO COUNTER CON OVERSHOOT       */
/* ========================================== */
[data-counter-target].counted {
    animation: counterOvershoot 600ms var(--ease-overshoot);
}
@keyframes counterOvershoot {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ========================================== */
/* 12. AURORA — degradado animado para fondos   */
/* ========================================== */
.cepjk-aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.cepjk-aurora::before,
.cepjk-aurora::after {
    content: '';
    position: absolute;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    will-change: transform;
}
.cepjk-aurora::before {
    background: radial-gradient(circle, var(--color-orange) 0%, transparent 70%);
    top: -20%;
    left: -10%;
    animation: auroraDrift1 28s ease-in-out infinite;
}
.cepjk-aurora::after {
    background: radial-gradient(circle, #FF8B5A 0%, transparent 70%);
    bottom: -20%;
    right: -10%;
    animation: auroraDrift2 32s ease-in-out infinite;
}
@keyframes auroraDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(15vw, 5vh) scale(1.15); }
}
@keyframes auroraDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-12vw, -8vh) scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
    .cepjk-aurora::before, .cepjk-aurora::after { animation: none !important; }
}

/* ========================================== */
/* 13. NOISE TEXTURE                            */
/* ========================================== */
.cepjk-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* ========================================== */
/* 14. SHIMMER EFFECT EN BOTONES PRIMARIOS      */
/* ========================================== */
.btn-primary[data-shimmer] {
    position: relative;
    overflow: hidden;
}
.btn-primary[data-shimmer]::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(
        110deg,
        transparent 25%,
        rgba(255,255,255,0.45) 50%,
        transparent 75%
    );
    pointer-events: none;
    animation: btnShimmer 5s ease-in-out infinite;
}
@keyframes btnShimmer {
    0%, 80%, 100% { left: -100%; }
    90%           { left: 200%; }
}
@media (prefers-reduced-motion: reduce) {
    .btn-primary[data-shimmer]::after { animation: none !important; }
}

/* ========================================== */
/* 15. PARALLAX SCROLL (VIA DATA-PARALLAX)      */
/* ========================================== */
[data-parallax] {
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    [data-parallax] { transform: none !important; }
}