/* ==========================================================================
   RAINZON — ADVANCED STYLE LAYER
   Cursor spotlight + rotating ring on the header, 3D tilt product cards,
   image shimmer, staggered scroll reveals, glowing progress head.
   Every effect is progressive: it degrades to the normal look when the
   browser, the pointer type or prefers-reduced-motion say no.
   ========================================================================== */

@property --rz-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ================================================================ header FX */

/* soft light that follows the cursor across the floating pill */
.aiz-nexa header.rz-h7 .header-content-wrapper { position: relative; }
.aiz-nexa header.rz-h7 .rz-h7-spotlight {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
    background: radial-gradient(240px 120px at var(--rz-mx, 50%) var(--rz-my, 50%),
            rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 72%);
    mix-blend-mode: screen;
    z-index: 0;
}
.aiz-nexa header.rz-h7 .header-content-wrapper:hover .rz-h7-spotlight { opacity: .9; }
.aiz-nexa header.rz-h7 .header-content-wrapper > * { position: relative; z-index: 1; }

/* rotating gradient ring on the key header controls */
.aiz-nexa header.rz-h7 .rz-ring { position: relative; }
.aiz-nexa header.rz-h7 .rz-ring::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--rz-angle),
            var(--rz-h7-1, #FB7701), #FFB800, var(--rz-h7-2, #FF4800), var(--rz-h7-1, #FB7701));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s ease;
    animation: rz-angle-spin 3.4s linear infinite;
    pointer-events: none;
}
.aiz-nexa header.rz-h7 .rz-ring:hover::before,
.aiz-nexa header.rz-h7 .rz-ring:focus-visible::before { opacity: 1; }
@keyframes rz-angle-spin { to { --rz-angle: 360deg; } }

/* glowing head on the scroll progress bar */
.rz-h7-progress { overflow: visible; }
.rz-h7-progress::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle, #FFF6EE 0%, var(--rz-adv-1, #FB7701) 55%, rgba(251, 119, 1, 0) 72%);
    box-shadow: 0 0 10px rgba(251, 119, 1, .6);
    opacity: 0;
    transition: opacity .2s ease;
}
.rz-h7-progress.rz-h7-progress-live::after { opacity: 1; }

/* ======================================================== product cards FX */
.aiz-nexa .rz-tilt {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .35s cubic-bezier(.22, .8, .3, 1), box-shadow .35s ease;
}
.aiz-nexa .rz-tilt.rz-tilting { transition: transform .08s linear; }
.aiz-nexa .rz-tilt .rz-tilt-lift { transform: translateZ(0); transition: transform .35s ease; }
.aiz-nexa .rz-tilt.rz-tilting .rz-tilt-lift { transform: translateZ(24px); }

/* a light sweep across the card while hovering */
.aiz-nexa .rz-tilt { position: relative; overflow: hidden; }
.aiz-nexa .rz-tilt::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(200px 160px at var(--rz-cx, 50%) var(--rz-cy, 50%),
            rgba(251, 119, 1, .10), rgba(251, 119, 1, 0) 70%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.aiz-nexa .rz-tilt.rz-tilting::after { opacity: 1; }

/* image shimmer until the lazy image really loads */
.rz-shimmer {
    position: relative;
    background-color: #F4F0ED;
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 32%,
            rgba(255, 255, 255, .72) 50%, rgba(255, 255, 255, 0) 68%);
    background-size: 240% 100%;
    background-repeat: no-repeat;
    animation: rz-shim 1.5s linear infinite;
}
@keyframes rz-shim { to { background-position: -140% 0; } }
.rz-shimmer.rz-loaded,
.rz-shimmer:has(img.lazyloaded) {
    animation: none;
    background-image: none;
}

/* ============================================================ scroll reveal */
/* Fail-safe: cards stay visible by default and only *animate* when the
   observer marks them in — a missed callback can never hide a product. */
@media (prefers-reduced-motion: no-preference) {
    .rz-reveal.rz-in {
        animation: rz-rise .5s cubic-bezier(.22, .8, .3, 1) both;
        animation-delay: var(--rz-delay, 0ms);
    }
}
@keyframes rz-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rz-h7-spotlight,
    .aiz-nexa header.rz-h7 .rz-ring::before { animation: none; }
    .rz-h7-progress::after { display: none; }
}