/* =========================================================
   JDK MODAL — 8 PREMIUM ENTRY ANIMATIONS
   
   CRITICAL: No 100vw/100vh in transform values.
   Use large px values (e.g. 2000px) instead of vw/vh
   to avoid triggering layout overflow in WordPress themes.
   ========================================================= */

/* ─────────────────────────────────────────────
   BASE: All animations start from opacity:0 on .jdk-modal-box
   The overlay handles its own fade via is-active class.
─────────────────────────────────────────────── */

/* Hide bond ball unless animation is bond-ball */
.jdk-modal-overlay:not(.jdk-anim-bond-ball) .jdk-bond-ball {
    display: none !important;
}

/* ─────────────────────────────────────────────
   1. BOND BALL
─────────────────────────────────────────────── */
.jdk-anim-bond-ball .jdk-bond-ball {
    display: block;
    position: absolute;
    top: 50%;
    right: -80px;
    width: 80px;
    height: 80px;
    background: var(--jdk-black, #1A1A1A);
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 10001;
    opacity: 0;
    pointer-events: none;
}
.jdk-anim-bond-ball.is-active .jdk-bond-ball {
    animation: jdkBondBall 0.8s cubic-bezier(0.4,0,0.2,1) forwards;
}
.jdk-anim-bond-ball.is-active .jdk-modal-box {
    animation: jdkBondExpand 0.8s cubic-bezier(0.4,0,0.2,1) 0.8s forwards;
}
@keyframes jdkBondBall {
    0%    { opacity: 1; right: -80px; }
    99%   { opacity: 1; right: calc(50% - 40px); }
    100%  { opacity: 0; right: calc(50% - 40px); }
}
@keyframes jdkBondExpand {
    0%   { opacity: 1; clip-path: circle(40px at 50% 50%); }
    100% { opacity: 1; clip-path: circle(150% at 50% 50%); }
}

/* ─────────────────────────────────────────────
   2. LIQUID MORPH
─────────────────────────────────────────────── */
.jdk-anim-liquid-morph.is-active .jdk-modal-box {
    animation: jdkLiquidMorph 0.9s cubic-bezier(0.23,1,0.32,1) forwards;
}
@keyframes jdkLiquidMorph {
    0%   { opacity:0; transform:translateY(60px) scaleX(0.4) scaleY(0.1); border-radius:50%; filter:blur(8px); }
    40%  { opacity:1; transform:translateY(10px) scaleX(1.04) scaleY(0.85); border-radius:40px; filter:blur(2px); }
    65%  { transform:translateY(-6px) scaleX(0.98) scaleY(1.04); border-radius:16px; }
    85%  { transform:translateY(3px) scaleX(1.01) scaleY(0.99); }
    100% { opacity:1; transform:translateY(0) scaleX(1) scaleY(1); border-radius:12px; filter:blur(0); }
}

/* ─────────────────────────────────────────────
   3. SHATTER IN
─────────────────────────────────────────────── */
.jdk-anim-shatter-in.is-active .jdk-modal-box {
    animation: jdkShatterIn 0.85s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes jdkShatterIn {
    0%   { opacity:0; transform:scale(1.4) rotate(4deg); filter:brightness(2) blur(4px); clip-path:polygon(10% 0%,90% 0%,100% 10%,100% 90%,90% 100%,10% 100%,0% 90%,0% 10%); }
    20%  { opacity:1; filter:brightness(1.6) blur(2px); }
    60%  { transform:scale(0.97) rotate(-1deg); filter:brightness(1.1); clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%); }
    100% { opacity:1; transform:scale(1) rotate(0deg); filter:brightness(1); clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%); }
}

/* ─────────────────────────────────────────────
   4. WARP GATE
─────────────────────────────────────────────── */
.jdk-anim-warp-gate.is-active .jdk-modal-box {
    animation: jdkWarpGate 0.9s cubic-bezier(0.22,1,0.36,1) forwards;
    transform-origin: top center;
}
@keyframes jdkWarpGate {
    0%   { opacity:0; transform:perspective(800px) rotateX(90deg) scaleY(0.1); filter:blur(10px) brightness(3); }
    30%  { opacity:1; filter:blur(3px) brightness(1.5); }
    65%  { transform:perspective(800px) rotateX(-5deg) scaleY(1.03); filter:blur(0); }
    85%  { transform:perspective(800px) rotateX(2deg) scaleY(0.99); }
    100% { opacity:1; transform:perspective(800px) rotateX(0deg) scaleY(1); filter:blur(0); }
}

/* ─────────────────────────────────────────────
   5. MAGNETIC PULL
   FIXED: replaced translateX(-100vw) with translateX(-2000px)
   to avoid triggering horizontal overflow in WordPress themes
─────────────────────────────────────────────── */
.jdk-anim-magnetic-pull.is-active .jdk-modal-box {
    animation: jdkMagneticPull 0.85s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes jdkMagneticPull {
    0%   { opacity:0; transform:translateX(-2000px) rotate(-12deg) scale(0.8); filter:blur(6px); }
    50%  { opacity:1; filter:blur(1px); }
    72%  { transform:translateX(16px) rotate(2deg) scale(1.02); }
    88%  { transform:translateX(-6px) rotate(-0.5deg) scale(0.99); }
    100% { opacity:1; transform:translateX(0) rotate(0deg) scale(1); filter:blur(0); }
}

/* ─────────────────────────────────────────────
   6. GLITCH ENTRY
─────────────────────────────────────────────── */
.jdk-anim-glitch-entry.is-active .jdk-modal-box {
    animation: jdkGlitchEntry 0.9s steps(1) forwards;
}
@keyframes jdkGlitchEntry {
    0%   { opacity:0; transform:translate(0,0); }
    5%   { opacity:1; transform:translate(-8px,4px) skewX(6deg); filter:hue-rotate(90deg) blur(2px); }
    10%  { transform:translate(8px,-4px) skewX(-6deg); filter:hue-rotate(180deg) blur(3px); }
    15%  { transform:translate(-4px,2px) skewX(3deg); filter:hue-rotate(270deg); }
    20%  { transform:translate(4px,0) skewX(0deg); filter:hue-rotate(0deg) blur(1px); }
    25%  { transform:translate(-12px,0) scaleX(1.04); filter:blur(4px) brightness(2); }
    35%  { transform:translate(0,0) scaleX(1); filter:blur(0) brightness(1); }
    45%  { transform:translate(3px,0) skewX(-2deg); filter:blur(1px); }
    55%  { transform:translate(-2px,0) skewX(1deg); }
    65%  { transform:translate(1px,0); }
    100% { opacity:1; transform:translate(0,0) skewX(0deg) scaleX(1); filter:none; }
}

/* ─────────────────────────────────────────────
   7. ORIGAMI UNFOLD
─────────────────────────────────────────────── */
.jdk-anim-origami-unfold.is-active .jdk-modal-box {
    animation: jdkOrigami 1s cubic-bezier(0.16,1,0.3,1) forwards;
    transform-origin: center center;
}
@keyframes jdkOrigami {
    0%   { opacity:0.8; transform:scale(0.05,0.05) rotate(45deg); clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%); filter:brightness(1.5); }
    20%  { opacity:1; transform:scale(0.3,0.15) rotate(30deg); clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%); }
    45%  { transform:scale(0.75,0.5) rotate(10deg); clip-path:polygon(10% 0%,90% 0%,100% 50%,90% 100%,10% 100%,0% 50%); filter:brightness(1.1); }
    70%  { transform:scale(1.03,0.97) rotate(-2deg); clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%); }
    85%  { transform:scale(0.99,1.02) rotate(0.5deg); }
    100% { opacity:1; transform:scale(1,1) rotate(0deg); clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%); filter:brightness(1); }
}

/* ─────────────────────────────────────────────
   8. RISE & BLUR
─────────────────────────────────────────────── */
.jdk-anim-rise-blur.is-active .jdk-modal-box {
    animation: jdkRiseBlur 0.75s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes jdkRiseBlur {
    0%   { opacity:0; transform:translateY(80px) scale(0.92); filter:blur(16px); }
    40%  { opacity:1; filter:blur(4px); }
    70%  { transform:translateY(-8px) scale(1.01); filter:blur(1px); }
    88%  { transform:translateY(4px) scale(0.995); }
    100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}