/* Callux Autumn Theme — Frontend
   Design intent: a warm, premium autumn ambience that stays out of the way.
   Decorations never block pointer events, sit behind the content by default,
   and fully respect prefers-reduced-motion. */

:root {
    --callux-autumn-primary: #c8552d;
    --callux-autumn-accent: #e0a03e;
    --callux-autumn-deep: #7a2e2e;
    --callux-autumn-primary-rgb: 200, 85, 45;
    --callux-autumn-accent-rgb: 224, 160, 62;
    --callux-autumn-deep-rgb: 122, 46, 46;
    --callux-autumn-glow-opacity: 0.25;
    --callux-autumn-branch-opacity: 0.9;
    --callux-autumn-top-offset: 0px;
    --callux-autumn-font-heading: var(--wp--preset--font-family--caudex, Georgia, "Times New Roman", serif);
    --callux-autumn-font-body: var(--wp--preset--font-family--roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.callux-autumn-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Layering: "behind" paints above the page background but under every block
   of content; "front" floats above content (still click-through). */
.callux-autumn-layer--behind { z-index: -1; }
.callux-autumn-layer--front  { z-index: 9000; }

/* ------------------------------------------------------------------ *
 * Harvest glow — a warm wash in the top corner and a soft base tint
 * ------------------------------------------------------------------ */
.callux-autumn-glow {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    opacity: var(--callux-autumn-glow-opacity);
    background:
        radial-gradient(110% 55% at 92% -12%, rgba(var(--callux-autumn-accent-rgb), 0.65) 0%, rgba(var(--callux-autumn-accent-rgb), 0) 60%),
        radial-gradient(90% 50% at 2% 108%, rgba(var(--callux-autumn-primary-rgb), 0.5) 0%, rgba(var(--callux-autumn-primary-rgb), 0) 55%);
    mix-blend-mode: multiply;
    animation: callux-autumn-breathe 16s ease-in-out infinite;
}

@keyframes callux-autumn-breathe {
    0%, 100% { opacity: calc(var(--callux-autumn-glow-opacity) * 0.7); }
    50%      { opacity: var(--callux-autumn-glow-opacity); }
}

/* ------------------------------------------------------------------ *
 * Leafy branch hanging from a top corner (below any sticky header)
 * ------------------------------------------------------------------ */
.callux-autumn-branch {
    position: fixed;
    top: var(--callux-autumn-top-offset);
    width: clamp(170px, 22vw, 320px);
    aspect-ratio: 320 / 300;
    pointer-events: none;
    opacity: var(--callux-autumn-branch-opacity);
    filter: drop-shadow(0 8px 14px rgba(var(--callux-autumn-deep-rgb), 0.16));
    transition: top 0.3s ease;
}

.callux-autumn-branch svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.callux-autumn-branch--top-right { right: 0; }
.callux-autumn-branch--top-left  { left: 0; transform: scaleX(-1); }

.callux-autumn-branch-sway {
    transform-origin: 320px 0;
    transform-box: view-box;
    animation: callux-autumn-branch-sway 9s ease-in-out infinite;
}

@keyframes callux-autumn-branch-sway {
    0%, 100% { transform: rotate(-1.4deg); }
    50%      { transform: rotate(1.4deg); }
}

.callux-autumn-flutter {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: callux-autumn-flutter 4.2s ease-in-out infinite alternate;
}

.callux-autumn-branch g:nth-child(odd)  > .callux-autumn-flutter { animation-duration: 3.6s; animation-delay: -1.2s; }
.callux-autumn-branch g:nth-child(3n)   > .callux-autumn-flutter { animation-duration: 4.8s; animation-delay: -2.1s; }
.callux-autumn-branch g:nth-child(4n)   > .callux-autumn-flutter { animation-duration: 3.1s; animation-delay: -0.6s; }

@keyframes callux-autumn-flutter {
    from { transform: rotate(-4deg); }
    to   { transform: rotate(5deg); }
}

/* ------------------------------------------------------------------ *
 * Falling leaves (created by JS)
 * ------------------------------------------------------------------ */
.callux-autumn-leaves {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.callux-autumn-leaf {
    position: absolute;
    top: 0;
    display: block;
    opacity: 0;
    will-change: transform, opacity;
    animation: callux-autumn-fall var(--dur, 24s) linear var(--delay, 0s) infinite;
}

.callux-autumn-layer--front .callux-autumn-leaf { mix-blend-mode: multiply; }

.callux-autumn-leaf svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    filter: drop-shadow(0 2px 3px rgba(60, 30, 10, 0.18));
    animation: callux-autumn-sway var(--sway-dur, 3.4s) ease-in-out var(--delay, 0s) infinite alternate;
}

@keyframes callux-autumn-fall {
    0%   { transform: translate3d(0, -14vh, 0); opacity: 0; }
    6%   { opacity: var(--leaf-opacity, 0.85); }
    92%  { opacity: var(--leaf-opacity, 0.85); }
    100% { transform: translate3d(var(--drift, 40px), 106vh, 0); opacity: 0; }
}

@keyframes callux-autumn-sway {
    from { transform: translateX(calc(var(--sway, 18px) * -1)) rotate(-22deg) rotateY(0deg); }
    to   { transform: translateX(var(--sway, 18px)) rotate(22deg) rotateY(180deg); }
}

/* ------------------------------------------------------------------ *
 * WooCommerce product badge
 * ------------------------------------------------------------------ */
.wc-block-components-product-image,
.wc-block-grid__product-image,
li.product {
    position: relative;
}

.callux-autumn-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    color: #fff;
    font-family: var(--callux-autumn-font-body);
    line-height: 1;
    text-decoration: none;
    animation: callux-autumn-badge-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.callux-autumn-badge--pill {
    padding: 6px 12px 6px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--callux-autumn-primary) 0%, var(--callux-autumn-accent) 100%);
    box-shadow:
        0 6px 14px rgba(var(--callux-autumn-primary-rgb), 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.callux-autumn-badge--leaf {
    width: 34px;
    height: 34px;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 6px 14px rgba(var(--callux-autumn-deep-rgb), 0.18);
    color: var(--callux-autumn-primary);
}

.callux-autumn-badge--leaf .callux-autumn-glyph { width: 18px; height: 18px; }

.callux-autumn-badge .callux-autumn-glyph { flex-shrink: 0; }

/* Classic loops position the badge relative to the <li> itself. */
.callux-autumn-badge--loop { top: 14px; left: 14px; }

@keyframes callux-autumn-badge-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------------------------------------------------------------------ *
 * Countdown — frosted card that echoes the site's rounded language
 * ------------------------------------------------------------------ */
.callux-autumn-countdown-widget {
    position: fixed;
    z-index: 9001;
    max-width: 320px;
    animation: callux-autumn-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.callux-autumn-countdown--bottom-left  { bottom: 24px; left: 24px; }
.callux-autumn-countdown--bottom-right { bottom: 24px; right: 24px; }
.callux-autumn-countdown--top-left     { top: calc(var(--callux-autumn-top-offset) + 24px); left: 24px; }
.callux-autumn-countdown--top-right    { top: calc(var(--callux-autumn-top-offset) + 24px); right: 24px; }

.callux-autumn-countdown-inner,
.callux-autumn-countdown-inline {
    position: relative;
    padding: 16px 20px 15px;
    border-radius: 22px;
    background: rgba(255, 250, 243, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        0 14px 34px rgba(var(--callux-autumn-deep-rgb), 0.16),
        0 2px 8px rgba(0, 0, 0, 0.05);
    font-family: var(--callux-autumn-font-body);
    color: var(--callux-autumn-deep);
}

.callux-autumn-countdown-inline {
    display: inline-block;
    padding: 20px 26px 18px;
}

.callux-autumn-countdown-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-right: 20px;
    font-family: var(--callux-autumn-font-heading);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1px;
    color: var(--callux-autumn-deep);
}

.callux-autumn-countdown-title .callux-autumn-glyph {
    flex-shrink: 0;
    color: var(--callux-autumn-primary);
}

.callux-autumn-countdown-inline .callux-autumn-countdown-title { font-size: 18px; padding-right: 0; }

.callux-autumn-countdown-timer {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

.callux-autumn-countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 46px;
}

.callux-autumn-countdown-inline .callux-autumn-countdown-unit { min-width: 56px; }

.callux-autumn-countdown-number {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: transparent;
    background: linear-gradient(135deg, var(--callux-autumn-primary), var(--callux-autumn-deep));
    -webkit-background-clip: text;
    background-clip: text;
}

.callux-autumn-countdown-inline .callux-autumn-countdown-number { font-size: 32px; }

.callux-autumn-countdown-label {
    margin-top: 5px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: rgba(var(--callux-autumn-deep-rgb), 0.7);
}

.callux-autumn-countdown-sep {
    padding-top: 2px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: rgba(var(--callux-autumn-accent-rgb), 0.8);
}

.callux-autumn-countdown-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(var(--callux-autumn-deep-rgb), 0.55);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.callux-autumn-countdown-close:hover,
.callux-autumn-countdown-close:focus-visible {
    background: rgba(var(--callux-autumn-primary-rgb), 0.12);
    color: var(--callux-autumn-primary);
    outline: none;
}

@keyframes callux-autumn-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------------------------------------------------------------------ *
 * Accessibility — honour reduced motion
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .callux-autumn-glow,
    .callux-autumn-branch-sway,
    .callux-autumn-flutter,
    .callux-autumn-badge,
    .callux-autumn-countdown-widget {
        animation: none !important;
    }

    .callux-autumn-leaves { display: none; }
}

/* Keep decorations tidy on small screens */
@media (max-width: 600px) {
    .callux-autumn-branch { width: 150px; }
    .callux-autumn-badge--pill { font-size: 10px; padding: 5px 10px 5px 8px; }
    .callux-autumn-countdown-widget { max-width: calc(100vw - 32px); }
    .callux-autumn-countdown--bottom-left,
    .callux-autumn-countdown--bottom-right { bottom: 16px; left: 16px; right: auto; }
}

@media print {
    .callux-autumn-glow,
    .callux-autumn-branch,
    .callux-autumn-leaves,
    .callux-autumn-countdown-widget { display: none !important; }
}