/* Home hero + Bella console.
   The console is the product demo, not decoration: real DOM text so crawlers read it,
   with motion layered on top as progressive enhancement. Everything degrades to a
   readable static card when JS is off or prefers-reduced-motion is set. */

.hero-dark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 5.5rem 0 6.5rem;
    color: var(--fg);
    background: var(--hero-home-bg);
}

/* fine print-like grain: the cheapest way to stop a dark panel reading as flat digital black */
.hero-dark::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-dark > .container {
    position: relative;
    z-index: 2;
}

/* light that follows the cursor - the reason people move the mouse around for no reason */
.hero-spot {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
    background: var(--hero-spot);
}

.hero-dark:hover .hero-spot {
    opacity: 1;
}

/* ---------- hero copy ---------- */

.eyebrow-dark {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--accent-soft);
    margin-bottom: 1.1rem;
}

.hero-dark h1 {
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.06;
    margin-bottom: 1.6rem;
    color: var(--fg-strong);
}

/* glow instead of the underline swash, which was colliding with the descender */
.hero-dark h1 .lit {
    color: var(--accent);
    text-shadow: 0 0 38px var(--lit-glow);
}

/* the brand swash is drawn for light backgrounds - on the dark hero it reads as a smudge.
   In light mode the hero is light again, so it comes back. */
.hero-dark .dealersip::after {
    display: none;
}

:root[data-theme="light"] .hero-dark .dealersip::after {
    display: block;
}

.lead-dark {
    color: rgba(var(--fg-rgb), 0.66);
    line-height: 1.65;
    max-width: 34rem;
    margin-bottom: 2rem;
}

.hero-note {
    color: rgba(var(--fg-rgb), 0.42);
    font-size: 0.9rem;
    margin: 1.6rem 0 0;
}

.btn-ghost-teal {
    border: 1px solid rgba(var(--tint-soft-rgb), 0.42);
    color: var(--accent-bright);
    background: rgba(var(--tint-rgb), 0.05);
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

    .btn-ghost-teal:hover {
        background: rgba(var(--tint-rgb), 0.13);
        border-color: rgba(var(--tint-soft-rgb), 0.75);
        color: var(--fg-strong);
        transform: translateY(-2px);
    }

/* ---------- console ---------- */

.console-shell {
    position: relative;
    max-width: 520px;
    margin-inline: auto;
}

.console-aura {
    position: absolute;
    inset: -14% -10%;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(58px);
    opacity: 0.75;
    background: var(--console-aura);
    animation: auraBreathe 7s ease-in-out infinite;
}

@keyframes auraBreathe {
    0%, 100% { transform: scale(1); opacity: 0.52; }
    50%      { transform: scale(1.07); opacity: 0.72; }
}

.console {
    position: relative;
    z-index: 1;
    border-radius: 22px;
    padding: 1.35rem 1.5rem 1.25rem;
    background: var(--console-bg);
    border: 1px solid rgba(var(--tint-soft-rgb), 0.17);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: var(--shadow-console);
    /* the tilt is written by JS from cursor position */
    transform: perspective(1000px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.console-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
}

.console-id strong {
    display: block;
    color: var(--fg-strong);
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.console-id span {
    font-size: 0.78rem;
    color: rgba(var(--fg-rgb), 0.5);
}

.console-tag {
    margin-left: auto;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(var(--fg-rgb), 0.55);
    border: 1px solid rgba(var(--ink-rgb), 0.16);
    border-radius: 999px;
    padding: 0.24rem 0.6rem;
}

/* Bella as a presence rather than a portrait */
.bella-orb {
    position: relative;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #ffffff 0%, #ceffee 22%, #25ffc4 58%, #0d8f6d 100%);
    box-shadow: 0 0 22px rgba(37, 255, 196, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
    animation: orbBreathe 4.5s ease-in-out infinite;
}

    .bella-orb::before,
    .bella-orb::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgba(var(--tint-rgb), 0.4);
    }

    .bella-orb::before {
        inset: -7px;
        border-top-color: transparent;
        border-left-color: transparent;
        animation: orbSpin 7s linear infinite;
    }

    .bella-orb::after {
        inset: -13px;
        border-color: rgba(var(--tint-rgb), 0.16);
        border-bottom-color: transparent;
        animation: orbSpin 12s linear infinite reverse;
    }

    /* she speeds up while she is working */
    .bella-orb.is-thinking {
        animation-duration: 1.5s;
    }

        .bella-orb.is-thinking::before {
            animation-duration: 1.4s;
        }

        .bella-orb.is-thinking::after {
            animation-duration: 2.6s;
        }

@keyframes orbBreathe {
    0%, 100% { box-shadow: 0 0 18px rgba(37, 255, 196, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.3) inset; }
    50%      { box-shadow: 0 0 32px rgba(37, 255, 196, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.4) inset; }
}

@keyframes orbSpin {
    to { transform: rotate(360deg); }
}

/* height is pinned so switching between the brief and an answer never resizes the card */
.console-body {
    min-height: 262px;
    padding: 1.15rem 0 0.4rem;
}

.greeting {
    font-size: 1.42rem;
    font-weight: 700;
    color: var(--fg-strong);
    margin: 0 0 0.15rem;
    letter-spacing: -0.01em;
}

.greet-sub {
    color: rgba(var(--fg-rgb), 0.6);
    margin: 0 0 0.35rem;
}

/* ---------- findings ---------- */

.finding {
    display: flex;
    gap: 0.85rem;
    padding: 0.82rem 0;
    border-top: 1px solid rgba(var(--ink-rgb), 0.07);
}

    .finding i {
        color: #FF5666;
        font-size: 1.05rem;
        line-height: 1.5;
        flex: 0 0 auto;
    }

.finding-main {
    min-width: 0;
    flex: 1;
}

.finding-title {
    color: var(--fg-strong);
    margin: 0 0 0.15rem;
    line-height: 1.35;
}

    .finding-title b {
        color: var(--accent);
        font-variant-numeric: tabular-nums;
    }

.finding-note {
    color: rgba(var(--fg-rgb), 0.5);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.45;
}

.finding-bar {
    height: 2px;
    max-width: 64%;
    border-radius: 2px;
    background: rgba(var(--ink-rgb), 0.07);
    margin-top: 0.6rem;
    overflow: hidden;
}

    .finding-bar span {
        display: block;
        height: 100%;
        width: 0;
        border-radius: 2px;
        background: linear-gradient(90deg, rgba(18, 184, 139, 0.75), rgba(255, 86, 102, 0.7));
        transition: width 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
    }

/* ---------- answer view ---------- */

.back-link {
    background: none;
    border: 0;
    padding: 0;
    color: rgba(var(--fg-rgb), 0.55);
    font-size: 0.82rem;
    cursor: pointer;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

    .back-link:hover {
        color: var(--accent);
    }

.answer-q {
    color: var(--fg-strong);
    font-weight: 600;
    margin: 0 0 0.85rem;
    padding-left: 0.9rem;
    border-left: 2px solid var(--accent);
    line-height: 1.4;
}

.answer-a {
    color: rgba(var(--fg-rgb), 0.82);
    line-height: 1.62;
    margin: 0;
    min-height: 6rem;
}

.answer-a .cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    vertical-align: -0.13em;
    background: var(--accent);
    margin-left: 2px;
    animation: caret 1s steps(2) infinite;
}

@keyframes caret {
    50% { opacity: 0; }
}

.typing {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    height: 1.5rem;
}

    .typing span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        opacity: 0.4;
        animation: dot 1.25s ease-in-out infinite;
    }

        .typing span:nth-child(2) { animation-delay: 0.16s; }
        .typing span:nth-child(3) { animation-delay: 0.32s; }

@keyframes dot {
    0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
    30%           { opacity: 1;    transform: translateY(-4px); }
}

/* ---------- ask bar ---------- */

.console-foot {
    padding-top: 0.95rem;
    border-top: 1px solid rgba(var(--ink-rgb), 0.08);
}

.ask-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(var(--fg-rgb), 0.42);
    margin-bottom: 0.6rem;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ask-chip {
    border: 1px solid rgba(var(--tint-soft-rgb), 0.28);
    background: rgba(var(--tint-rgb), 0.06);
    color: var(--accent-bright);
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

    .ask-chip:hover {
        background: rgba(var(--tint-rgb), 0.15);
        border-color: rgba(var(--tint-soft-rgb), 0.7);
        color: var(--fg-strong);
        transform: translateY(-2px);
    }

    .ask-chip.is-active {
        background: rgba(var(--tint-rgb), 0.2);
        border-color: var(--accent);
        color: var(--fg-strong);
    }

/* ---------- the hint ring on the first chip ----------
   The chips read as labels until something moves, so the opening question wears the same
   ring the "Tap to find the truth" button wears on Why Dealersip: a light running round
   the edge plus a ping off it. Transform and opacity only, so it runs everywhere. The
   wrapper is exactly the size of the chip and the ring is absolutely positioned, so none
   of this shifts the row. */

.ask-chip-orbit {
    position: relative;
    display: inline-flex;
    border-radius: 999px;
}

/* the band the light lives in: a 2px ring cut out of the pill by the two-layer mask */
.ask-chip-ring {
    position: absolute;
    inset: -3px;
    padding: 2px;
    border-radius: 999px;
    pointer-events: none;
    transition: opacity 0.35s ease;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* the light: an oversized square carrying the gradient, spun by transform. The mask on
   the parent trims everything outside the band, leaving a head of light going round. */
.ask-chip-ring::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220%;
    aspect-ratio: 1 / 1;
    background: conic-gradient(rgba(var(--tint-rgb), 0) 0deg, rgba(var(--tint-rgb), 0) 240deg, rgba(var(--tint-rgb), 0.3) 300deg, var(--accent-soft) 345deg, var(--fg-strong) 357deg, rgba(var(--tint-rgb), 0) 360deg);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: askChipSpin 3.4s linear infinite;
}

@keyframes askChipSpin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* an outward ping off the chip, in step with the light */
.ask-chip-orbit::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 1px solid rgba(var(--tint-rgb), 0.5);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    animation: askChipPing 3.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes askChipPing {
    0% {
        transform: scale(1);
        opacity: 0.65;
    }

    60%, 100% {
        transform: scale(1.22);
        opacity: 0;
    }
}

/* the hint has done its job once the visitor is hovering, and for good once they have
   asked something - the JS stamps is-asked on the row at the first click */
.ask-chip-orbit:hover .ask-chip-ring::before,
.ask-chip-orbit:hover::after,
.chips.is-asked .ask-chip-ring::before,
.chips.is-asked .ask-chip-orbit::after {
    animation: none;
    opacity: 0;
}

.chips.is-asked .ask-chip-ring,
.ask-chip-orbit:hover .ask-chip-ring {
    opacity: 0;
}

.console-disclaimer {
    font-size: 0.7rem;
    color: rgba(var(--fg-rgb), 0.34);
    margin: 0.8rem 0 0;
    line-height: 1.5;
}

/* ---------- reveal ---------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
}

.reveal-ready [data-reveal] {
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--d, 0s);
}

[data-reveal].is-in {
    opacity: 1;
    transform: none;
}

@media (max-width: 991.98px) {
    .hero-dark {
        padding: 3.5rem 0 4rem;
    }

    .console-shell {
        margin-top: 2.5rem;
    }
}

/* Deliberately no prefers-reduced-motion block.
   On Windows that preference is switched on by remote desktop sessions, battery saver and
   "adjust for best performance", so it flags a large number of visitors who never asked for
   still images - and it was leaving this hero looking switched off for them. Nothing here is a
   vestibular trigger: no full-screen parallax, no scroll-jacking, no autoplay video, no large
   travel. The biggest movements are a ~6 degree card tilt on hover and a soft glow tracking the
   cursor. Product decision, 2026-08-26. To reinstate, wrap the aura/orb/tilt/spotlight rules in
   @media (prefers-reduced-motion: reduce) again. */

/* ---------- light-only contrast floor ----------
   The hero above carries its secondary text between 0.34 and 0.6 alpha, which is comfortable
   on near-black: a low-alpha off-white is still a bright pixel. The same alphas over a
   near-white page land between 2.4:1 and 4:1 against it, so each one is raised here until it
   clears 4.5:1. Kept in one block at the end rather than pushed into the rules above, so the
   dark values stay exactly as they shipped. */

/* --accent-soft is the decorative teal and lands at 3.85:1 on the light page - the eyebrow
   is 12px text, so it takes the text-grade accent instead */
:root[data-theme="light"] .eyebrow-dark {
    color: var(--accent);
}

:root[data-theme="light"] .hero-note,
:root[data-theme="light"] .ask-label,
:root[data-theme="light"] .console-disclaimer {
    color: rgba(var(--fg-rgb), 0.68);
}

:root[data-theme="light"] .console-id span,
:root[data-theme="light"] .console-tag,
:root[data-theme="light"] .greet-sub,
:root[data-theme="light"] .finding-note,
:root[data-theme="light"] .back-link {
    color: rgba(var(--fg-rgb), 0.72);
}