/* ===========================================================================
   intro-dialog — the three-step welcome tour
   ---------------------------------------------------------------------------
   Scope: #intro-dialog
   Depends on: css/tokens.css, css/base.css, styles.css (.livya-dialog)

   Each slide stages a small, recognisable copy of the real Livya module it is
   talking about — a gallery tile, the unit list, a point on the map — and a
   cursor performs the click the visitor is being asked to make. The mock is
   built from the same tokens as the site, so it restyles with the presets and
   the customizer colours instead of drifting away from them.
   ========================================================================= */

#intro-dialog { width: min(920px, calc(100vw - 32px)); }
#intro-dialog .intro-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.intro-eyebrow { margin: 0; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--vb-color-ink-soft); }

/* --- slides ---------------------------------------------------------------
   All three stay in the DOM and in flow so the dialog never jumps height
   between steps; only the active one is visible and reachable. */
.intro-slides { position: relative; display: grid; margin-top: 1.25rem; }
.intro-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 2.75rem); align-items: center; opacity: 0; visibility: hidden; transition: opacity var(--vb-dur-base) var(--vb-ease-out-soft); }
.intro-slide[data-intro-active] { opacity: 1; visibility: visible; }
.intro-copy { min-width: 0; }
.intro-step { margin: 0 0 .6rem; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--vb-color-ink-soft); }
.intro-copy h2 { margin: 0; }
.intro-copy .vb-body { margin-top: .75rem; color: var(--vb-color-ink-soft); max-width: 34ch; }

/* --- the staged mock ------------------------------------------------------ */
.intro-stage { position: relative; aspect-ratio: 4 / 3; min-width: 0; border-radius: var(--vb-radius-card); background: var(--vb-color-paper-muted); border: var(--vb-border-hair) solid var(--vb-color-rule); overflow: hidden; }
.intro-frames { position: absolute; inset: 0; }
.intro-frame { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; }
.intro-frame[data-intro-visible] { opacity: 1; visibility: visible; }
.intro-frame-tag { position: absolute; left: .75rem; top: .75rem; z-index: 3; padding: .3rem .55rem; border-radius: var(--vb-radius-sm); background: var(--vb-color-paper); color: var(--vb-color-ink); font-size: .6rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; box-shadow: var(--vb-shadow-card); }

/* The heart button, drawn like the one in the Livya modules. */
.intro-heart { position: absolute; right: .75rem; top: .75rem; z-index: 3; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: var(--vb-radius-pill); background: var(--vb-color-paper); color: var(--vb-color-ink); box-shadow: var(--vb-shadow-card); }
.intro-heart svg { width: 1.15rem; height: 1.15rem; }
.intro-heart--inline { position: static; flex: none; width: 2rem; height: 2rem; box-shadow: none; background: transparent; }
/* Saved: the outline fills, as it does in the real module. */
[data-intro-saved] { color: var(--vb-color-accent); }
[data-intro-saved] svg { fill: currentColor; }

/* Frame 1 — a gallery image. */
.intro-frame--media img { width: 100%; height: 100%; object-fit: cover; }

/* Frame 2 — the unit list and its columns. */
.intro-frame--units { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 2.5rem .75rem 1rem; background: var(--vb-color-paper); }
.intro-unit-head, .intro-unit-row { display: grid; grid-template-columns: 2rem minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); align-items: center; gap: .5rem; padding: .5rem .4rem; font-size: clamp(.58rem, 1.15vw, .7rem); }
.intro-unit-head { color: var(--vb-color-ink-soft); border-bottom: var(--vb-border-hair) solid var(--vb-color-rule); font-weight: 600; }
.intro-unit-row { border-bottom: var(--vb-border-hair) solid var(--vb-color-rule); color: var(--vb-color-ink-soft); }
.intro-unit-row.is-target { color: var(--vb-color-ink); }
.intro-unit-name { font-weight: 600; color: var(--vb-color-ink); }
.intro-unit-heart { display: grid; place-items: center; color: var(--vb-color-rule); }
.intro-unit-row.is-target .intro-unit-heart { color: var(--vb-color-ink); }
.intro-unit-heart svg { width: 1rem; height: 1rem; }
.intro-unit-row sup { font-size: .75em; }

/* Frame 3 — a point of interest on the map. */
.intro-frame--place { background: var(--vb-color-paper-sunk); }
.intro-map-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--vb-color-rule) 1px, transparent 1px), linear-gradient(90deg, var(--vb-color-rule) 1px, transparent 1px); background-size: 22% 26%; opacity: .7; }
.intro-pin { position: absolute; width: .6rem; height: .6rem; border-radius: var(--vb-radius-pill); background: var(--vb-color-ink-soft); box-shadow: 0 0 0 4px var(--vb-color-paper); }
.intro-pin--a { left: 18%; top: 26%; }
.intro-pin--b { right: 16%; bottom: 22%; }
.intro-place-card { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; align-items: center; gap: .6rem; width: min(78%, 17rem); padding: .5rem; border-radius: var(--vb-radius-sm); background: var(--vb-color-paper); box-shadow: var(--vb-shadow-card); }
.intro-place-card img { flex: none; width: 3rem; height: 3rem; border-radius: 4px; object-fit: cover; }
.intro-place-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.intro-place-copy b { font-size: .72rem; }
.intro-place-copy span { font-size: .62rem; color: var(--vb-color-ink-soft); }

/* A running count, so saving visibly does something. */
.intro-badge-float { position: absolute; right: .75rem; bottom: .75rem; z-index: 4; display: flex; align-items: center; gap: .3rem; padding: .35rem .6rem; border-radius: var(--vb-radius-pill); background: var(--vb-color-ink); color: var(--vb-color-paper); font-size: .68rem; font-weight: 600; }
.intro-badge-float svg { width: .85rem; height: .85rem; fill: currentColor; }

/* Slide 2 — the site header. */
[data-intro-stage="access"] { display: flex; flex-direction: column; justify-content: center; gap: .6rem; padding: 1rem; }
.intro-topbar { display: flex; align-items: center; gap: .5rem; padding: .6rem .7rem; border-radius: var(--vb-radius-sm); background: var(--vb-color-paper); box-shadow: var(--vb-shadow-card); }
.intro-topbar__logo { width: 3.2rem; height: 1rem; flex: none; }
.intro-navline { width: 1.6rem; height: .3rem; border-radius: var(--vb-radius-pill); background: var(--vb-color-rule); }
.intro-navline:first-of-type { margin-inline-start: .5rem; }
.intro-favbtn { display: flex; align-items: center; gap: .35rem; margin-inline-start: auto; padding: .35rem .5rem; border: 0; border-radius: var(--vb-radius-sm); background: transparent; color: var(--vb-color-ink); font-size: .62rem; font-weight: 600; white-space: nowrap; }
.intro-favbtn svg { width: .95rem; height: .95rem; }
.intro-count { display: grid; place-items: center; min-width: 1rem; height: 1rem; padding: 0 .2rem; border-radius: var(--vb-radius-pill); background: var(--vb-color-accent); color: var(--vb-color-accent-contrast); font-size: .55rem; }
.intro-drawer { padding: .75rem; border-radius: var(--vb-radius-sm); background: var(--vb-color-paper); box-shadow: var(--vb-shadow-card); opacity: 0; translate: 0 -.5rem; transition: opacity var(--vb-dur-base) var(--vb-ease-out-soft), translate var(--vb-dur-base) var(--vb-ease-out-soft); }
.intro-drawer[data-intro-open] { opacity: 1; translate: 0 0; }
.intro-drawer p { margin: 0 0 .5rem; font-size: .66rem; }
.intro-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.intro-thumbs img { width: 100%; height: 3rem; object-fit: cover; border-radius: 4px; }

/* Slide 3 — the contact form. */
[data-intro-stage="brochure"] { display: flex; flex-direction: column; justify-content: center; gap: .6rem; padding: 1rem; }
.intro-formcard { display: flex; flex-direction: column; gap: .55rem; padding: .85rem; border-radius: var(--vb-radius-sm); background: var(--vb-color-paper); box-shadow: var(--vb-shadow-card); }
.intro-formfav { display: flex; align-items: center; gap: .5rem; padding: .55rem; border: var(--vb-border-hair) solid var(--vb-color-accent); border-radius: var(--vb-radius-sm); background: var(--vb-color-accent-soft); font-size: .64rem; }
.intro-formfav svg { flex: none; width: 1rem; height: 1rem; fill: currentColor; color: var(--vb-color-accent); }
.intro-input { height: 1.6rem; border-radius: 4px; background: var(--vb-color-paper-muted); border: var(--vb-border-hair) solid var(--vb-color-rule); }
.intro-input--wide { height: 2.6rem; }
.intro-submit { margin-top: auto; padding: .5rem; border: 0; border-radius: var(--vb-radius-btn); background: var(--vb-color-accent); color: var(--vb-color-accent-contrast); font-size: .66rem; font-weight: 600; }
.intro-mail { align-self: center; translate: 0 .5rem; z-index: 4; display: flex; align-items: center; gap: .45rem; padding: .5rem .75rem; border-radius: var(--vb-radius-pill); background: var(--vb-color-ink); color: var(--vb-color-paper); font-size: .66rem; font-weight: 600; opacity: 0; transition: opacity var(--vb-dur-base) var(--vb-ease-out-soft), translate var(--vb-dur-base) var(--vb-ease-out-soft); }
.intro-mail[data-intro-open] { opacity: 1; translate: 0 0; }
.intro-mail svg { width: 1rem; height: 1rem; }

/* --- the cursor -----------------------------------------------------------
   Positioned from the top-left so a translate lands its tip on the target. */
.intro-cursor { position: absolute; left: 0; top: 0; z-index: 6; width: 1.9rem; height: 2.2rem; opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .22)); }
.intro-cursor__arrow { width: 100%; height: 100%; }
/* The ring is the click: it blooms out of the cursor tip on contact. */
.intro-cursor::after { content: ""; position: absolute; left: .1rem; top: .1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--vb-color-accent); opacity: 0; scale: .4; }
.intro-cursor[data-intro-click]::after { animation: intro-ring var(--vb-dur-slow, .5s) var(--vb-ease-out-soft); }
@keyframes intro-ring { from { opacity: .9; scale: .4; } to { opacity: 0; scale: 1.5; } }

/* --- footer --------------------------------------------------------------- */
.intro-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: var(--vb-border-hair) solid var(--vb-color-rule); }
.intro-skip { color: var(--vb-color-ink-soft); }
.intro-dots { display: flex; align-items: center; gap: .4rem; }
.intro-dot { width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: var(--vb-radius-pill); background: var(--vb-color-rule); transition: background-color var(--vb-dur-base) var(--vb-ease-out-soft), width var(--vb-dur-base) var(--vb-ease-out-soft); }
.intro-dot[aria-selected="true"] { width: 1.25rem; background: var(--vb-color-ink); }
.intro-actions { display: flex; align-items: center; gap: .6rem; }
.intro-actions .vb-btn { padding: .65em 1.2em; }
.intro-actions .vb-btn[disabled] { opacity: .4; cursor: not-allowed; }

@media (max-width: 52rem) {
  .intro-slide { grid-template-columns: 1fr; gap: 1.25rem; }
  .intro-stage { aspect-ratio: 16 / 10; }
  .intro-copy .vb-body { max-width: none; }
  .intro-footer { flex-wrap: wrap; justify-content: center; gap: .85rem; }
  .intro-skip { order: 3; }
  .intro-actions { order: 2; width: 100%; }
  .intro-actions .vb-btn { flex: 1; justify-content: center; }
}

/* Reduced motion: the cursor never travels. Each stage is shown already saved,
   which is the information the slide carries; the movement was only flavour. */
@media (prefers-reduced-motion: reduce) {
  .intro-cursor { display: none; }
  .intro-slide, .intro-drawer, .intro-mail { transition: none; }
}