/* Homepage-only interactive ambience and CTA attention cues. */

.sk-home-flow .socialkiln-hero {
    --sk-mouse-x: 50%;
    --sk-mouse-y: 42%;
}

.sk-home-flow .socialkiln-kicker {
    font-family: 'Space Grotesk', sans-serif !important;
}

/* Keep the underlying hero dark while allowing localized purple movement. */
.sk-home-flow .socialkiln-hero .overlay {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 34%, rgba(106, 76, 255, .085), transparent 19%),
        radial-gradient(circle at 74% 62%, rgba(143, 92, 255, .065), transparent 18%);
}

/* Override the older broad glows with smaller, easier-to-see moving light pockets. */
.sk-home-flow .socialkiln-hero .overlay::before {
    width: 350px;
    height: 350px;
    left: 2%;
    top: 24%;
    background: radial-gradient(circle, rgba(111, 78, 255, .58) 0%, rgba(111, 78, 255, .18) 33%, rgba(111, 78, 255, 0) 68%);
    filter: blur(34px);
    opacity: .28;
    animation: skLocalizedGlowA 9s ease-in-out infinite;
}

.sk-home-flow .socialkiln-hero .overlay::after {
    width: 315px;
    height: 315px;
    right: 4%;
    bottom: 14%;
    background: radial-gradient(circle, rgba(145, 94, 255, .52) 0%, rgba(118, 78, 232, .16) 34%, rgba(118, 78, 232, 0) 68%);
    filter: blur(32px);
    opacity: .24;
    animation: skLocalizedGlowB 11s ease-in-out infinite;
}

@keyframes skLocalizedGlowA {
    0% { transform: translate3d(-8%, 3%, 0) scale(.88); opacity: .12; }
    30% { transform: translate3d(24%, -8%, 0) scale(1.03); opacity: .31; }
    58% { transform: translate3d(46%, 15%, 0) scale(1.08); opacity: .18; }
    82% { transform: translate3d(18%, 26%, 0) scale(.95); opacity: .29; }
    100% { transform: translate3d(52%, 2%, 0) scale(.90); opacity: .13; }
}

@keyframes skLocalizedGlowB {
    0% { transform: translate3d(6%, 4%, 0) scale(.90); opacity: .10; }
    32% { transform: translate3d(-26%, -18%, 0) scale(1.08); opacity: .27; }
    64% { transform: translate3d(-52%, 5%, 0) scale(.96); opacity: .14; }
    100% { transform: translate3d(-22%, -28%, 0) scale(1.05); opacity: .25; }
}

/* Cursor-following light: centered exactly on the pointer. */
.sk-home-flow .sk-mouse-glow {
    position: absolute;
    left: -999px;
    top: -999px;
    z-index: 0;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(124, 88, 255, .30) 0%, rgba(104, 72, 238, .12) 34%, rgba(90, 62, 210, 0) 70%);
    filter: blur(28px);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity .28s ease;
    will-change: left, top, opacity;
}

.sk-home-flow .sk-mouse-glow.is-active {
    opacity: .62;
}

.sk-home-flow .socialkiln-hero .overlay > .container {
    position: relative;
    z-index: 2;
}

/* Solid guest CTA with a subtle highlight travelling around the border. */
@property --sk-account-border-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.sk-create-account-pulse {
    position: relative;
    isolation: isolate;
    overflow: visible;
    background: #11151d !important;
    color: #fff !important;
    border: 1px solid rgba(166, 137, 255, .88) !important;
    box-shadow:
        0 0 0 1px rgba(143, 109, 255, .14),
        0 0 17px rgba(126, 88, 255, .20) !important;
}

.sk-create-account-pulse:hover {
    background: #151a23 !important;
    border-color: rgba(184, 159, 255, .98) !important;
    box-shadow:
        0 0 0 1px rgba(143, 109, 255, .20),
        0 0 22px rgba(126, 88, 255, .27) !important;
}

.sk-create-account-pulse::before {
    content: '';
    position: absolute;
    inset: -3px;
    z-index: 2;
    border-radius: 14px;
    padding: 2px;
    background: conic-gradient(
        from var(--sk-account-border-angle),
        transparent 0deg 292deg,
        rgba(148, 113, 255, .08) 304deg,
        rgba(174, 147, 255, .88) 322deg,
        rgba(225, 215, 255, 1) 334deg,
        rgba(157, 122, 255, .72) 347deg,
        transparent 360deg
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 3px rgba(151, 113, 255, .62));
    animation: skCreateAccountBorderOrbit 5s linear infinite;
    pointer-events: none;
}

.sk-create-account-pulse::after {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: 13px;
    box-shadow:
        0 0 12px rgba(143, 109, 255, .30),
        0 0 25px rgba(111, 75, 255, .11);
    pointer-events: none;
}

@keyframes skCreateAccountBorderOrbit {
    to { --sk-account-border-angle: 360deg; }
}

/* Tighten the visual gap caused by transparent padding inside the Stripe PNG. */
.sk-stripe-wordmark {
    gap: 0 !important;
    box-shadow:
        0 0 0 1px rgba(99, 91, 255, .13),
        0 0 34px rgba(99, 91, 255, .30),
        0 8px 26px rgba(0, 0, 0, .18) !important;
}

.sk-stripe-wordmark > span {
    position: relative;
    z-index: 1;
    margin-right: -7px;
}

.sk-stripe-wordmark img {
    width: 80px !important;
    margin-left: -6px;
}

@media (pointer: coarse) {
    .sk-home-flow .sk-mouse-glow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sk-home-flow .socialkiln-hero .overlay::before,
    .sk-home-flow .socialkiln-hero .overlay::after,
    .sk-create-account-pulse::before {
        animation: none !important;
    }

    .sk-create-account-pulse::before {
        opacity: .48;
    }
}