/* ==========================================================================
   Hồng, the XO guide
   A glass card in the corner of every page. Her 3D bust stands in front
   of the card and pokes out above it, the speech bubble sits beside her,
   and a dotted gold line runs from her finger to whatever she is talking
   about. Minimised, she is a small face in the corner with a WhatsApp
   button a step above her, and now and then a one line whisper beside
   her that points at one of the two. Loaded after style.css; reuses its
   tokens and buttons.
   ========================================================================== */

.hong {
    --hong-w: 284px;              /* a compact card: she is a guide, not a hero */
    --hong-stage: 90px;
    --hong-cs: 0.58;              /* her canvas is drawn at 360x250 and scaled down */
    --hong-photo-w: 120px;        /* her portrait, cut from the photo, sits at this width */
    --hong-film-w: 137px;         /* the film is cropped wider on the left for her raised hand */
    --hong-face-w: 172%;          /* how her face fills the small round button */
    --hong-face-x: -34%;
    --hong-face-y: -11%;
    /* Where her features sit: the head layer within the body image, then
       eyes and mouth within the head layer. Generated from the photo crop. */
    --hp-head-l: 13.37%; --hp-head-t: 1.43%; --hp-head-w: 71.9%;
    --hp-pivot-x: 49.87%; --hp-pivot-y: 98.48%;
    --hp-eye-l-x: 35.58%; --hp-eye-l-y: 50%; --hp-eye-r-x: 64.15%; --hp-eye-r-y: 49.09%;
    --hp-eye-w: 16.17%; --hp-eye-h: 7.93%; --hp-lid: #d8b09c;
    --hp-mouth-l: 32.35%; --hp-mouth-t: 65.85%; --hp-mouth-w: 37.74%;
    --hp-mouth-in-x: 51.21%; --hp-mouth-in-y: 81.4%; --hp-mouth-in-w: 16.17%; --hp-mouth-in-h: 4.88%;
    --hong-glass: rgba(255, 255, 255, 0.82);
    --hong-r: 1.25rem;            /* the corner she keeps: card, face and WhatsApp share it */
    --hong-b: 1.25rem;
    --hong-fab: 46px;
}

/* --- Full-page layers (spotlight and pointer line) --------------------- */
.hong-dim, .hong-lines {
    position: fixed; inset: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: visible;
}
.hong-dim { z-index: 85; opacity: 0; transition: opacity 480ms var(--ease-out); }
.hong[data-tour="on"] .hong-dim { opacity: 1; }
.hong-lines { z-index: 101; }

.hong-halo {
    fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0;
    transition: opacity 320ms var(--ease-out);
}
.hong[data-tour="on"] .hong-halo, .hong[data-point] .hong-halo { opacity: 0.8; }
/* Pointing at her own button or from the corner, the line runs over the card */
.hong[data-point] .hong-lines { z-index: 111; }

.hong-path {
    fill: none; stroke: var(--gold); stroke-width: 2.6;
    stroke-linecap: round; stroke-dasharray: 0 8;
    animation: hong-march 720ms linear infinite;
}
.hong-draw {
    fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round;
    stroke-dasharray: 1; stroke-dashoffset: 1;
    transition: stroke-dashoffset 640ms var(--ease-out);
}
.hong-lines.is-drawn .hong-draw { stroke-dashoffset: 0; }
.hong-lines.is-cut .hong-draw { transition: none; }

.hong-tip {
    fill: var(--gold); opacity: 0; scale: 0.4;
    transform-box: fill-box; transform-origin: center;
    transition: opacity 180ms var(--ease-out) 460ms, scale 320ms var(--ease-out) 460ms;
}
.hong-tip-ring {
    fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0;
    transform-box: fill-box; transform-origin: center;
}
.hong-lines.is-drawn .hong-tip { opacity: 1; scale: 1; }
.hong-lines.is-drawn .hong-tip-ring { animation: hong-pulse 1.9s var(--ease-out) 560ms infinite; }

@keyframes hong-march { to { stroke-dashoffset: -8; } }
@keyframes hong-pulse {
    0%   { opacity: 0.9; scale: 0.6; }
    70%  { opacity: 0; scale: 2.6; }
    100% { opacity: 0; scale: 2.6; }
}

/* --- The card ---------------------------------------------------------- */
.hong-dock {
    position: fixed; right: var(--hong-r); bottom: var(--hong-b); z-index: 110;
    width: var(--hong-w); max-width: calc(100vw - 1.5rem);
    display: grid; grid-template-columns: var(--hong-stage) 1fr;
    border-radius: 20px;
    background: var(--hong-glass); color: var(--c-ink);
    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.65) inset, 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-lg);
    transform-origin: 100% 100%;
    opacity: 0; translate: 0 18px; scale: 0.96; pointer-events: none;
    transition: opacity 260ms var(--ease-out), translate 420ms var(--ease-out), scale 420ms var(--ease-out),
                bottom 360ms var(--ease-out);
}
.hong[data-state="open"] .hong-dock { opacity: 1; translate: 0 0; scale: 1; pointer-events: auto; }
.hong-dock:focus { outline: none; }

.hong-min {
    position: absolute; top: 8px; right: 8px; z-index: 4;
    width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    color: var(--c-ink-2); background: rgba(0,0,0,0.06);
    transition: background-color var(--t) ease, color var(--t) ease, scale 120ms var(--ease-out);
}
.hong-min:active { scale: 0.92; }
.hong-min svg { width: 10px; height: 10px; }
@media (hover: hover) and (pointer: fine) {
    .hong-min:hover { background: rgba(0,0,0,0.1); color: var(--c-ink); }
}

/* --- Her stage --------------------------------------------------------- */
.hong-stage { position: relative; min-height: 104px; perspective: 640px; }
/* Her portrait: the real photo, cut out, standing where the 3D bust
   stood, in front of the canvas that now draws only her arms. The body
   breathes and sways; the head layer turns, tilts and nods on its own,
   the eyelids blink and the mouth patch opens while she talks. The
   bottom dissolves into the card. */
.hong-photo {
    position: absolute; bottom: -4px; left: 47%; z-index: 4;
    width: var(--hong-photo-w); pointer-events: none; perspective: 600px;
    transform: translate3d(-50%, 0, 0); transform-origin: 50% 100%;
    opacity: 0; transition: opacity 360ms var(--ease-out); will-change: transform;
}
.hong-body {
    display: block; width: 100%; height: auto;
    -webkit-mask-image: linear-gradient(#000 82%, transparent 100%);
    mask-image: linear-gradient(#000 82%, transparent 100%);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.16));
}
.hong-head {
    position: absolute; left: var(--hp-head-l); top: var(--hp-head-t); width: var(--hp-head-w);
    transform-origin: var(--hp-pivot-x) var(--hp-pivot-y); will-change: transform;
}
.hong-head[hidden] { display: none; }
.hong-head-img { display: block; width: 100%; height: auto; }
.hong-lid {
    position: absolute; width: var(--hp-eye-w); height: var(--hp-eye-h);
    translate: -50% -50%; border-radius: 50%;
    background: var(--hp-lid); box-shadow: inset 0 -1px 0 rgba(70, 40, 30, 0.45);
    opacity: 0;
}
.hong-lid-l { left: var(--hp-eye-l-x); top: var(--hp-eye-l-y); }
.hong-lid-r { left: var(--hp-eye-r-x); top: var(--hp-eye-r-y); }
.hong-mouth {
    position: absolute; left: var(--hp-mouth-l); top: var(--hp-mouth-t); width: var(--hp-mouth-w); height: auto;
    transform-origin: 50% 22%;
}
.hong-mouth-in {
    position: absolute; left: var(--hp-mouth-in-x); top: var(--hp-mouth-in-y);
    width: var(--hp-mouth-in-w); height: var(--hp-mouth-in-h); border-radius: 50%;
    background: #4a2427; opacity: 0; transform: translate(-50%, -50%) scale(0.6, 0.2);
}
.hong-stage.is-photo .hong-photo { opacity: 1; }
.hong-stage.is-photo .hong-flat { opacity: 0; }
/* Her film: generated clips of her drawn on the canvas, in the photo's place */
.hong-stage.is-video .hong-canvas {
    left: 47%; bottom: -4px; width: var(--hong-film-w); height: auto; scale: 1; margin-left: -8px;
    transform: translate3d(-50%, 0, 0); transform-origin: 50% 100%; opacity: 1; z-index: 3;
    /* the fade at the bottom is baked into each clip's matte: a CSS mask
       on a WebGL canvas paints its transparent area dark */
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.12));
}
/* Photo to film: the canvas fades in over her photo (same pose), then the
   photo drops away in one step. It never fades itself: a fading masked
   layer paints its transparent area dark. */
.hong-stage.is-video .hong-canvas { transition: opacity 150ms linear; }
.hong-stage.is-video .hong-photo, .hong-stage.is-video .hong-flat { opacity: 0; transition: opacity 0ms linear 170ms; }
.hong-canvas, .hong-flat {
    position: absolute; bottom: -4px; left: calc(var(--hong-stage) / 2 - 180px);
    width: 360px; height: 250px; pointer-events: none;
    transform-origin: 50% 100%; scale: var(--hong-cs);
}
.hong-canvas { z-index: 3; opacity: 0; transition: opacity 360ms var(--ease-out); }
.hong-flat { z-index: 2; display: grid; place-items: end center; transition: opacity 360ms var(--ease-out); }
.hong-flat svg { width: 132px; height: 132px; margin-bottom: 18px; }
.hong-stage.is-3d .hong-canvas { opacity: 1; }
.hong-stage.is-3d .hong-flat { opacity: 0; }

/* --- Speech bubble ----------------------------------------------------- */
.hong-bubble {
    position: relative; z-index: 2;
    padding: 0.7rem 0.8rem 0.65rem 0.25rem;
    display: grid; gap: 0.3rem; align-content: start; min-width: 0;
}
.hong-name { display: flex; align-items: baseline; gap: 0.35rem; padding-right: 1.4rem; }
.hong-name strong { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.02em; }
.hong-role { font-size: 0.6875rem; color: var(--c-ink-3); white-space: nowrap; }
.hong-count {
    margin-left: auto; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.04em;
    color: var(--gold-ink); white-space: nowrap;
}
.hong-title {
    font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--gold-ink);
}
.hong-say {
    font-size: 0.78125rem; line-height: 1.38; letter-spacing: -0.008em; color: var(--c-ink);
    min-height: 4.14em; text-wrap: pretty;
}
.hong-say.is-typing::after {
    content: ""; display: inline-block; width: 2px; height: 0.95em; margin-left: 2px;
    vertical-align: -0.15em; background: var(--gold); border-radius: 1px;
    animation: hong-caret 900ms steps(2, jump-none) infinite;
}
@keyframes hong-caret { to { opacity: 0; } }

.hong-foot { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.1rem; }
.hong-steps { display: flex; gap: 4px; align-items: center; }
.hong-steps li {
    width: 5px; height: 5px; border-radius: 3px; background: rgba(0,0,0,0.14);
    transition: width 280ms var(--ease-out), background-color 200ms ease;
}
.hong-steps li.is-done { background: var(--gold); opacity: 0.5; }
.hong-steps li.is-on { width: 14px; background: var(--gold); }
.hong[data-tour="off"] .hong-steps { display: none; }

.hong-actions { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.hong-actions .btn-sm { min-height: 28px; padding: 0 0.75rem; font-size: 0.75rem; gap: 0.25rem; }
.hong-actions .btn-sm svg { width: 12px; height: 12px; }
.hong-actions .btn-ghost { box-shadow: none; color: var(--c-ink-2); }
.hong-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--c-ink-2); cursor: pointer;
    transition: background-color var(--t) ease, color var(--t) ease, scale 120ms var(--ease-out);
}
.hong-back:active { scale: 0.92; }
.hong-back[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
    .hong-back:hover { background: rgba(0,0,0,0.06); color: var(--c-ink); }
    .hong-actions .btn-ghost:hover { background: rgba(0,0,0,0.05); color: var(--c-ink); }
}

/* --- Minimised: just her face ------------------------------------------ */
.hong-fab {
    position: fixed; right: var(--hong-r); bottom: var(--hong-b); z-index: 110;
    width: var(--hong-fab); height: var(--hong-fab); padding: 0; border: 0; border-radius: 50%;
    background: #fff; cursor: pointer;
    box-shadow: 0 0 0 2px var(--gold), var(--shadow-md);
    opacity: 0; scale: 0.7; pointer-events: none;
    transition: opacity 220ms var(--ease-out), scale 360ms var(--ease-out),
                translate 260ms var(--ease-out), box-shadow 260ms var(--ease-out),
                bottom 360ms var(--ease-out);
}
.hong[data-state="min"] .hong-fab { opacity: 1; scale: 1; pointer-events: auto; }
.hong-fab:active { scale: 0.94; }
.hong-fab-face { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; display: block; }
.hong-fab-face svg { position: absolute; left: -12%; top: -6%; width: 124%; height: 124%; }
/* Her face from the portrait fills the circle; the drawing beneath is the fallback */
.hong-fab-face img {
    position: absolute; width: var(--hong-face-w, 240%);
    left: var(--hong-face-x, -70%); top: var(--hong-face-y, -10%);
    max-width: none; background: #fff;
}
.hong-fab-label {
    position: absolute; right: calc(100% + 0.6rem); top: 50%; translate: 6px -50%;
    padding: 0.3rem 0.6rem; border-radius: 999px; white-space: nowrap;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: -0.01em;
    color: var(--c-ink); background: var(--hong-glass);
    -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
    box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none;
    transition: opacity 180ms var(--ease-out), translate 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .hong-fab:hover { translate: 0 -2px; box-shadow: 0 0 0 2px var(--gold), var(--shadow-lg); }
    .hong-fab:hover .hong-fab-label, .hong-fab:focus-visible .hong-fab-label,
    .hong-wa:hover .hong-fab-label, .hong-wa:focus-visible .hong-fab-label { opacity: 1; translate: 0 -50%; }
}

/* --- WhatsApp, a step above her face ----------------------------------- */
.hong-wa {
    position: fixed; z-index: 110;
    right: calc(var(--hong-r) + (var(--hong-fab) - 38px) / 2);
    bottom: calc(var(--hong-b) + var(--hong-fab) + 10px);
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    color: #25d366; background: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-md);
    opacity: 0; scale: 0.7; pointer-events: none;
    transition: opacity 220ms var(--ease-out) 120ms, scale 360ms var(--ease-out) 120ms,
                translate 260ms var(--ease-out), box-shadow 260ms var(--ease-out),
                bottom 360ms var(--ease-out);
}
.hong-wa > svg { width: 21px; height: 21px; fill: currentColor; }
.hong[data-state="min"] .hong-wa { opacity: 1; scale: 1; pointer-events: auto; }
.hong-wa:active { scale: 0.94; }
@media (hover: hover) and (pointer: fine) {
    .hong-wa:hover { translate: 0 -2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-lg); }
}

/* --- A whisper: one line beside her face, with a pointer --------------- */
.hong-whisper {
    position: fixed; z-index: 110;
    right: calc(var(--hong-r) + var(--hong-fab) + 12px);
    bottom: calc(var(--hong-b) + var(--hong-fab) / 2);
    max-width: min(232px, calc(100vw - var(--hong-r) - var(--hong-fab) - 2.5rem));
    padding: 0.5rem 0.7rem 0.5rem 0.75rem; border-radius: 14px;
    font-size: 0.75rem; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em;
    color: var(--c-ink); background: var(--hong-glass); text-decoration: none; text-wrap: pretty;
    -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.65) inset, 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-md);
    opacity: 0; translate: 8px 50%; pointer-events: none;
    transition: opacity 220ms var(--ease-out), translate 360ms var(--ease-out), bottom 360ms var(--ease-out);
}
.hong-whisper::after {
    content: ""; position: absolute; right: -4px; top: 50%; width: 9px; height: 9px;
    translate: 0 -50%; rotate: 45deg; border-radius: 1.5px;
    background: var(--hong-glass); box-shadow: 1px -1px 0 rgba(0,0,0,0.06);
}
.hong.is-whisper .hong-whisper { opacity: 1; translate: 0 50%; pointer-events: auto; }
.hong.is-whisper .hong-fab-label { display: none; }
.hong-whisper:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .hong.is-whisper .hong-whisper:hover {
        translate: 0 calc(50% - 2px);
        box-shadow: 0 0 0 1px rgba(255,255,255,0.65) inset, 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-lg);
    }
}

/* Out of the way while the mobile menu or a lightbox is open */
body.nav-open .hong, body.lightbox-open .hong { visibility: hidden; }

/* --- Responsive: same card, smaller ------------------------------------ */
@media (max-width: 960px) {
    .hong { --hong-r: 0.75rem; --hong-b: 0.75rem; }
    body:has(.mobile-bar.is-visible) .hong { --hong-b: calc(0.75rem + 66px); }
}
@media (max-width: 480px) {
    .hong { --hong-w: 264px; --hong-stage: 80px; --hong-cs: 0.5; --hong-fab: 42px; --hong-photo-w: 104px; --hong-film-w: 118px; }
    .hong-stage.is-video .hong-canvas { margin-left: -7px; }
    .hong-dock { border-radius: 18px; }
    .hong-stage { min-height: 92px; }
    .hong-bubble { padding: 0.6rem 0.7rem 0.6rem 0.2rem; gap: 0.25rem; }
    .hong-say { font-size: 0.75rem; min-height: 4em; }
    /* The step counter needs the room the role label took */
    .hong[data-tour="on"] .hong-role { display: none; }
}

/* --- Preferences ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hong-path { animation: none; }
    .hong-tip-ring { display: none; }
    .hong-draw { stroke-dashoffset: 0; }
    .hong-say.is-typing::after { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .hong-dock, .hong-fab-label, .hong-whisper { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
    .hong-whisper::after { background: #fff; }
}
@media print { .hong { display: none !important; } }