/* Glare Card Animations */
.glare-card-container {
    --duration: 300ms;
    --foil-size: 100%;
    --opacity: 0;
    --radius: 1rem;
    --easing: ease;
    --transition: var(--duration) var(--easing);

    --step: 5%;
    --foil-svg: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99994 3.419C2.99994 3.419 21.6142 7.43646 22.7921 12.153C23.97 16.8695 3.41838 23.0306 3.41838 23.0306' stroke='white' stroke-width='5' stroke-miterlimit='3.86874' stroke-linecap='round' style='mix-blend-mode:darken'/%3E%3C/svg%3E");
    --pattern: var(--foil-svg) center/100% no-repeat;
    --rainbow: repeating-linear-gradient(0deg, rgb(255, 119, 115) calc(var(--step) * 1), rgba(255, 237, 95, 1) calc(var(--step) * 2), rgba(168, 255, 95, 1) calc(var(--step) * 3), rgba(131, 255, 247, 1) calc(var(--step) * 4), rgba(120, 148, 255, 1) calc(var(--step) * 5), rgb(216, 117, 255) calc(var(--step) * 6), rgb(255, 119, 115) calc(var(--step) * 7)) 0% var(--bg-y)/200% 700% no-repeat;
    --diagonal: repeating-linear-gradient(128deg, #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 10%, 60%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10%, #0e152e 12%) var(--bg-x) var(--bg-y)/300% no-repeat;
    --shade: radial-gradient(farthest-corner circle at var(--m-x) var(--m-y), rgba(255, 255, 255, 0.1) 12%, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0.25) 120%) var(--bg-x) var(--bg-y)/300% no-repeat;
}

.glare-card-inner {
    transform: rotateY(var(--r-x)) rotateX(var(--r-y));
    transition: transform var(--duration) var(--easing);
    transform-style: preserve-3d;
}

.glare-card-glare {
    background: radial-gradient(farthest-corner circle at var(--m-x) var(--m-y),
            rgba(255, 255, 255, 0.4) 10%,
            rgba(255, 255, 255, 0.3) 20%,
            rgba(255, 255, 255, 0) 90%);
    opacity: var(--opacity);
    transition: opacity var(--duration) var(--easing);
    pointer-events: none;
}

.glare-card-foil {
    background-image: var(--pattern), var(--rainbow), var(--diagonal), var(--shade);
    background-blend-mode: hue, hue, hue, overlay;
    opacity: var(--opacity);
    transition: opacity var(--duration) var(--easing);
    pointer-events: none;
    mix-blend-mode: color-dodge;
}

.glare-card-foil::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-repeat: repeat;
    background-size: var(--foil-size), 200% 400%, 800%, 200%;
    background-position: center, 0% var(--bg-y), calc(var(--bg-x) * -1) calc(var(--bg-y) * -1), var(--bg-x) var(--bg-y);
    background-blend-mode: soft-light, hue, hard-light;
    mix-blend-mode: exclusion;
}

/* Template Preview Scroll & Active Overlay */
.is-scrolling,
.group\/preview:hover .touch-hover-trigger,
.is-active .touch-hover-trigger {
    transform: translateY(var(--scroll-y, -80%)) !important;
    transition: transform var(--scroll-duration, 8s) ease-in-out !important;
}

/* Base styles for scrollable items */
.touch-hover-trigger {
    transition: transform 0.5s ease-in-out !important; /* Reset transition when not scrolling */
}

/* Action Overlay Visibility & Pointer Events Control */
.action-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.5s ease-in-out !important;
}

.group\/preview:hover .action-overlay,
.is-active .action-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Hint visibility control */
.photo-card-hint {
    transition: opacity 0.5s ease-in-out !important;
}

.group\/preview:hover .photo-card-hint,
.is-active .photo-card-hint {
    opacity: 0 !important;
    pointer-events: none !important;
}