/* ============================================================
   NOVA AI — handwritten welcome overlay
   Shared stylesheet. Include once globally (see integration .md).
   Pairs with nova-welcome.js. Requires the "Caveat" font.
   ============================================================ */

/* Handwriting font (remove if you self-host / already load Caveat) */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');

/* The wrapper you put around the Nova bar: <div data-nova-welcome> … </div>
   display:contents removes this wrapper's box from layout so the Nova bar inside
   it sticks to the tall page root (position:sticky) instead of being trapped in a
   short, position:relative parent. The welcome overlay is anchored to the bar
   itself by nova-welcome.js. */
.nova-welcome-host {
    display: contents;
}

/* The overlay (built by nova-welcome.js) */
.nova-welcome {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 22px;
    border-radius: 12px;
    pointer-events: none;                 /* let clicks pass through unless flagged */
    background: radial-gradient(ellipse at center,
                rgba(7, 19, 47, 0.86) 0%,
                rgba(7, 19, 47, 0.66) 58%,
                rgba(7, 19, 47, 0.32) 100%);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: novaWelcomeBox var(--nw-duration, 8s) ease-in-out forwards;
}

.nova-welcome.is-clickable {
    pointer-events: auto;
    cursor: pointer;
}

.nova-welcome .nw-msg {
    font-family: 'Caveat', 'Segoe Script', cursive;
    /* scales with the viewport so it always fits the bar */
    font-size: clamp(16px, 2.4vw, 25px);
    font-weight: 600;
    line-height: 1.15;
    color: #ffffff;
    text-shadow: 0 0 24px rgba(112, 163, 255, 0.65), 0 2px 8px rgba(0, 0, 0, 0.55);
    max-width: 920px;
    text-wrap: balance;
}

.nova-welcome .nw-hi  { color: #aebfff; }
.nova-welcome .nw-cta { text-decoration: underline; text-decoration-color: rgba(174, 191, 255, 0.6); }

/* each glyph is "written" in, leading edge glows like wet ink */
.nova-welcome .nw-ch {
    display: inline-block;
    white-space: pre;       /* preserve spaces between words */
    opacity: 0;
    animation: nwInkIn 0.42s ease-out forwards;
    animation-delay: var(--d, 0s);
}

@keyframes nwInkIn {
    0%   { opacity: 0; transform: translateY(0.14em) rotate(-4deg); filter: blur(1.2px);
           text-shadow: 0 0 18px rgba(150,175,255,0.95), 0 0 30px rgba(112,163,255,0.8); }
    55%  { opacity: 1; filter: blur(0);
           text-shadow: 0 0 16px rgba(150,175,255,0.9); }
    100% { opacity: 1; transform: translateY(0) rotate(0);
           text-shadow: 0 0 24px rgba(112,163,255,0.55), 0 2px 8px rgba(0,0,0,0.5); }
}

/* box fades in fast, holds through the writing, then fades out */
@keyframes novaWelcomeBox {
    0%   { opacity: 0; }
    4%   { opacity: 1; }
    86%  { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

/* ── Mobile / small Nova bar ─────────────────────────────── */
@media (max-width: 640px) {
    .nova-welcome {
        padding: 8px 12px;
        border-radius: 10px;
        background: radial-gradient(ellipse at center,
                    rgba(7, 19, 47, 0.92) 0%,
                    rgba(7, 19, 47, 0.74) 60%,
                    rgba(7, 19, 47, 0.42) 100%);
    }
    .nova-welcome .nw-msg {
        font-size: clamp(14px, 4.2vw, 20px);
        line-height: 1.16;
        max-width: 100%;
    }
}

@media (max-width: 380px) {
    .nova-welcome .nw-msg { font-size: 15px; }
}

/* Respect reduced-motion: show the full message immediately, still auto-dismiss */
@media (prefers-reduced-motion: reduce) {
    .nova-welcome .nw-ch { animation: none; opacity: 1; }
}