/* =====================================================================
   Woulfe's K9 — Intro Prompt
   A floating card pinned bottom left: photograph left, copy right, the
   whole card a link to the booking page. Depends on tokens.css.

   The entrance is the hero's, scaled down — rise, and resolve out of a
   blur on --k9-ease, with the contents staggered behind the card itself.
   It waits for the preloader to lift and for the hero copy to land, so it
   reads as the last beat of that sequence rather than a widget that
   popped in. See intro-prompt.js for the timing.

   Every hiding style is scoped to html.wk9-intro-armed, a class an inline
   <head> script adds. Without JavaScript nothing is hidden, so the card is
   simply there — a booking CTA is the last thing that should depend on a
   script arriving.
   ===================================================================== */

.wk9-intro {
    /* Glass over the hero photograph. The card has to stay legible against a
       moving background, so the tint does most of the work and the blur only
       softens what shows through. */
    --wk9-intro-tint: rgba(var(--k9-black-rgb), 0.88);
    --wk9-intro-media: 78px;
    /* Sized so the default message balances onto two lines with no dead
       space to the right of it. */
    --wk9-intro-width: 344px;
    /* Distance off the bottom. Raised on phones, where the third-party chat
       widget parks bottom-right and the two would otherwise meet in the
       middle — there isn't 344px of clear space beside it. */
    --wk9-intro-bottom: var(--k9-space-6);

    position: fixed;
    box-sizing: border-box;
    z-index: calc(var(--k9-z-overlay) - 1); /* over the page, under drawers */
    left: var(--k9-space-6);
    bottom: calc(var(--wk9-intro-bottom) + var(--k9-safe-b));
    width: min(var(--wk9-intro-width), calc(100vw - (var(--k9-space-4) * 2)));
    font-family: var(--k9-font-body);
}

.wk9-intro *,
.wk9-intro *::before,
.wk9-intro *::after {
    box-sizing: border-box;
}

/* On a light subtree the tint would swallow the type. */
[data-k9-theme="light"] .wk9-intro {
    --wk9-intro-tint: rgba(255, 255, 255, 0.94);
}

/* The card ---------------------------------------------------------- */

.wk9-intro__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--k9-space-4);
    padding: var(--k9-space-3);
    /* Keeps the copy clear of the dismiss chip in the top-right corner. */
    padding-right: var(--k9-space-8);
    border: var(--k9-border-width) solid var(--k9-line-strong);
    border-radius: var(--k9-radius-md);
    background: var(--wk9-intro-tint);
    box-shadow: var(--k9-shadow-4), var(--k9-shadow-inset);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    text-decoration: none;
    color: var(--k9-text);
    min-width: 0;
    overflow: hidden;
    transition:
        transform var(--k9-duration-slow) var(--k9-ease),
        border-color var(--k9-duration-slow) var(--k9-ease),
        box-shadow var(--k9-duration-slow) var(--k9-ease);
}

.wk9-intro__link:hover,
.wk9-intro__link:focus-visible {
    transform: translateY(-3px);
    border-color: var(--k9-white);
    color: var(--k9-text);
}

.wk9-intro__link:focus-visible {
    outline: none;
    box-shadow: var(--k9-shadow-4), var(--k9-focus-ring);
}

/* A single highlight passes across the card once it has settled — the
   same "something just arrived" note the hero's scroll cue plays, spent
   in one go rather than looping. */
.wk9-intro__link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 255, 255, 0.14) 50%,
        transparent 65%
    );
    transform: translateX(-120%);
    pointer-events: none;
}

.wk9-intro.is-in .wk9-intro__link::after {
    animation: wk9-intro-sheen 1400ms var(--k9-ease) 700ms 1 both;
}

@keyframes wk9-intro-sheen {
    from { transform: translateX(-120%); }
    to   { transform: translateX(120%); }
}

/* Media -------------------------------------------------------------- */

.wk9-intro__media {
    position: relative;
    flex: 0 0 var(--wk9-intro-media);
    width: var(--wk9-intro-media);
    height: var(--wk9-intro-media);
    border-radius: var(--k9-radius-sm);
    overflow: hidden;
    background: var(--k9-surface-inset);
}

.wk9-intro__media img {
    display: block;
    /* BeTheme frames content images; this slot is a crop, not a picture. */
    border: 0;
    box-shadow: none;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The photography is the only colour on the page; it stays untouched
       and simply scales under the hover. */
    transition: transform 600ms var(--k9-ease);
}

.wk9-intro__link:hover .wk9-intro__media img,
.wk9-intro__link:focus-visible .wk9-intro__media img {
    transform: scale(1.06);
}

/* With no photograph set, the slot becomes a monogram rather than a hole. */
.wk9-intro__monogram {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--k9-font-display);
    font-weight: var(--k9-weight-display);
    font-size: var(--k9-text-title-md);
    letter-spacing: var(--k9-tracking-display);
    color: var(--k9-text-muted);
    background: var(--k9-surface-card);
}

/* Copy --------------------------------------------------------------- */

.wk9-intro__body {
    display: flex;
    flex-direction: column;
    gap: var(--k9-space-1);
    min-width: 0;
    flex: 1 1 auto;
}

.wk9-intro__eyebrow {
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    color: var(--k9-text-muted);
}

.wk9-intro__title {
    font-size: var(--k9-text-body-sm);
    font-weight: var(--k9-weight-semibold);
    line-height: var(--k9-leading-snug);
    letter-spacing: var(--k9-tracking-body);
    color: var(--k9-text);
    text-wrap: balance;
    overflow-wrap: break-word;
}

.wk9-intro__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--k9-space-2);
    margin-top: var(--k9-space-1);
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    color: var(--k9-text);
}

.wk9-intro__cta svg {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    transition: transform var(--k9-duration-slow) var(--k9-ease);
}

.wk9-intro__link:hover .wk9-intro__cta svg,
.wk9-intro__link:focus-visible .wk9-intro__cta svg {
    transform: translateX(4px);
}

/* Dismiss ------------------------------------------------------------ */

.wk9-intro__close {
    position: absolute;
    top: var(--k9-space-2);
    right: var(--k9-space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: var(--k9-border-width) solid var(--k9-line);
    border-radius: var(--k9-radius-pill);
    background: rgba(var(--k9-black-rgb), 0.45);
    color: var(--k9-text-muted);
    cursor: pointer;
    opacity: 0.55;
    transition:
        opacity var(--k9-duration) var(--k9-ease),
        color var(--k9-duration) var(--k9-ease),
        transform var(--k9-duration) var(--k9-ease);
}

.wk9-intro__close:hover,
.wk9-intro__close:focus-visible {
    opacity: 1;
    color: var(--k9-text);
    transform: scale(1.08);
}

.wk9-intro__close:focus-visible {
    outline: none;
    box-shadow: var(--k9-focus-ring);
}

.wk9-intro__close svg {
    width: 10px;
    height: 10px;
}

/* Entrance ----------------------------------------------------------- */

html.wk9-intro-armed .wk9-intro {
    opacity: 0;
    transform: translateY(26px) scale(0.96);
    filter: blur(14px);
    pointer-events: none;
    transition:
        opacity 900ms var(--k9-ease),
        transform 900ms var(--k9-ease),
        filter 900ms var(--k9-ease);
    will-change: opacity, transform, filter;
}

html.wk9-intro-armed .wk9-intro.is-in {
    opacity: 1;
    transform: none;
    filter: blur(0);
    pointer-events: auto;
}

/* Once it has played, stop claiming a compositor layer — the card sits on
   screen for the rest of the visit. */
html.wk9-intro-armed .wk9-intro.is-settled {
    will-change: auto;
}

/* The contents follow the card in, on the hero's rhythm. */
/* These move on `translate`, not `transform`, so the entrance never fights
   the hover transforms on the same elements. */
html.wk9-intro-armed .wk9-intro__media,
html.wk9-intro-armed .wk9-intro__eyebrow,
html.wk9-intro-armed .wk9-intro__title,
html.wk9-intro-armed .wk9-intro__cta,
html.wk9-intro-armed .wk9-intro__close {
    opacity: 0;
    translate: 0 8px;
    transition:
        opacity 700ms var(--k9-ease),
        translate 700ms var(--k9-ease);
    transition-delay: var(--wk9-intro-step, 0ms);
}

html.wk9-intro-armed .wk9-intro__media  { --wk9-intro-step: 160ms; }
html.wk9-intro-armed .wk9-intro__eyebrow { --wk9-intro-step: 240ms; }
html.wk9-intro-armed .wk9-intro__title  { --wk9-intro-step: 320ms; }
html.wk9-intro-armed .wk9-intro__cta    { --wk9-intro-step: 400ms; }
html.wk9-intro-armed .wk9-intro__close  { --wk9-intro-step: 560ms; }

html.wk9-intro-armed .wk9-intro.is-in .wk9-intro__media,
html.wk9-intro-armed .wk9-intro.is-in .wk9-intro__eyebrow,
html.wk9-intro-armed .wk9-intro.is-in .wk9-intro__title,
html.wk9-intro-armed .wk9-intro.is-in .wk9-intro__cta,
html.wk9-intro-armed .wk9-intro.is-in .wk9-intro__close {
    opacity: 1;
    translate: none;
}

html.wk9-intro-armed .wk9-intro.is-in .wk9-intro__close { opacity: 0.55; }

html.wk9-intro-armed .wk9-intro.is-in .wk9-intro__close:hover,
html.wk9-intro-armed .wk9-intro.is-in .wk9-intro__close:focus-visible { opacity: 1; }

/* Exit, on dismiss — the entrance run backwards and quicker. */
html.wk9-intro-armed .wk9-intro.is-out {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    filter: blur(8px);
    pointer-events: none;
    transition:
        opacity 320ms var(--k9-ease),
        transform 320ms var(--k9-ease),
        filter 320ms var(--k9-ease);
}

/* Small screens ------------------------------------------------------ */

@media (max-width: 600px) {
    .wk9-intro {
        --wk9-intro-media: 58px;
        --wk9-intro-bottom: var(--k9-space-24);
        left: var(--k9-space-4);
    }

    .wk9-intro__link {
        gap: var(--k9-space-3);
        padding: var(--k9-space-2);
        padding-right: var(--k9-space-8);
        border-radius: var(--k9-radius-md);
    }

    .wk9-intro__media { border-radius: var(--k9-radius-sm); }

    /* Two tiers instead of three — the eyebrow is the one that can go. */
    .wk9-intro__eyebrow { display: none; }
}

/* Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html.wk9-intro-armed .wk9-intro,
    html.wk9-intro-armed .wk9-intro__media,
    html.wk9-intro-armed .wk9-intro__eyebrow,
    html.wk9-intro-armed .wk9-intro__title,
    html.wk9-intro-armed .wk9-intro__cta,
    html.wk9-intro-armed .wk9-intro__close {
        opacity: 1;
        transform: none !important;
        translate: none !important;
        filter: none !important;
        transition: none !important;
        will-change: auto;
    }

    html.wk9-intro-armed .wk9-intro { pointer-events: auto; }
    html.wk9-intro-armed .wk9-intro.is-out { opacity: 0; pointer-events: none; }
    .wk9-intro.is-in .wk9-intro__link::after { animation: none; }
    .wk9-intro__link:hover { transform: none; }
    .wk9-intro__media img { transition: none; }
}