/* =============================================================
   ZYPERWEB STOREFRONT — Premium Design System
   Shared polish layer loaded on every storefront page.
   All accents derive from the shop's dynamic theme variables
   (--primary-container, --primary, --secondary-container) and
   the dynamic font (--shop-font), so every store stays on-brand.
   ============================================================= */

:root {
    /* Motion */
    --zy-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --zy-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --zy-fast: 0.18s;
    --zy-med: 0.32s;
    --zy-slow: 0.6s;

    /* Radius scale — tasteful, modern, never fully square */
    --zy-radius-sm: 10px;
    --zy-radius: 16px;
    --zy-radius-lg: 22px;
    --zy-radius-xl: 28px;
    --zy-pill: 999px;

    /* Layered, soft premium shadows */
    --zy-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --zy-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.07);
    --zy-shadow: 0 12px 30px rgba(15, 23, 42, 0.09);
    --zy-shadow-lg: 0 26px 56px rgba(15, 23, 42, 0.14);
    --zy-shadow-glow: 0 18px 40px color-mix(in srgb, var(--primary-container) 26%, transparent 74%);

    /* Theme-aware tints (safe defaults if a var is missing) */
    --zy-tint-2: color-mix(in srgb, var(--primary-container) 4%, #ffffff 96%);
    --zy-tint-6: color-mix(in srgb, var(--primary-container) 7%, #ffffff 93%);
    --zy-tint-12: color-mix(in srgb, var(--primary-container) 12%, #ffffff 88%);
    --zy-line: color-mix(in srgb, var(--primary-container) 14%, #e2ddd4 86%);
}

/* ---------- Base niceties ---------- */
html {
    scroll-behavior: smooth;
}

::selection {
    background: color-mix(in srgb, var(--primary-container) 26%, transparent);
    color: var(--theme-ink, #1b1c17);
}

/* Slim, theme-tinted scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary-container) 40%, #cfcabf 60%) transparent;
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary-container) 38%, #cfcabf 62%);
    border-radius: var(--zy-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--primary-container) 60%, #b9b3a7 40%);
    background-clip: padding-box;
}

img {
    -webkit-user-drag: none;
}

/* =============================================================
   SCROLL REVEAL — driven by IntersectionObserver in base.html
   Add data-reveal (optionally data-reveal-delay="120") to any
   element. Falls back gracefully when JS / motion is off.
   ============================================================= */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 0.7s var(--zy-ease),
        transform 0.7s var(--zy-ease);
    will-change: opacity, transform;
}
[data-reveal].zy-in {
    opacity: 1;
    transform: none;
}
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="zoom"] { transform: scale(0.94); }
[data-reveal="left"].zy-in,
[data-reveal="right"].zy-in,
[data-reveal="zoom"].zy-in { transform: none; }

/* Staggered children: parent gets data-reveal-group */
[data-reveal-group] > * {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.6s var(--zy-ease),
        transform 0.6s var(--zy-ease);
}
[data-reveal-group].zy-in > * {
    opacity: 1;
    transform: none;
}

/* =============================================================
   Reusable keyframes
   ============================================================= */
@keyframes zyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}
@keyframes zyShimmer {
    0% { background-position: -160% 0; }
    100% { background-position: 260% 0; }
}
@keyframes zyPulseRing {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-container) 45%, transparent); }
    70% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--primary-container) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-container) 0%, transparent); }
}
@keyframes zyFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}
@keyframes zySpin {
    to { transform: rotate(360deg); }
}

/* =============================================================
   Helper utilities (opt-in classes)
   ============================================================= */
.zy-lift {
    transition: transform var(--zy-med) var(--zy-ease), box-shadow var(--zy-med) var(--zy-ease);
}
.zy-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--zy-shadow-lg);
}

/* Sweeping sheen overlay for cards / banners */
.zy-sheen { position: relative; overflow: hidden; }
.zy-sheen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 30%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 70%
    );
    background-size: 220% 100%;
    transform: translateX(0);
    opacity: 0;
    transition: opacity var(--zy-med) var(--zy-ease);
    pointer-events: none;
}
.zy-sheen:hover::after {
    opacity: 1;
    animation: zyShimmer 0.9s var(--zy-ease);
}

/* Animated gradient text — uses theme colours */
.zy-gradient-text {
    background: linear-gradient(
        92deg,
        var(--primary-container),
        var(--primary),
        color-mix(in srgb, var(--secondary-container) 55%, var(--primary) 45%)
    );
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: zyShimmer 7s linear infinite;
}

/* Soft skeleton shimmer for image placeholders */
.zy-skeleton {
    background: linear-gradient(
        100deg,
        color-mix(in srgb, var(--primary-container) 8%, #e8e5dd 92%) 25%,
        color-mix(in srgb, var(--primary-container) 16%, #f3f1ea 84%) 50%,
        color-mix(in srgb, var(--primary-container) 8%, #e8e5dd 92%) 75%
    );
    background-size: 220% 100%;
    animation: zyShimmer 1.6s linear infinite;
}

/* Generic pill button polish */
.zy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    cursor: pointer;
    font-family: var(--shop-font);
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: var(--zy-radius-sm);
    transition:
        transform var(--zy-fast) var(--zy-ease),
        box-shadow var(--zy-med) var(--zy-ease),
        filter var(--zy-fast) var(--zy-ease);
}
.zy-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--zy-shadow-glow);
}
.zy-btn:active {
    transform: translateY(0);
}

/* Focus ring for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary-container) 60%, transparent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* =============================================================
   Reduced-motion: respect user preference everywhere
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal],
    [data-reveal-group] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .zy-gradient-text,
    .zy-skeleton,
    .zy-sheen:hover::after {
        animation: none !important;
    }
    .zy-lift:hover { transform: none; }
}