/* ==========================================================================
   Jesuspended Countdown Timer — Frontend Styles
   iOS-inspired design with liquid glass effects
   ========================================================================== */

/* ---------- CSS Variables ---------- */
:root {
    --jct-block-gap: 16px;
    --jct-transition-speed: 0.6s;
    --jct-glass-bg: rgba(255, 255, 255, 0.12);
    --jct-glass-border: rgba(255, 255, 255, 0.18);
    --jct-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* ---------- Base Widget ---------- */
.jct-countdown-wrap {
    position: relative;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.4;
    box-sizing: border-box;
    /* iOS Safari border-radius + overflow fix */
    -webkit-border-radius: inherit;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform: translateZ(0);
    isolation: isolate;
}

.jct-countdown-wrap *,
.jct-countdown-wrap *::before,
.jct-countdown-wrap *::after {
    box-sizing: border-box;
}

/* ---------- Background Layers ---------- */
.jct-bg-image-layer {
    position: absolute;
    inset: -10px;
    z-index: 0;
    pointer-events: none;
}

.jct-overlay-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.jct-ios-blur-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.05);
}

.jct-content-layer {
    position: relative;
    z-index: 3;
}

/* ---------- Alignment ---------- */
.jct-align-center { text-align: center; }
.jct-align-left { text-align: left; }
.jct-align-right { text-align: right; }

.jct-align-center .jct-timer-display { justify-content: center; }
.jct-align-left .jct-timer-display { justify-content: flex-start; }
.jct-align-right .jct-timer-display { justify-content: flex-end; }

/* ---------- Position ---------- */
.jct-position-top-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    border-radius: 0 !important;
}

.jct-position-bottom-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    border-radius: 0 !important;
}

/* ---------- Timer Display Grid ---------- */
.jct-timer-display {
    display: flex;
    align-items: center;
    gap: var(--jct-block-gap);
    flex-wrap: nowrap;
    padding: 8px 0;
}

/* ---------- Unit Block ---------- */
.jct-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}

.jct-block {
    position: relative;
    overflow: hidden;
    min-width: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.jct-number-wrap {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jct-number {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
    display: block;
    text-align: center;
    min-width: 1.5em;
}

.jct-number-next {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

.jct-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* ---------- Separator ---------- */
.jct-separator {
    font-size: 2em;
    font-weight: 300;
    line-height: 1;
    opacity: 0.7;
    padding-bottom: 24px;
    flex-shrink: 0;
    animation: jct-separator-pulse 1s ease-in-out infinite;
}

@keyframes jct-separator-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.3; }
}

/* ---------- Messages ---------- */
.jct-message {
    margin: 12px 0;
}

.jct-message-before {
    margin-bottom: 16px;
}

.jct-message-after {
    margin-top: 16px;
}

/* ---------- Button ---------- */
.jct-button-wrap {
    margin-top: 20px;
}

.jct-button {
    display: inline-block;
    padding: 12px 32px;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
}

.jct-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    filter: brightness(1.1);
}

.jct-button:active {
    transform: translateY(0);
}

/* ---------- Coupon Code ---------- */
.jct-coupon-wrap {
    margin-top: 20px;
}

.jct-coupon-label {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.75;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.jct-coupon-box {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.jct-coupon-box:hover {
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.jct-coupon-box:active {
    transform: translateY(0) scale(0.98);
}

.jct-coupon-code {
    padding: 10px 18px;
    font-weight: 700;
    font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
    letter-spacing: 0.12em;
    user-select: all;
    -webkit-user-select: all;
}

.jct-coupon-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    color: inherit;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 14px;
    line-height: 1;
}

.jct-coupon-copy-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

.jct-coupon-copy-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Copied state */
.jct-coupon-box.jct-copied .jct-coupon-copy-btn svg.jct-icon-copy {
    display: none;
}

.jct-coupon-copy-btn svg.jct-icon-check {
    display: none;
}

.jct-coupon-box.jct-copied .jct-coupon-copy-btn svg.jct-icon-check {
    display: block;
    stroke: #22c55e;
}

.jct-coupon-copied-toast {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: #22c55e;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, top 0.2s;
}

.jct-coupon-box.jct-copied .jct-coupon-copied-toast {
    opacity: 1;
    top: -36px;
}

/* ---------- Expire Message ---------- */
.jct-expire-message {
    font-weight: 500;
    padding: 20px;
    text-align: center;
}


/* ==========================================================================
   ANIMATIONS — iOS INSPIRED
   ========================================================================== */

/* ==========================================================================
   1. LIQUID GLASS — blur morph + shimmer sweep
   ========================================================================== */
.jct-anim-liquid-glass .jct-block {
    position: relative;
}

/* Radial glow on change */
.jct-anim-liquid-glass .jct-block::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(
        ellipse at 50% 50%,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.08) 40%,
        transparent 70%
    );
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.jct-anim-liquid-glass .jct-block.jct-animating::before {
    opacity: 1;
}

/* Current number — slides up and blurs out */
.jct-anim-liquid-glass .jct-block.jct-animating .jct-number-current {
    animation: jct-liquid-current 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* Next number — slides in from below with blur */
.jct-anim-liquid-glass .jct-block.jct-animating .jct-number-next {
    animation: jct-liquid-next 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes jct-liquid-current {
    0%   { transform: translateY(0) scale(1); filter: blur(0px); opacity: 1; }
    40%  { filter: blur(6px); opacity: 0.6; }
    100% { transform: translateY(-100%) scale(0.85); filter: blur(12px); opacity: 0; }
}

@keyframes jct-liquid-next {
    0%   { transform: translateY(100%) scale(0.85); filter: blur(12px); opacity: 0; }
    40%  { filter: blur(6px); opacity: 0.6; }
    100% { transform: translateY(0) scale(1); filter: blur(0px); opacity: 1; }
}

/* Shimmer sweep */
.jct-anim-liquid-glass .jct-block::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.1) 45%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.1) 55%,
        transparent 60%
    );
    transform: translateX(-100%);
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
}

.jct-anim-liquid-glass .jct-block.jct-animating::after {
    animation: jct-glass-shimmer 0.8s ease-out forwards;
}

@keyframes jct-glass-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}


/* ==========================================================================
   2. MORPHING BLUR — soft gaussian dissolve (like iOS widget transitions)
   ========================================================================== */
.jct-anim-morphing-blur .jct-block.jct-animating .jct-number-current {
    animation: jct-morph-out 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.jct-anim-morphing-blur .jct-block.jct-animating .jct-number-next {
    animation: jct-morph-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes jct-morph-out {
    0%   { filter: blur(0px); opacity: 1; transform: scale(1); }
    50%  { filter: blur(8px); opacity: 0.4; transform: scale(1.04); }
    100% { filter: blur(16px); opacity: 0; transform: scale(1.08); }
}

@keyframes jct-morph-in {
    0%   { filter: blur(16px); opacity: 0; transform: scale(0.92); }
    50%  { filter: blur(8px); opacity: 0.4; transform: scale(0.96); }
    100% { filter: blur(0px); opacity: 1; transform: scale(1); }
}

/* Subtle glow pulse on block */
.jct-anim-morphing-blur .jct-block {
    transition: box-shadow 0.5s ease;
}

.jct-anim-morphing-blur .jct-block.jct-animating {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.08), inset 0 0 20px rgba(255, 255, 255, 0.04);
}


/* ==========================================================================
   3. SPRING BOUNCE — iOS spring physics with natural overshoot
   ========================================================================== */
.jct-anim-spring-bounce .jct-block.jct-animating .jct-number-current {
    animation: jct-spring-out 0.35s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

.jct-anim-spring-bounce .jct-block.jct-animating .jct-number-next {
    animation: jct-spring-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes jct-spring-out {
    0%   { transform: translateY(0) scale(1); opacity: 1; filter: blur(0px); }
    60%  { transform: translateY(-30%) scale(0.9); opacity: 0.5; filter: blur(2px); }
    100% { transform: translateY(-80%) scale(0.8); opacity: 0; filter: blur(4px); }
}

@keyframes jct-spring-in {
    0%   { transform: translateY(80%) scale(0.8); opacity: 0; filter: blur(4px); }
    50%  { transform: translateY(-8%) scale(1.04); opacity: 0.8; filter: blur(1px); }
    70%  { transform: translateY(3%) scale(0.99); opacity: 0.95; filter: blur(0px); }
    85%  { transform: translateY(-1%) scale(1.01); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Block subtle scale spring */
.jct-anim-spring-bounce .jct-block.jct-animating {
    animation: jct-spring-block 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes jct-spring-block {
    0%   { transform: scale(1); }
    30%  { transform: scale(0.96); }
    60%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}


/* ==========================================================================
   4. DEPTH SHIFT — 3D z-axis push (like iOS app switcher)
   ========================================================================== */
.jct-anim-depth-shift .jct-block {
    perspective: 600px;
    transform-style: preserve-3d;
}

.jct-anim-depth-shift .jct-block.jct-animating .jct-number-current {
    animation: jct-depth-out 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.jct-anim-depth-shift .jct-block.jct-animating .jct-number-next {
    animation: jct-depth-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes jct-depth-out {
    0%   { transform: translateZ(0px) translateY(0); filter: blur(0px); opacity: 1; }
    50%  { transform: translateZ(-60px) translateY(-20%); filter: blur(3px); opacity: 0.5; }
    100% { transform: translateZ(-120px) translateY(-50%); filter: blur(8px); opacity: 0; }
}

@keyframes jct-depth-in {
    0%   { transform: translateZ(80px) translateY(50%); filter: blur(8px); opacity: 0; }
    50%  { transform: translateZ(20px) translateY(10%); filter: blur(3px); opacity: 0.5; }
    100% { transform: translateZ(0px) translateY(0); filter: blur(0px); opacity: 1; }
}

/* Shadow depth cue */
.jct-anim-depth-shift .jct-block.jct-animating {
    animation: jct-depth-shadow 0.5s ease;
}

@keyframes jct-depth-shadow {
    0%   { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    50%  { box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
    100% { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
}


/* ==========================================================================
   5. SMOOTH SCALE — elegant breathe in/out
   ========================================================================== */
.jct-anim-smooth-scale .jct-block.jct-animating .jct-number-current {
    animation: jct-scale-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.jct-anim-smooth-scale .jct-block.jct-animating .jct-number-next {
    animation: jct-scale-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes jct-scale-out {
    0%   { transform: scale(1); filter: blur(0px); opacity: 1; }
    100% { transform: scale(0.6); filter: blur(4px); opacity: 0; }
}

@keyframes jct-scale-in {
    0%   { transform: scale(1.4); filter: blur(4px); opacity: 0; }
    100% { transform: scale(1); filter: blur(0px); opacity: 1; }
}

/* Soft glow ring */
.jct-anim-smooth-scale .jct-block::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px solid rgba(255, 255, 255, 0);
    transition: border-color 0.3s ease;
    pointer-events: none;
}

.jct-anim-smooth-scale .jct-block.jct-animating::after {
    animation: jct-scale-ring 0.5s ease;
}

@keyframes jct-scale-ring {
    0%   { border-color: rgba(255,255,255,0); }
    40%  { border-color: rgba(255,255,255,0.2); }
    100% { border-color: rgba(255,255,255,0); }
}


/* ==========================================================================
   6. ELASTIC POP — playful snap
   ========================================================================== */
.jct-anim-elastic-pop .jct-block.jct-animating .jct-number-current {
    animation: jct-elastic-out 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

.jct-anim-elastic-pop .jct-block.jct-animating .jct-number-next {
    animation: jct-elastic-in 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes jct-elastic-out {
    0%   { transform: scale(1) rotate(0deg); opacity: 1; }
    50%  { transform: scale(1.15) rotate(-2deg); opacity: 0.6; }
    100% { transform: scale(0) rotate(-5deg); opacity: 0; }
}

@keyframes jct-elastic-in {
    0%   { transform: scale(0) rotate(5deg); opacity: 0; }
    40%  { transform: scale(1.15) rotate(-1deg); opacity: 0.8; }
    60%  { transform: scale(0.95) rotate(0.5deg); opacity: 0.95; }
    80%  { transform: scale(1.02) rotate(0deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Pop ripple */
.jct-anim-elastic-pop .jct-block::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
    z-index: 1;
}

.jct-anim-elastic-pop .jct-block.jct-animating::before {
    animation: jct-pop-ripple 0.5s ease-out;
}

@keyframes jct-pop-ripple {
    0%   { opacity: 0.6; transform: scale(0.5); }
    100% { opacity: 0; transform: scale(1.5); }
}


/* ==========================================================================
   7. CASCADE — staggered wave across blocks (iOS notification style)
   Stagger is handled in JS via data-jct-unit-index
   ========================================================================== */
.jct-anim-cascade .jct-block.jct-animating .jct-number-current {
    animation: jct-cascade-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.jct-anim-cascade .jct-block.jct-animating .jct-number-next {
    animation: jct-cascade-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes jct-cascade-out {
    0%   { transform: translateY(0) scale(1); filter: blur(0px); opacity: 1; }
    100% { transform: translateY(-60%) scale(0.9); filter: blur(6px); opacity: 0; }
}

@keyframes jct-cascade-in {
    0%   { transform: translateY(60%) scale(0.9); filter: blur(6px); opacity: 0; }
    100% { transform: translateY(0) scale(1); filter: blur(0px); opacity: 1; }
}

/* Wave lift on the block */
.jct-anim-cascade .jct-block.jct-animating {
    animation: jct-cascade-lift 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes jct-cascade-lift {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

/* Stagger delays (set by JS inline style, but provide fallback via :nth-child) */
.jct-anim-cascade .jct-unit:nth-child(1) .jct-block.jct-animating { animation-delay: 0ms; }
.jct-anim-cascade .jct-unit:nth-child(2) .jct-block.jct-animating { animation-delay: 60ms; }
.jct-anim-cascade .jct-unit:nth-child(3) .jct-block.jct-animating { animation-delay: 120ms; }
.jct-anim-cascade .jct-unit:nth-child(4) .jct-block.jct-animating { animation-delay: 180ms; }


/* ==========================================================================
   CLASSIC ANIMATIONS (polished)
   ========================================================================== */

/* ---------- Flip ---------- */
.jct-anim-flip .jct-block {
    perspective: 400px;
}

.jct-anim-flip .jct-block.jct-animating .jct-number-current {
    animation: jct-flip-out 0.5s ease-in forwards;
    transform-origin: bottom center;
}

.jct-anim-flip .jct-block.jct-animating .jct-number-next {
    animation: jct-flip-in 0.5s ease-out 0.25s forwards;
    transform-origin: top center;
}

@keyframes jct-flip-out {
    0%   { transform: rotateX(0deg); opacity: 1; }
    100% { transform: rotateX(-90deg); opacity: 0; }
}

@keyframes jct-flip-in {
    0%   { transform: rotateX(90deg); opacity: 0; }
    100% { transform: rotateX(0deg); opacity: 1; }
}

/* ---------- Slide ---------- */
.jct-anim-slide .jct-block.jct-animating .jct-number-current {
    animation: jct-slide-out 0.4s ease-in forwards;
}

.jct-anim-slide .jct-block.jct-animating .jct-number-next {
    animation: jct-slide-in 0.4s ease-out forwards;
}

@keyframes jct-slide-out {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-120%); opacity: 0; }
}

@keyframes jct-slide-in {
    0%   { transform: translateY(120%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ---------- Fade ---------- */
.jct-anim-fade .jct-block.jct-animating .jct-number-current {
    animation: jct-fade-out 0.3s ease forwards;
}

.jct-anim-fade .jct-block.jct-animating .jct-number-next {
    animation: jct-fade-in 0.3s ease 0.15s forwards;
}

@keyframes jct-fade-out {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.8); }
}

@keyframes jct-fade-in {
    0%   { opacity: 0; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}


/* ==========================================================================
   STYLE PRESETS
   ========================================================================== */

/* ---------- Glass Blocks (Default) ---------- */
.jct-style-glass-blocks .jct-block {
    background: var(--jct-glass-bg);
    border: 1px solid var(--jct-glass-border);
    box-shadow: var(--jct-glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ---------- Clean ---------- */
.jct-style-clean .jct-block {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* ---------- Separated Blocks ---------- */
.jct-style-separated-blocks .jct-block {
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ---------- Gradient Blocks ---------- */
.jct-style-gradient-blocks .jct-block {
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ---------- Outline Blocks ---------- */
.jct-style-outline-blocks .jct-block {
    background: transparent;
    border: 2px solid currentColor;
    box-shadow: none;
}

/* ---------- Minimal ---------- */
.jct-style-minimal .jct-block {
    background: transparent;
    border: none;
    box-shadow: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 0 !important;
}


/* ==========================================================================
   ANIMATED BACKGROUNDS — iOS Liquid Glass Style
   ========================================================================== */

/* Shared container for animated bg */
.jct-animated-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Each blob is a soft radial gradient that floats around */
.jct-animated-bg-layer .jct-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 1;
    will-change: transform;
    mix-blend-mode: screen;
}

/* ---- 1. Liquid Glass — soft blue/purple/teal fluid motion ---- */
.jct-abg-liquid-glass .jct-blob:nth-child(1) {
    width: 60%; height: 60%; top: -10%; left: -10%;
    background: radial-gradient(circle, rgba(99,102,241,0.8), transparent 70%);
    animation: jct-blob-float-1 12s ease-in-out infinite;
}
.jct-abg-liquid-glass .jct-blob:nth-child(2) {
    width: 50%; height: 50%; bottom: -10%; right: -10%;
    background: radial-gradient(circle, rgba(139,92,246,0.7), transparent 70%);
    animation: jct-blob-float-2 15s ease-in-out infinite;
}
.jct-abg-liquid-glass .jct-blob:nth-child(3) {
    width: 45%; height: 45%; top: 40%; left: 30%;
    background: radial-gradient(circle, rgba(59,130,246,0.6), transparent 70%);
    animation: jct-blob-float-3 18s ease-in-out infinite;
}
.jct-abg-liquid-glass .jct-blob:nth-child(4) {
    width: 35%; height: 35%; top: 10%; right: 20%;
    background: radial-gradient(circle, rgba(45,212,191,0.5), transparent 70%);
    animation: jct-blob-float-4 14s ease-in-out infinite;
}

/* ---- 2. Aurora — green/teal/blue northern lights ---- */
.jct-abg-aurora .jct-blob:nth-child(1) {
    width: 80%; height: 40%; top: 0; left: -20%;
    background: radial-gradient(ellipse, rgba(52,211,153,0.8), transparent 70%);
    animation: jct-blob-aurora-1 10s ease-in-out infinite;
}
.jct-abg-aurora .jct-blob:nth-child(2) {
    width: 70%; height: 50%; top: 20%; right: -20%;
    background: radial-gradient(ellipse, rgba(56,189,248,0.7), transparent 70%);
    animation: jct-blob-aurora-2 14s ease-in-out infinite;
}
.jct-abg-aurora .jct-blob:nth-child(3) {
    width: 60%; height: 35%; bottom: 0; left: 10%;
    background: radial-gradient(ellipse, rgba(16,185,129,0.6), transparent 70%);
    animation: jct-blob-aurora-3 12s ease-in-out infinite;
}
.jct-abg-aurora .jct-blob:nth-child(4) {
    width: 40%; height: 40%; top: 50%; left: 50%;
    background: radial-gradient(circle, rgba(34,211,238,0.5), transparent 70%);
    animation: jct-blob-float-2 16s ease-in-out infinite;
}

/* ---- 3. Sunset — warm orange/pink/red flow ---- */
.jct-abg-sunset .jct-blob { mix-blend-mode: normal; }
.jct-abg-sunset .jct-blob:nth-child(1) {
    width: 55%; height: 55%; top: -15%; left: -5%;
    background: radial-gradient(circle, rgba(251,113,133,0.8), transparent 70%);
    animation: jct-blob-float-1 11s ease-in-out infinite;
}
.jct-abg-sunset .jct-blob:nth-child(2) {
    width: 50%; height: 50%; bottom: -15%; right: -5%;
    background: radial-gradient(circle, rgba(249,115,22,0.7), transparent 70%);
    animation: jct-blob-float-3 14s ease-in-out infinite;
}
.jct-abg-sunset .jct-blob:nth-child(3) {
    width: 45%; height: 45%; top: 30%; left: 40%;
    background: radial-gradient(circle, rgba(244,63,94,0.6), transparent 70%);
    animation: jct-blob-float-2 17s ease-in-out infinite;
}
.jct-abg-sunset .jct-blob:nth-child(4) {
    width: 35%; height: 35%; top: 5%; right: 15%;
    background: radial-gradient(circle, rgba(253,186,116,0.5), transparent 70%);
    animation: jct-blob-float-4 13s ease-in-out infinite;
}

/* ---- 4. Nebula — deep purple/pink cosmic ---- */
.jct-abg-nebula .jct-blob:nth-child(1) {
    width: 65%; height: 65%; top: -20%; left: -15%;
    background: radial-gradient(circle, rgba(168,85,247,0.8), transparent 70%);
    animation: jct-blob-float-3 13s ease-in-out infinite;
}
.jct-abg-nebula .jct-blob:nth-child(2) {
    width: 55%; height: 55%; bottom: -15%; right: -10%;
    background: radial-gradient(circle, rgba(236,72,153,0.7), transparent 70%);
    animation: jct-blob-float-1 16s ease-in-out infinite;
}
.jct-abg-nebula .jct-blob:nth-child(3) {
    width: 40%; height: 40%; top: 25%; left: 50%;
    background: radial-gradient(circle, rgba(99,102,241,0.65), transparent 70%);
    animation: jct-blob-float-4 11s ease-in-out infinite;
}
.jct-abg-nebula .jct-blob:nth-child(4) {
    width: 35%; height: 35%; bottom: 20%; left: 5%;
    background: radial-gradient(circle, rgba(217,70,239,0.5), transparent 70%);
    animation: jct-blob-float-2 15s ease-in-out infinite;
}

/* ---- 5. Ocean — deep blue/teal underwater ---- */
.jct-abg-ocean .jct-blob:nth-child(1) {
    width: 60%; height: 60%; top: -10%; left: -15%;
    background: radial-gradient(circle, rgba(6,182,212,0.8), transparent 70%);
    animation: jct-blob-float-2 12s ease-in-out infinite;
}
.jct-abg-ocean .jct-blob:nth-child(2) {
    width: 55%; height: 55%; bottom: -15%; right: -10%;
    background: radial-gradient(circle, rgba(37,99,235,0.7), transparent 70%);
    animation: jct-blob-float-1 15s ease-in-out infinite;
}
.jct-abg-ocean .jct-blob:nth-child(3) {
    width: 45%; height: 45%; top: 35%; left: 25%;
    background: radial-gradient(circle, rgba(14,165,233,0.6), transparent 70%);
    animation: jct-blob-float-3 18s ease-in-out infinite;
}
.jct-abg-ocean .jct-blob:nth-child(4) {
    width: 30%; height: 30%; top: 0; right: 20%;
    background: radial-gradient(circle, rgba(34,211,238,0.5), transparent 70%);
    animation: jct-blob-float-4 14s ease-in-out infinite;
}

/* ---- 6. Lava — fiery red/orange/yellow ---- */
.jct-abg-lava .jct-blob { mix-blend-mode: normal; }
.jct-abg-lava .jct-blob:nth-child(1) {
    width: 55%; height: 55%; top: -10%; left: -10%;
    background: radial-gradient(circle, rgba(239,68,68,0.8), transparent 70%);
    animation: jct-blob-float-1 10s ease-in-out infinite;
}
.jct-abg-lava .jct-blob:nth-child(2) {
    width: 50%; height: 50%; bottom: -10%; right: -5%;
    background: radial-gradient(circle, rgba(245,158,11,0.7), transparent 70%);
    animation: jct-blob-float-3 13s ease-in-out infinite;
}
.jct-abg-lava .jct-blob:nth-child(3) {
    width: 40%; height: 40%; top: 40%; left: 30%;
    background: radial-gradient(circle, rgba(234,88,12,0.65), transparent 70%);
    animation: jct-blob-float-2 16s ease-in-out infinite;
}
.jct-abg-lava .jct-blob:nth-child(4) {
    width: 30%; height: 30%; top: 10%; right: 25%;
    background: radial-gradient(circle, rgba(252,211,77,0.5), transparent 70%);
    animation: jct-blob-float-4 12s ease-in-out infinite;
}

/* ---- 7. Beach — blurred liquid-glass seaside, clearly animated ---- */
/* Saturated sky / turquoise sea / golden sand so the scene reads with real
   contrast (not washed out). Clouds drift across the sky, sun glints shimmer
   on the water and palm silhouettes sway — all softly blurred like frosted
   glass. Normal blending keeps the moving elements visible. */
.jct-abg-beach {
    background: linear-gradient(to bottom,
        #1f8fd0 0%,
        #45acdf 22%,
        #7fcfee 38%,
        #a7e4f4 43%,
        #18a6bd 49%,
        #0b8197 60%,
        #0a7185 63%,
        #e6c06a 65%,
        #f2d585 80%,
        #f7e0a0 100%);
}
.jct-abg-beach .jct-blob {
    mix-blend-mode: normal;
    border-radius: 50%;
}
/* 1 & 2 — drifting clouds that cross the whole sky (obvious motion) */
.jct-abg-beach .jct-blob:nth-child(1) {
    width: 50%; height: 20%; top: 6%; left: 0;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 70%);
    filter: blur(22px);
    animation: jct-beach-cloud-a 26s linear infinite;
}
.jct-abg-beach .jct-blob:nth-child(2) {
    width: 38%; height: 15%; top: 20%; left: 0;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 70%);
    filter: blur(20px);
    animation: jct-beach-cloud-b 38s linear infinite;
}
/* 3 — sun glitter shimmering across the water (screen blend = sparkle) */
.jct-abg-beach .jct-blob:nth-child(3) {
    width: 55%; height: 13%; top: 51%; left: 22%;
    background: radial-gradient(ellipse at center, rgba(255,250,210,0.9) 0%, rgba(255,250,210,0) 72%);
    filter: blur(12px);
    mix-blend-mode: screen;
    animation: jct-beach-shimmer 7s ease-in-out infinite;
}
/* 4 — warm light blooming over the sand */
.jct-abg-beach .jct-blob:nth-child(4) {
    width: 65%; height: 32%; bottom: -10%; left: 15%;
    background: radial-gradient(ellipse at center, rgba(255,221,140,0.55) 0%, rgba(255,221,140,0) 70%);
    filter: blur(36px);
    animation: jct-blob-float-4 16s ease-in-out infinite;
}
/* Sun — warm golden glow, gently pulsing (sits behind the clouds) */
.jct-abg-beach::before {
    content: "";
    position: absolute;
    width: 34%; height: 34%;
    top: 5%; right: 13%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,243,196,0.95) 0%, rgba(255,209,116,0.6) 40%, rgba(255,190,90,0) 72%);
    filter: blur(10px);
    transform-origin: center;
    animation: jct-beach-sun 9s ease-in-out infinite;
}
/* Palm / tree silhouettes — blurred, swaying in the breeze */
.jct-abg-beach::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(56% 48% at 5% 105%, rgba(9,74,58,0.92) 0%, rgba(9,74,58,0) 60%),
        radial-gradient(22% 27% at 12% 56%, rgba(14,96,72,0.85) 0%, rgba(14,96,72,0) 58%),
        radial-gradient(15% 20% at 1% 60%, rgba(14,96,72,0.78) 0%, transparent 58%),
        radial-gradient(19% 24% at 21% 62%, rgba(18,110,82,0.62) 0%, transparent 58%),
        radial-gradient(52% 46% at 98% 107%, rgba(8,66,52,0.92) 0%, transparent 60%),
        radial-gradient(21% 26% at 93% 54%, rgba(16,104,78,0.82) 0%, transparent 58%),
        radial-gradient(15% 19% at 100% 60%, rgba(16,104,78,0.74) 0%, transparent 58%);
    filter: blur(9px);
    transform-origin: bottom center;
    animation: jct-beach-sway 8s ease-in-out infinite;
}

/* ---- Blob float keyframes — organic iOS-like motion ---- */
@keyframes jct-blob-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(15%, 20%) scale(1.1); }
    50%  { transform: translate(-10%, 30%) scale(0.95); }
    75%  { transform: translate(20%, -10%) scale(1.05); }
}

@keyframes jct-blob-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(-20%, 15%) scale(1.05); }
    50%  { transform: translate(15%, -20%) scale(1.1); }
    75%  { transform: translate(-10%, -15%) scale(0.9); }
}

@keyframes jct-blob-float-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(25%, -15%) scale(1.15); }
    66%  { transform: translate(-20%, 20%) scale(0.9); }
}

@keyframes jct-blob-float-4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20%  { transform: translate(-15%, -20%) scale(1.1); }
    40%  { transform: translate(20%, 10%) scale(0.95); }
    60%  { transform: translate(-10%, 25%) scale(1.05); }
    80%  { transform: translate(15%, -10%) scale(1); }
}

@keyframes jct-blob-aurora-1 {
    0%, 100% { transform: translateX(0) scaleX(1); opacity: 0.7; }
    33%  { transform: translateX(20%) scaleX(1.3); opacity: 0.9; }
    66%  { transform: translateX(-10%) scaleX(0.8); opacity: 0.6; }
}

@keyframes jct-blob-aurora-2 {
    0%, 100% { transform: translateX(0) scaleY(1); opacity: 0.6; }
    50%  { transform: translateX(-15%) scaleY(1.4); opacity: 0.8; }
}

@keyframes jct-blob-aurora-3 {
    0%, 100% { transform: translateX(0) scaleX(1); opacity: 0.6; }
    33%  { transform: translateX(-20%) scaleX(1.2); opacity: 0.8; }
    66%  { transform: translateX(15%) scaleX(0.9); opacity: 0.5; }
}

@keyframes jct-beach-sun {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.14); opacity: 1; }
}

@keyframes jct-beach-sway {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    50%      { transform: translateX(-3%) rotate(-1.6deg); }
}

/* Clouds drift fully across the sky and loop, fading at the edges */
@keyframes jct-beach-cloud-a {
    0%   { transform: translateX(-40%); opacity: 0; }
    12%  { opacity: 0.9; }
    88%  { opacity: 0.9; }
    100% { transform: translateX(170%); opacity: 0; }
}

@keyframes jct-beach-cloud-b {
    0%   { transform: translateX(-50%); opacity: 0; }
    15%  { opacity: 0.75; }
    85%  { opacity: 0.75; }
    100% { transform: translateX(190%); opacity: 0; }
}

/* Sun glitter pulses and slides across the water surface */
@keyframes jct-beach-shimmer {
    0%, 100% { transform: translateX(-10%) scaleX(0.9); opacity: 0.45; }
    50%      { transform: translateX(10%) scaleX(1.18); opacity: 0.95; }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .jct-animated-bg-layer .jct-blob,
    .jct-abg-beach::before,
    .jct-abg-beach::after {
        animation: none !important;
    }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 600px) {
    .jct-countdown-wrap {
        padding: 16px !important;
    }

    .jct-timer-display {
        gap: 6px;
    }

    .jct-block {
        padding: 10px 6px !important;
    }

    .jct-number {
        font-size: clamp(18px, 6vw, 28px) !important;
    }

    .jct-label {
        font-size: clamp(8px, 2.2vw, 10px) !important;
    }

    .jct-separator {
        font-size: clamp(1em, 3.5vw, 1.5em);
        padding-bottom: 18px;
    }

    .jct-message {
        font-size: clamp(12px, 3.5vw, 16px) !important;
    }
}

@media (max-width: 400px) {
    .jct-countdown-wrap {
        padding: 12px !important;
    }

    .jct-timer-display {
        gap: 4px;
    }

    .jct-block {
        padding: 8px 4px !important;
    }

    .jct-separator {
        font-size: 1em;
        padding-bottom: 14px;
    }
}