/* Agent 14 — book.html conversion redesign (book.html only).
   Tokens use the DESIGN-CONTRACT names; values match main.css wherever
   they overlap, so no shared component changes appearance. This file is
   linked only from book.html. No webfonts, no external requests. */

/* Shared tokens (contract names) */
:root{
  --navy:#0B1220; --teal:#20C9C0; --blue:#0E5BD6; --ink:#0B1220;
  --muted:#5B6472; --paper:#FFFFFF; --line:#E5E7EB;
  --radius-sm:10px; --radius-md:14px; --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(11,18,32,.06);
  --shadow-md:0 8px 24px rgba(11,18,32,.08);
  --shadow-lg:0 24px 48px rgba(11,18,32,.14);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:150ms; --dur-normal:300ms; --dur-slow:500ms;
}

/* ---- Reveal motion (transform + opacity only) -------------------------
   Safety note: the hidden state applies ONLY once book-reveal.js has run
   (it adds .js-reveal to <html> first). Without JS, or with JS failing,
   content renders fully visible — content is never hidden by CSS alone. */
.reveal{
  transition:opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.js-reveal .reveal{opacity:0;transform:translateY(16px)}
.js-reveal .reveal.is-visible{opacity:1;transform:translateY(0)}
/* Stagger inside grids: 2nd card +90ms, 3rd card +180ms. */
.grid > .reveal:nth-child(2){--reveal-delay:90ms}
.grid > .reveal:nth-child(3){--reveal-delay:180ms}

/* ---- Hero decorative art (abstract geometry, aria-hidden) ------------ */
.book-hero{overflow:hidden}
.book-hero-art{
  position:absolute;top:28px;right:0;width:340px;height:220px;
  opacity:.55;pointer-events:none;
}
@media(max-width:900px){.book-hero-art{display:none}}

/* ---- Two-route chooser ------------------------------------------------ */
.route-chooser{position:relative}
/* Progress-style journey rail: dots + line, purely decorative, no words. */
.route-journey{display:flex;align-items:center;gap:10px;margin:22px 0 6px}
.route-journey-line{
  height:2px;flex:1;border-radius:2px;opacity:.55;
  background:linear-gradient(90deg,var(--teal),var(--blue));
}
.route-journey-dot{width:10px;height:10px;border-radius:50%;background:var(--teal);flex:none}
.route-journey-dot-mid{background:var(--navy)}
.route-journey-dot-end{background:var(--blue)}

/* Route cards: whole card is the anchor to its destination (no new words).
   Teal = Route 1 direct booking; blue = Route 2 request form. */
a.route-card, a.route-card:hover{color:var(--ink);text-decoration:none}
.route-card{position:relative;overflow:hidden;padding-top:28px}
.route-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:var(--teal);
}
.route-card-request::before{background:var(--blue)}
.route-card .route-icon{
  width:52px;height:52px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;background:#E6F7F6;
}
.route-card-request .route-icon{background:#EEF4FF}
.route-card .route-icon svg{width:28px;height:28px}
/* Hover lifts the shadow only (no layout-moving transform). The reveal
   transition-delay applies to opacity/transform only, so hover stays instant. */
.route-card{transition:opacity var(--dur-slow) var(--ease-out),
  transform var(--dur-slow) var(--ease-out),
  box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
  transition-delay:var(--reveal-delay,0ms),var(--reveal-delay,0ms),0ms,0ms}
.route-card:hover{box-shadow:var(--shadow-lg);border-color:var(--teal)}
.route-card-request:hover{border-color:var(--blue)}
/* Progress-style step rail inside each route card (decorative, no words). */
.route-steps{display:flex;align-items:center;gap:8px;margin-top:18px}
.route-steps-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none}
.route-steps-dot:nth-child(3),.route-steps-dot:nth-child(5){opacity:.35}
.route-steps-line{height:2px;width:34px;background:var(--line);border-radius:2px}
.route-card-request .route-steps-dot{background:var(--blue)}

/* ---- Destination frames ------------------------------------------------
   Elegant containers around the embeds. Iframe contents are untouched;
   only the wrapper is styled. Accent bar colour matches the route card. */
.route-frame{
  position:relative;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:28px;overflow:hidden;
}
.route-frame::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:var(--blue);
}
.route-frame-direct::before{background:var(--teal)}
.route-frame .form-embed,.route-frame .tidycal-embed{border-radius:var(--radius-md)}
/* Destination band: the booking section reads as the payoff of Route 1. */
.route-destination{background:#F2F4F7}

/* ---- Reduced motion: everything fully visible, no transitions --------- */
@media (prefers-reduced-motion:reduce){
  .reveal,.js-reveal .reveal{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
  .route-card:hover{box-shadow:var(--shadow-md)}
}

/* ---- Small screens ------------------------------------------------------ */
@media(max-width:640px){
  .route-frame{padding:20px}
  .route-steps-line{width:22px}
}