/* Yaad Apps Button Glow Effects - Spin Animation */
/* Based on CodePen by Simey: https://codepen.io/simeydotme/pen/BaeZJqd */

/* CSS Custom Properties for the spin effect */
@property --mask {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* Keyframes for the spin animation */
@keyframes yaad-spin {
    0% {
        --mask: 0deg;
    }
    100% {
        --mask: 360deg;
    }
}

/* Keyframes for text shimmer effect */
@keyframes yaad-text-shimmer {
    0% {
        background-position: 100% center;
    }
    100% {
        background-position: -100% center;
    }
}

/* Login Button - Gold Sun-like Glow */
.yaad-login-glow {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: all 0.3s ease;
}

.yaad-login-glow .yaad-shimmer {
    position: absolute;
    inset: -40px;
    border-radius: inherit;
    mix-blend-mode: color-dodge;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.yaad-login-glow .yaad-shimmer::before,
.yaad-login-glow .yaad-shimmer::after {
    content: "";
    position: absolute;
    inset: 40px;
    border-radius: inherit;
    transition: all 0.5s ease;
}

/* Gold sun-like glow for login button */
.yaad-login-glow .yaad-shimmer::before {
    box-shadow: 
        0 0 3px 2px hsl(45deg 95% 85%),      /* Bright gold inner glow */
        0 0 7px 4px hsl(45deg 90% 75%),      /* Medium gold glow */
        0 0 13px 8px hsl(42deg 85% 65%),     /* Warm gold spread */
        0 0 22px 6px hsl(39deg 80% 55%);     /* Outer warm glow */
    z-index: -1;
}

.yaad-login-glow .yaad-shimmer::after {
    box-shadow: 
        inset 0 0 0 1px hsl(45deg 95% 85%),
        inset 0 0 3px 1px hsl(45deg 90% 75%),
        inset 0 0 9px 1px hsl(42deg 85% 65%);
    z-index: 2;
}

/* Spin mask for login button */
.yaad-login-glow .yaad-shimmer {
    mask-image: conic-gradient(
        from var(--mask, 0deg),
        transparent 0%,
        transparent 10%,
        black 36%,
        black 45%,
        transparent 50%,
        transparent 60%,
        black 85%,
        black 95%,
        transparent 100%
    );
    mask-size: cover;
    animation: yaad-spin 3s linear infinite;
}

/* Text shimmer effect for login */
.yaad-login-glow .yaad-text {
    background: linear-gradient(
        120deg, 
        transparent, 
        hsla(45deg, 100%, 80%, 0.7) 40%, 
        hsla(42deg, 100%, 85%, 0.9) 50%, 
        transparent 52%
    );
    background-clip: text;
    -webkit-background-clip: text;
    background-repeat: no-repeat;
    background-size: 300% 300%;
    background-position: center 200%;
}

/* Logout Button - Green/Teal Glow (no red) */
.yaad-logout-glow {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: all 0.3s ease;
}

.yaad-logout-glow .yaad-shimmer {
    position: absolute;
    inset: -40px;
    border-radius: inherit;
    mix-blend-mode: color-dodge;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.yaad-logout-glow .yaad-shimmer::before,
.yaad-logout-glow .yaad-shimmer::after {
    content: "";
    position: absolute;
    inset: 40px;
    border-radius: inherit;
    transition: all 0.5s ease;
}

/* Green/teal glow for logout button */
.yaad-logout-glow .yaad-shimmer::before {
    box-shadow: 
        0 0 3px 2px hsl(160deg 70% 75%),     /* Light teal inner glow */
        0 0 7px 4px hsl(155deg 65% 65%),     /* Medium teal glow */
        0 0 13px 8px hsl(150deg 60% 55%),    /* Green-teal spread */
        0 0 22px 6px hsl(145deg 55% 45%);    /* Outer green glow */
    z-index: -1;
}

.yaad-logout-glow .yaad-shimmer::after {
    box-shadow: 
        inset 0 0 0 1px hsl(160deg 70% 75%),
        inset 0 0 3px 1px hsl(155deg 65% 65%),
        inset 0 0 9px 1px hsl(150deg 60% 55%);
    z-index: 2;
}

/* Spin mask for logout button */
.yaad-logout-glow .yaad-shimmer {
    mask-image: conic-gradient(
        from var(--mask, 0deg),
        transparent 0%,
        transparent 10%,
        black 36%,
        black 45%,
        transparent 50%,
        transparent 60%,
        black 85%,
        black 95%,
        transparent 100%
    );
    mask-size: cover;
    animation: yaad-spin 3s linear infinite;
}

/* Text shimmer effect for logout */
.yaad-logout-glow .yaad-text {
    background: linear-gradient(
        120deg, 
        transparent, 
        hsla(160deg, 70%, 75%, 0.7) 40%, 
        hsla(155deg, 75%, 80%, 0.9) 50%, 
        transparent 52%
    );
    background-clip: text;
    -webkit-background-clip: text;
    background-repeat: no-repeat;
    background-size: 300% 300%;
    background-position: center 200%;
}

/* Hover effects */
.yaad-login-glow:hover .yaad-shimmer,
.yaad-logout-glow:hover .yaad-shimmer {
    opacity: 1;
}

.yaad-login-glow:hover .yaad-text {
    animation: yaad-text-shimmer 0.66s ease-in-out 1;
}

.yaad-logout-glow:hover .yaad-text {
    animation: yaad-text-shimmer 0.66s ease-in-out 1;
}

/* Scale effect on hover */
.yaad-login-glow:hover,
.yaad-logout-glow:hover {
    transform: scale(1.05);
}

/* Pause animation on focus/active */
.yaad-login-glow:focus .yaad-shimmer,
.yaad-login-glow:active .yaad-shimmer,
.yaad-logout-glow:focus .yaad-shimmer,
.yaad-logout-glow:active .yaad-shimmer {
    animation-play-state: paused;
    mask-image: none;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .yaad-login-glow .yaad-shimmer,
    .yaad-logout-glow .yaad-shimmer {
        animation: none;
    }
    
    .yaad-login-glow:hover,
    .yaad-logout-glow:hover {
        transform: none;
    }
}