/* ============================================================
   BonVoyage — signature motion
   Loaded by index.html only, after brand.css.

   One idea, carried through three places: things ARRIVE.
   The page is a ten-step journey, so reaching a step should feel
   like getting a stamp in a passport — not like a div fading in.

   1. STAMP   the numbered step marker presses in like ink
   2. SETTLE  revealed content overshoots slightly and settles,
              as though set down rather than faded up
   3. STROKE  a tangerine brushstroke draws under "smile."

   All three are additive over brand.css and all three are off
   under prefers-reduced-motion.
   ============================================================ */

/* ---------- 1 · STAMP ----------
   A real passport stamp lands hard, bounces, and sits crooked.
   The overshoot in the middle of the keyframes is the press;
   the final -4deg is the crookedness that makes it read as ink
   rather than as a UI badge. */
@keyframes bv-stamp {
  0%   { opacity: 0; transform: scale(2.1) rotate(-24deg); }
  45%  { opacity: 1; transform: scale(.88) rotate(-1deg); }
  68%  { transform: scale(1.07) rotate(-6deg); }
  100% { opacity: 1; transform: scale(1) rotate(-4deg); }
}

/* the ink spreading out from under the stamp as it presses */
@keyframes bv-ink {
  0%   { opacity: .4; transform: scale(.55); }
  100% { opacity: 0;  transform: scale(2.4); }
}

.step-tag i {
  position: relative;
  transform: rotate(-4deg);          /* resting state, no JS required */
  box-shadow: 0 0 0 2px rgba(61, 61, 61, .14);
}
.step-tag i::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--charcoal);
  opacity: 0;
  pointer-events: none;
}

/* fire when the section the marker belongs to is revealed */
.reveal-on [data-reveal] .step-tag i { opacity: 0; }
.reveal-on [data-reveal].in .step-tag i {
  animation: bv-stamp .62s cubic-bezier(.2, .8, .3, 1.15) both;
  animation-delay: .12s;
}
.reveal-on [data-reveal].in .step-tag i::after {
  animation: bv-ink .62s ease-out both;
  animation-delay: .12s;
}

/* the sky-blue marker on the delivery band stamps the same way */
.journey .step-tag i { box-shadow: 0 0 0 2px rgba(31, 72, 84, .16); }
.journey .step-tag i::after { background: var(--sky-ink); }

/* ---------- 2 · SETTLE ----------
   brand.css reveals with a flat ease-out. Swapping the curve for a
   gentle overshoot changes the read from "faded in" to "placed".
   Same duration, same distance — only the timing function moves. */
.reveal-on [data-reveal] {
  transition-timing-function: cubic-bezier(.16, .84, .36, 1.08);
}

/* ---------- 3 · STROKE ----------
   "Pack your bags with a smile." is the trademark line, and the
   watercolour brushstroke is an approved motif in the playbook.
   So the stroke draws under the one word the line turns on. */
.hero h1 em { position: relative; display: inline-block; }
.hero h1 em::after {
  content: "";
  position: absolute;
  left: -.04em;
  right: -.04em;
  bottom: .04em;
  height: .11em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tangerine), var(--tangerine-deep));
  opacity: .5;
  transform: scaleX(0);
  transform-origin: left center;
  animation: bv-stroke .8s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: .55s;                /* lands just after the headline settles */
  pointer-events: none;
}
@keyframes bv-stroke {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- reduced motion ----------
   Everything resolves to its finished state, instantly. */
@media (prefers-reduced-motion: reduce) {
  .step-tag i {
    opacity: 1 !important;
    transform: rotate(-4deg) !important;
    animation: none !important;
  }
  .step-tag i::after { animation: none !important; opacity: 0 !important; }
  .hero h1 em::after { animation: none !important; transform: scaleX(1); }
}

/* no JS: brand.css never adds .reveal-on, so nothing is hidden and
   the stamp simply sits at its resting angle. */

/* ============================================================
   4 · SPOTLIGHT — the rail picks each product up in turn
   ------------------------------------------------------------
   A drag rail asks the customer to do the work. A shop window
   doesn't. The active card lifts and scales as though picked up
   off the shelf, the rest sit back, and the rail advances on its
   own. Opt in per rail with data-autoplay.

   Anything that moves by itself needs a way to stop it (WCAG
   2.2.2), so spotlight.js injects a pause control, and autoplay
   halts on hover, on keyboard focus, when the tab is hidden,
   when the rail scrolls out of view, and permanently the moment
   someone scrolls the rail by hand.
   ============================================================ */
.rail[data-autoplay]{scroll-behavior:smooth}
/* The lift is the whole emphasis. Scaling the card, and scaling the photo
   again inside it, pushed the image past the tile it sits in — and dimming the
   other five made the row unreadable as a comparison. See section 5. */
.rail[data-autoplay] .pcard .ph{transition:box-shadow .45s ease}

/* control bar injected by spotlight.js */
.rail-auto{display:flex;align-items:center;gap:12px;margin-top:12px}
.rail-auto button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:38px;padding:6px 14px;border-radius:var(--r-pill);
  border:1.5px solid var(--hair);background:var(--canvas);color:var(--charcoal);
  font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;
}
.rail-auto button:hover{border-color:var(--charcoal)}
.rail-auto svg{flex:none}
.rail-dots{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rail-dots b{
  width:7px;height:7px;border-radius:50%;background:var(--hair-strong);
  transition:width .3s ease, background .3s ease;
}
.rail-dots b.on{width:22px;border-radius:999px;background:var(--tangerine-deep)}
.rail-auto .rail-hint{font-size:12.5px;color:var(--muted);margin-left:auto}

/* paused: everything returns to full weight, nothing is dimmed */
.rail[data-autoplay].paused .pcard{opacity:1;transform:none}
.rail[data-autoplay].paused .pcard .ph{box-shadow:none}

@media (prefers-reduced-motion: reduce){
  .rail[data-autoplay] .pcard{opacity:1!important;transform:none!important;transition:none!important}
  .rail[data-autoplay] .pcard .ph{box-shadow:none!important}
  .rail-auto{display:none}
}

/* ============================================================
   5 · THE ROW, LEVEL — supersedes the spread
   ------------------------------------------------------------
   A product row is a comparison surface: six things weighed
   against each other at a glance. Tilt, shrink and dim turn it
   into a slideshow where only one card is readable at a time,
   so none of that survives here. Every card is the same size,
   upright and at full strength; the active one lifts, which is
   all the emphasis a row like this needs.

   The paper-and-boarding-pass language still runs the page — it
   lives on the contact stubs and the checkout receipt, where the
   object really is a ticket and nothing is being compared.
   ============================================================ */
.rail[data-autoplay]{padding-block:8px 4px}
.rail[data-autoplay] .pcard{
  opacity:1;
  transform:none;
  filter:none;
  transition:transform .45s cubic-bezier(.22,.8,.28,1), box-shadow .45s ease;
}
.rail[data-autoplay] .pcard.picked{transform:translateY(-6px)}
.rail[data-autoplay] .pcard.picked .ph{box-shadow:0 10px 26px rgba(42,42,42,.13)}

/* paused or reduced motion — everything sits still */
.rail[data-autoplay].paused .pcard{transform:none}
@media (prefers-reduced-motion: reduce){
  .rail[data-autoplay] .pcard{transform:none!important;transition:none!important}
  .rail[data-autoplay] .pcard .ph{box-shadow:none!important}
}

/* control bar is now dots only, centred and unobtrusive */
.rail-auto{justify-content:center;gap:0;margin-top:6px}
.rail-auto button{display:none}
.rail-auto .rail-hint{display:none}

/* The lifted card grows past the rail's edges, and overflow:auto clips it.
   Pad the scroll box and pull the margin back so nothing shifts visually. */
.rail[data-autoplay]{padding-inline:12px;margin-inline:-12px;scroll-padding-inline:12px}

/* Each journey step's label trails off into the route line, so the
   ten steps read as one continuous flight rather than ten headings. */
.step-tag{display:inline-flex;align-items:center}
.step-tag::after{
  content:"";
  width:clamp(36px,11vw,132px);
  border-top:2px dotted var(--sky);
  opacity:.75;
  margin-left:4px;
}
.journey .step-tag::after{border-top-color:var(--sky-ink);opacity:.45}