/* ==========================================================================
   .webs.now Domain Search — "Living Aurora" v2.6.0
   - Reliably ANIMATED gradient border (background-position, not @property)
   - Available name SHIMMERS with the flowing aurora (gradient-clipped text)
   - World-class glass button, refined status, calm vs celebratory states
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
.websnow-root {
    --ws-ink: #14151c;
    --ws-ink-2: #4a4c57;
    --ws-muted: #8a8c96;
    --ws-line: #e7e6e2;

    --ws-accent: #7c4dff;
    --ws-suffix: var(--ws-accent);
    --ws-btn-bg: #7c4dff;
    --ws-btn-bg-2: #c238c0;
    --ws-btn-icon: #ffffff;

    --ws-ok: #0b9a60;
    --ws-no: #c0410c;

    --ws-field-fill: linear-gradient(180deg, #ffffff, #f6f7fb);
    --ws-card-fill: linear-gradient(180deg, #ffffff, #fafbff);

    /* Flowing gradients (animated via background-position) */
    --ws-aurora: linear-gradient(115deg, #ff4ecd, #8b5cff, #38c6ff, #3dffb0, #38c6ff, #8b5cff, #ff4ecd);
    --ws-ok-flow: linear-gradient(115deg, #0bbf76, #19d9a6, #0b9a60, #2ee0b8, #0bbf76);

    --ws-shadow: 0 1px 2px rgba(20,21,28,.05), 0 24px 50px -34px rgba(20,21,28,.42);
    --ws-grain: .03;
    --ws-glow-strength: .42;

    --ws-ease: cubic-bezier(.2, .8, .2, 1);
    --ws-fast: .2s var(--ws-ease);

    position: relative;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
    background: transparent;
    border: 0; box-shadow: none; padding: 0;
    font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.websnow-root[style*="--websnow-suffix"] { --ws-suffix: var(--websnow-suffix); }
.websnow-root[style*="--websnow-btn-bg"] { --ws-btn-bg: var(--websnow-btn-bg); }
.websnow-root[style*="--websnow-icon"]   { --ws-btn-icon: var(--websnow-icon); }

.websnow-root.websnow-skin-dark {
    --ws-ink: #f3f4fa;
    --ws-ink-2: #c4c6d4;
    --ws-muted: #9094a3;
    --ws-line: rgba(255,255,255,.12);
    --ws-accent: #a98bff;
    --ws-ok: #34e29a;
    --ws-no: #ff9a4d;
    --ws-field-fill: linear-gradient(180deg, #1b1e2c, #14161f);
    --ws-card-fill: linear-gradient(180deg, #1a1d29, #15171f);
    --ws-shadow: 0 1px 2px rgba(0,0,0,.5), 0 26px 54px -34px rgba(0,0,0,.8);
    --ws-grain: .05;
    --ws-glow-strength: .55;
}

/* Flow keyframes (ping-pong = seamless, no @property needed) */
@keyframes ws-flow-2 { 0%{background-position:0 0,0% 50%} 50%{background-position:0 0,100% 50%} 100%{background-position:0 0,0% 50%} }
@keyframes ws-flow-1 { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.websnow-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; }
.websnow-search-wrap { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.websnow-confetti { position: absolute; inset: -10% 0 auto 0; width: 100%; height: 150%; pointer-events: none; z-index: 6; opacity: 0; transition: opacity .35s ease; }
.websnow-confetti.is-active { opacity: 1; }

/* --------------------------------------------------------------------------
   Search field — animated aurora border, clean interior, outer glow
   -------------------------------------------------------------------------- */
.websnow-search-box {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 9px 8px 6px;
    border-radius: 999px;
    border: 2.5px solid transparent;
    background:
        var(--ws-field-fill) padding-box,
        var(--ws-aurora) border-box;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 300% 300%;
    background-position: 0 0, 0% 50%;
    box-shadow: var(--ws-shadow);
    animation: ws-flow-2 6s ease infinite;
}
.websnow-search-box::before {
    content: ""; position: absolute; inset: -6px; z-index: -1; border-radius: inherit;
    background: var(--ws-aurora);
    background-size: 300% 300%; background-position: 0% 50%;
    filter: blur(18px); opacity: var(--ws-glow-strength);
    animation: ws-flow-1 6s ease infinite;
}

.websnow-input-group { display: flex; align-items: center; flex: 1; min-width: 0; padding: 0 6px 0 22px; min-height: 54px; }
.websnow-input {
    flex: 1; min-width: 0; background: transparent; border: none; outline: none;
    color: var(--ws-ink); font-family: 'Hanken Grotesk', sans-serif;
    font-size: clamp(1.06rem, 2.3vw, 1.3rem); font-weight: 600; letter-spacing: -0.015em; padding: 12px 0;
}
.websnow-input::placeholder { color: var(--ws-muted); font-weight: 500; opacity: 1; }
.websnow-input:-webkit-autofill, .websnow-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: var(--ws-ink) !important; transition: background-color 9999s ease-in-out 0s;
}
.websnow-suffix {
    align-self: center; font-family: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif; font-optical-sizing: auto;
    font-size: clamp(1.04rem, 2.1vw, 1.28rem); font-weight: 700; color: var(--ws-suffix);
    white-space: nowrap; flex-shrink: 0; padding-left: 10px; letter-spacing: -0.02em; user-select: none; pointer-events: none;
}

/* Glass button — clean rich orb, thin top sheen, soft glow (no plastic) */
.websnow-btn {
    position: relative;
    width: 54px; min-width: 54px; height: 54px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; border: none; cursor: pointer; color: var(--ws-btn-icon);
    background: linear-gradient(160deg, var(--ws-btn-bg), var(--ws-btn-bg-2));
    box-shadow:
        inset 0 1.5px 0 rgba(255,255,255,.5),
        inset 0 0 0 1px rgba(255,255,255,.12),
        inset 0 -10px 16px -12px rgba(0,0,0,.4),
        0 8px 20px -8px color-mix(in srgb, var(--ws-btn-bg) 60%, transparent),
        0 0 18px -6px color-mix(in srgb, var(--ws-btn-bg-2) 55%, transparent);
    transition: transform var(--ws-fast), filter var(--ws-fast), box-shadow var(--ws-fast);
}
.websnow-btn:hover, .websnow-btn:focus-visible { transform: translateY(-1px); filter: brightness(1.07) saturate(1.05); }
.websnow-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--ws-btn-bg) 40%, transparent); outline-offset: 3px; }
.websnow-btn:active { transform: scale(.95); }
.websnow-btn:disabled { cursor: progress; }
.websnow-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.websnow-btn-icon svg { width: 100%; height: 100%; }

.websnow-icon-bolt { display: none; }
.websnow-btn.is-busy .websnow-icon-search { display: none; }
.websnow-btn.is-busy .websnow-icon-bolt {
    display: inline-flex; animation: ws-strike .42s steps(1, end) infinite;
    filter: drop-shadow(0 0 7px rgba(255,255,255,.95));
}
@keyframes ws-strike {
    0%{transform:translate(0,0) rotate(0);opacity:1}
    12%{transform:translate(-1.5px,1px) rotate(-6deg);opacity:.5}
    24%{transform:translate(1.5px,-1px) rotate(7deg);opacity:1}
    38%{transform:translate(-1px,-1.5px) rotate(-3deg);opacity:.3}
    52%{transform:translate(1px,1.5px) rotate(6deg);opacity:1}
    66%{transform:translate(-1.5px,.5px) rotate(-7deg);opacity:.7}
    80%{transform:translate(1px,-.5px) rotate(3deg);opacity:1}
    100%{transform:translate(0,0) rotate(0);opacity:.85}
}

.websnow-hint {
    margin: 0; font-family: 'JetBrains Mono', monospace; font-size: .73rem;
    letter-spacing: .04em; color: var(--ws-muted); text-align: center; min-height: 1.2em; transition: color var(--ws-fast);
}
.websnow-hint.websnow-error { color: var(--ws-no); }

/* --------------------------------------------------------------------------
   Result card — calm by default, celebratory (aurora) when available
   -------------------------------------------------------------------------- */
.websnow-result {
    position: relative;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: clamp(26px, 3.4vw, 34px) clamp(22px, 3.5vw, 36px);
    border-radius: 22px;
    background: var(--ws-card-fill);
    border: 1px solid var(--ws-line);
    box-shadow: var(--ws-shadow);
    overflow: hidden;
    animation: ws-rise .4s var(--ws-ease) both;
    --ws-state: var(--ws-accent);
}
.websnow-result:not([hidden]) { display: flex; }
.websnow-result.websnow-available { --ws-state: var(--ws-ok); }
.websnow-result.websnow-taken { --ws-state: var(--ws-no); }
.websnow-result.websnow-unknown { --ws-state: var(--ws-accent); }
@keyframes ws-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* AVAILABLE: clean white card, thin green top accent, tight green-tinted shadow */
.websnow-result.websnow-available {
    border-color: color-mix(in srgb, var(--ws-ok) 20%, var(--ws-line));
    box-shadow: var(--ws-shadow), 0 18px 42px -34px var(--ws-ok);
}
.websnow-result.websnow-available::after,
.websnow-result.websnow-taken::after,
.websnow-result.websnow-unknown::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--ws-state), transparent); opacity: .9;
}
.websnow-available .websnow-result-tag::before { display: none; }

/* Drawn check-mark */
.websnow-result-check {
    width: 58px; height: 58px; border-radius: 50%;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--ws-ok) 14%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ws-ok) 30%, transparent);
    animation: ws-pop .4s var(--ws-ease) both;
}
.websnow-skin-dark .websnow-result-check { background: color-mix(in srgb, var(--ws-ok) 18%, transparent); }
.websnow-result-check svg { width: 32px; height: 32px; }
.websnow-tick {
    fill: none; stroke: var(--ws-ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 26; stroke-dashoffset: 26;
    animation: ws-draw .5s var(--ws-ease) .18s forwards;
}
@keyframes ws-draw { to { stroke-dashoffset: 0; } }
@keyframes ws-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }

.websnow-result.websnow-taken,
.websnow-result.websnow-unknown { border-color: color-mix(in srgb, var(--ws-state) 22%, var(--ws-line)); }
.websnow-result > * { position: relative; z-index: 1; }

/* Status: dot + tracked label, no pill */
.websnow-result-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace; font-size: .7rem; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase; color: var(--ws-state);
    padding: 0; background: none; border: none;
}
.websnow-result-tag::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--ws-state); box-shadow: 0 0 9px 0 var(--ws-state);
}

/* Domain — fitted */
.websnow-result-domain {
    font-family: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif; font-optical-sizing: auto;
    font-weight: 800; font-size: clamp(1.55rem, 4.8vw, 2.35rem);
    color: var(--ws-ink); line-height: 1.06; letter-spacing: -0.03em; max-width: 100%;
}
.websnow-result-domain .websnow-kw,
.websnow-result-domain .websnow-kw-taken,
.websnow-result-domain .websnow-kw-unknown { word-break: break-word; }
.websnow-result-domain .websnow-sfx { color: var(--ws-muted); font-weight: 700; white-space: nowrap; }

/* Domain keyword stays solid and high-contrast for readability */
.websnow-result-domain .websnow-kw { color: var(--ws-ink); }

.websnow-result-copy {
    margin: 0; font-family: 'Hanken Grotesk', sans-serif; font-size: clamp(.93rem, 2vw, 1.02rem);
    color: var(--ws-ink-2); line-height: 1.5; max-width: 420px;
}

/* CTA */
.websnow-register-btn {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 4px;
    padding: 14px 28px; border-radius: 999px; color: #fff; text-decoration: none;
    font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: -0.01em;
    background: linear-gradient(140deg, color-mix(in srgb, var(--ws-state) 86%, #fff 14%), var(--ws-state));
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.45), 0 12px 26px -12px color-mix(in srgb, var(--ws-state) 70%, transparent);
    transition: transform var(--ws-fast), filter var(--ws-fast);
}
.websnow-register-btn:hover, .websnow-register-btn:focus-visible { transform: translateY(-2px); filter: brightness(1.05); }
.websnow-register-btn .websnow-arrow { transition: transform var(--ws-fast); }
.websnow-register-btn:hover .websnow-arrow { transform: translateX(4px); }
.websnow-register-btn.websnow-secondary { background: linear-gradient(140deg, var(--ws-btn-bg), var(--ws-btn-bg-2)); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.45), 0 12px 26px -12px color-mix(in srgb, var(--ws-btn-bg) 70%, transparent); }

.websnow-registrars-link { font-family: 'JetBrains Mono', monospace; font-size: .76rem; letter-spacing: .03em; color: var(--ws-muted); text-decoration: underline; text-underline-offset: 3px; transition: color var(--ws-fast); }
.websnow-registrars-link:hover { color: var(--ws-ink); }
.websnow-result-icon, .websnow-result-divider, .websnow-taken-heading { display: none; }

/* --------------------------------------------------------------------------
   Responsive + motion
   -------------------------------------------------------------------------- */
@media (max-width: 540px) {
    .websnow-input-group { padding-left: 18px; min-height: 50px; }
    .websnow-btn { width: 50px; min-width: 50px; height: 50px; }
    .websnow-result { border-radius: 18px; }
}
/* Reduced motion: keep the gentle ambient gradient flow (brand signature),
   but drop transform-based motion (rise, lightning jitter) and the celebration. */
@media (prefers-reduced-motion: reduce) {
    .websnow-result, .websnow-result-check, .websnow-tick { animation: none; }
    .websnow-tick { stroke-dashoffset: 0; }
    .websnow-btn.is-busy .websnow-icon-bolt { animation: none; }
    .websnow-confetti { display: none !important; }
}