/* ==========================================================================
   Billogna.lol — shared hero
   www and the Discord landing page render the same hero (wordmark, AngryFace
   art, thought-bubble CTAs) and each used to carry its own copy of these rules.
   They drifted badly: 96px vs 140px top padding, a 300px vs 480px face, and
   `.tagline` styled as small body copy on one page and a 34px display line on
   the other. This is the single definition — pages supply only copy and which
   bubble slots they use.
   ========================================================================== */

.hero {
    position: relative;
    padding: 96px 20px 56px;
    overflow: hidden;
}

/* Soft accent wash, faded out at the bottom so it dissolves instead of
   hard-cutting into the next section. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 60% 30%, rgba(109,125,255,0.12), transparent 45%),
                radial-gradient(circle at 20% 70%, rgba(154,107,255,0.10), transparent 45%);
    pointer-events: none;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.stack {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.centered { text-align: center; }

/* ==========================================================================
   Hero type
   ========================================================================== */

.headline h1 {
    font-size: clamp(38px, 6vw, 66px);
    margin: 0 0 10px;
    color: #f2f4ff;
    text-shadow: 0 0 12px rgba(154,107,255,0.55), 0 0 26px rgba(109,125,255,0.45);
    font-family: 'Orbitron', sans-serif;
}

/* Display line directly under the wordmark (Discord's "Unsupervised ADHD").
   This is the role `.tagline` used to play on that page only — split out so
   `.tagline` can mean one thing everywhere. */
.hero-kicker {
    font-size: clamp(21px, 3.2vw, 30px);
    color: var(--accent);
    letter-spacing: 0.06em;
    margin: 0 0 12px;
    text-shadow: 0 0 16px rgba(179,255,200,0.30);
}

/* One line of supporting body copy. */
.tagline,
.headline p {
    color: var(--muted);
    font-size: clamp(14px, 1.8vw, 17px);
    max-width: 62ch;
    margin: 0 auto;
    line-height: 1.65;
    text-wrap: balance;
}

/* ==========================================================================
   Hero art + the thought bubble it pops on hover
   ========================================================================== */

.hero-art {
    display: block;
    margin: 6px auto 0;
    width: min(58vw, 300px);
    height: auto;   /* without this, width/height attrs on the <img> squash it */
    filter: drop-shadow(0 0 24px rgba(109,125,255,0.45)) drop-shadow(0 0 48px rgba(154,107,255,0.25));
    position: relative;
    z-index: 2;
}

.thought-wrap {
    position: relative;
    display: inline-block;
    margin-top: 16px;
    overflow: visible;
}

/* Grounding glow under the art. */
.thought-wrap::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    width: min(360px, 62%);
    height: 26px;
    border-radius: 999px;
    background: radial-gradient(ellipse at center,
        rgba(109,125,255,0.22) 0%,
        rgba(154,107,255,0.14) 35%,
        rgba(6,182,212,0.06) 55%,
        rgba(0,0,0,0) 72%);
    filter: blur(10px);
    pointer-events: none;
    z-index: 1;
}

.thought-bubble {
    position: absolute;
    left: 50%;
    top: -14px;
    transform: translate(-50%, -100%) scale(0.98);
    width: max-content;
    max-width: min(460px, 84vw);
    padding: 13px 20px;
    border-radius: 999px;
    background: rgba(12, 16, 32, 0.92);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(231,236,255,0.16);
    color: var(--text);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    box-shadow:
        var(--shadow-md),
        0 0 24px rgba(109,125,255,0.22),
        inset 0 0 0 1px rgba(109,125,255,0.10);
    transition: opacity 160ms ease, transform 160ms ease;
}

.thought-bubble::before,
.thought-bubble::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(12, 16, 32, 0.92);
    border: 1px solid rgba(231,236,255,0.14);
    transform: translateX(-50%);
}

.thought-bubble::before { width: 14px; height: 14px; left: 62%; bottom: -22px; opacity: 0.95; }
.thought-bubble::after  { width: 10px; height: 10px; left: 58%; bottom: -34px; opacity: 0.80; }

.thought-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-shadow: 0 0 14px rgba(109,125,255,0.35), 0 2px 10px rgba(0,0,0,0.55);
}

.thought-wrap.thought-open .thought-bubble {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
}

@media (max-width: 560px) {
    .thought-text { white-space: normal; }
    .thought-bubble { border-radius: 20px; }
}

/* ==========================================================================
   Floating thought-bubble CTAs
   Pages pick a slot class rather than defining coordinates, so both pages place
   their bubbles on exactly the same geometry.
   ========================================================================== */

.thought-link {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(12, 16, 32, 0.88);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(231,236,255,0.16);
    box-shadow: var(--shadow-md), 0 0 18px rgba(109,125,255,0.16);
    color: var(--text);
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
    --ts: 1;
    /* Tail-dot edge + glow, overridable per bubble. A dark fill with a 14%
       hairline (the original) only showed where the backdrop happened to be
       light, so the connectors read on the Discord page and disappeared on www. */
    --tail-edge: rgba(231,236,255,0.42);
    --tail-glow: 0 0 9px rgba(109,125,255,0.30);
    transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--ts));
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.thought-link:hover,
.thought-link:focus-visible {
    --ts: 1.05;
    border-color: rgba(109,125,255,0.6);
    box-shadow: var(--shadow-md), var(--glow);
}

.thought-link.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.thought-link.disabled:hover { --ts: 1; box-shadow: var(--shadow-md), 0 0 18px rgba(109,125,255,0.16); }

/* Tail dots — what makes these read as thought bubbles rather than pills
   floating beside the art. They hang off whichever edge faces the art and
   slope toward it. Being children of the bubble, they travel with it, so no
   separate compensation offsets are needed. */
.thought-link::before,
.thought-link::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    /* Fill lifted slightly off pure-dark, plus a brighter edge and soft glow,
       so a dot stays legible over the artwork, the background pixels or plain
       near-black alike. */
    background: rgba(20, 26, 46, 0.95);
    border: 1px solid var(--tail-edge);
    box-shadow: var(--tail-glow);
    pointer-events: none;
}

.thought-link::before { width: 13px; height: 13px; left: var(--d1x); top: var(--d1y); }
.thought-link::after  { width: 9px;  height: 9px;  left: var(--d2x); top: var(--d2y); opacity: 0.8; }

/* pixel-hover.js tags these with .pixel-host, which brings position:relative
   (collapses the floating layout) and overflow:hidden (clips the tails off).
   Override both; the canvas is rounded to the pill instead so the hover fill
   still clips correctly. */
.thought-link.pixel-host { position: absolute; overflow: visible; }
.thought-link > pixel-canvas { border-radius: 999px; }

/* --- Slots ---------------------------------------------------------------
   A deliberate triangle: the two right-hand bubbles sit symmetrically above
   and below the midpoint, and the left one sits exactly between them. */

.tb-right-top {
    top: 22%; right: 0; --tx: calc(100% + 26px);
    --d1x: -18px; --d1y: 58%;
    --d2x: -34px; --d2y: calc(58% + 13px);
}

.tb-left-mid {
    top: 46%; left: 0; --tx: calc(-100% - 26px);
    --d1x: calc(100% + 5px); --d1y: 54%;
    --d2x: calc(100% + 21px); --d2y: calc(54% + 12px);
}

.tb-right-bottom {
    top: 70%; right: 0; --tx: calc(100% + 26px);
    --d1x: -18px; --d1y: 26%;
    --d2x: -34px; --d2y: calc(26% - 12px);
}

/* Emphasis for the one action a page most wants clicked. */
.thought-link.is-primary {
    --ts: 1.06;
    border-color: rgba(109,125,255,0.38);
    box-shadow: var(--shadow-md), 0 0 26px rgba(109,125,255,0.22);
    /* Tails pick up the primary's brighter edge so the whole bubble reads as one. */
    --tail-edge: rgba(160,178,255,0.62);
    --tail-glow: 0 0 11px rgba(109,125,255,0.42);
}

.thought-link.is-primary:hover,
.thought-link.is-primary:focus-visible { --ts: 1.11; }

/* Below this the floating layout runs out of room beside the art, so the
   bubbles become an ordinary stacked column and the tails come off. The art is
   ordered first — stacking it last used to push the CTAs above the face. */
@media (max-width: 1024px) {
    .thought-wrap { display: flex; flex-direction: column; align-items: center; }

    /* relative, not static — the pixel canvas needs a positioned parent to
       size against, but relative still lays out in normal flow. */
    .thought-link,
    .thought-link.pixel-host {
        position: relative;
        --tx: 0px; --ty: 0px; --ts: 1;
        width: min(340px, 86vw);
        margin-top: 10px;
        order: 3;
    }

    .thought-link:hover,
    .thought-link:focus-visible { --ts: 1.02; }
    .thought-link::before,
    .thought-link::after { display: none; }

    .hero-art { order: 1; }
    .thought-bubble { order: 2; }
    .thought-link.is-primary { order: 2; }
}

/* ==========================================================================
   Social row
   ========================================================================== */

.social-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 22px auto 0;
    position: relative;
    z-index: 3;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: var(--text);
    background: rgba(12, 16, 32, 0.78);
    border: 1px solid rgba(231,236,255,0.16);
    box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(109,125,255,0.08);
    backdrop-filter: blur(10px);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, color 160ms ease;
}

.social-link svg { width: 20px; height: 20px; display: block; }

.social-link:hover,
.social-link:focus-visible {
    transform: translateY(-3px) scale(1.06);
    border-color: rgba(109,125,255,0.6);
    box-shadow: var(--shadow-md), var(--glow);
    color: #fff;
}

/* The thought-bubble treatment is deliberately NOT applied to these — it stays
   reserved for the three hero CTAs, so the socials read as secondary and the
   area under the art doesn't fill up with tail dots. */

/* ==========================================================================
   Page sections (both pages had their own identical copy of this)
   ========================================================================== */

.section {
    max-width: 960px;
    margin: 0 auto;
    padding: 50px 20px 70px;
    position: relative;
    z-index: 3;
}

.section h2 {
    margin: 0 0 12px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    color: var(--text);
}

.section > p {
    margin: 0 0 22px;
    color: var(--muted);
    text-align: center;
}