/* ═════════════════════════════════════════════════════════════
   Live Canal Tour - visual polish layer (TIER 1C).
   This stylesheet stacks on top of live-tour.css and adds:
     - Pulsing GPS dot when in warn (connecting/waiting) state
     - Offline banner at the top of the map area
     - GPS-denied card in the bottom slot
     - Stremmingen loading strip on the strem button
     - AIS label fade-in (handled by JS toggling .lt-ais-label--just-added)
     - Sim panel slide-down on appear
     - Mobile touch-target sizing for narrow viewports (<=420px)
   All colours come from --bb-* tokens declared in live-tour.css or
   the existing CLAUDE.md tint palette.
   ═════════════════════════════════════════════════════════════ */

/* Tokens this file relies on but doesn't redefine - they come from
   live-tour.css :root. We just add a small auxiliary set so the polish
   doesn't introduce more bare hex into the codebase. */
:root{
  --bb-success:#0F7B4F;
  --bb-warning:#D94F07;
  --bb-warning-tint:#FFF4D6;
  --bb-warning-text:#5C3A00;
  --bb-warning-accent:#B45309;
  --bb-red-tint:#FFE8E4;
  --bb-red-text:#8A1C0F;
  --bb-card-bg:#fff;
  --bb-elev-bg:#dee5ee;
  --bb-blue-active:#2855e0;
}

/* ── Pulsing GPS dot ──────────────────────────────────────────────
   When .lt-dot has the .lt-dot-warn class (waiting for GPS, weak fix,
   or AIS reconnecting), a second ring expands and fades every 1.4s.
   Per CLAUDE.md: tint-only colour, no saturated fill outside the brand
   primary palette. The base dot is already saturated brand --bb-warning;
   the aura uses the same hue at low opacity which keeps the rule. */
.lt-dot{position:relative}
.lt-dot-warn::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  background:var(--bb-warning);opacity:0.4;
  animation:lt-dot-pulse 1.4s ease-out infinite;pointer-events:none;
  /* Avoid the pulse capturing taps. */
  z-index:-1;
}
@keyframes lt-dot-pulse{
  0%{transform:scale(1);opacity:0.5}
  70%{transform:scale(2.4);opacity:0}
  100%{transform:scale(2.4);opacity:0}
}

/* ── Offline banner ──────────────────────────────────────────────
   Inserted by live-polish.js when navigator.onLine === false. Sits
   absolute at the top of the .lt-map element. Slides down on appear,
   removed when back online. Tint set per CLAUDE.md (amber tint bg,
   dark-amber text, 3px left accent border). */
.lt-offline-banner{
  position:absolute;top:0;left:0;right:0;z-index:6;
  display:flex;align-items:center;gap:8px;
  padding:8px 14px 8px 11px;
  background:var(--bb-warning-tint);color:var(--bb-warning-text);
  border:1px solid var(--bb-warning-accent);
  border-bottom:1px solid rgba(180,83,9,0.18);
  font-size:0.75rem;font-weight:500;letter-spacing:0.02em;
  box-shadow:0 1px 4px rgba(92,58,0,0.08);
  animation:lt-banner-down 0.22s ease-out;
}
.lt-offline-banner-icon{flex-shrink:0;font-size:0.9rem;line-height:1}
@keyframes lt-banner-down{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* ── GPS-denied / unavailable card ──
   Friendly info card explaining how to enable location + offering Sim
   mode as fallback. Lives in the bottom slot of .lt-active above the
   End-tour button. This is an INFO state (you haven't enabled GPS yet),
   not an error - so we use the Backbase brand-blue tint, not red.
   Per CLAUDE.md: light-blue tint bg, navy text, 3px left accent in the
   saturated brand blue. */
.lt-gps-card{
  /* Liquid Glass card (Pattern 1, UI audit 2026-05-28). Bumped from
     10px blur + thin shadow to 22px + saturate + inset highlight to
     match the rest of the bottom-bar glass family. Light-blue tint kept
     for the info state (not error/red).
     NB de oude comment hier beweerde dat een "3px left accent" blijft
     staan "per Backbase Colour Rule". Dat klopt niet meer: de kapitein
     heeft de gekleurde 3px-linkerrand op 2026-06-13 juist verboden. Er
     staat er ook geen in deze regel - alleen de comment liep achter. */
  position:relative;
  margin:0 8px 8px;border-radius:var(--glass-radius, 24px);
  background:rgba(229,235,255,0.72);color:var(--bb-navy);
  backdrop-filter:var(--glass-blur, blur(22px) saturate(180%));
  -webkit-backdrop-filter:var(--glass-blur, blur(22px) saturate(180%));
  border:var(--glass-border, 1px solid rgba(255,255,255,0.22));
  box-shadow:var(--glass-shadow,
    0 14px 44px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.6));
  padding:10px 16px 12px;
  animation:lt-gps-slidein 0.25s cubic-bezier(0.2,0.9,0.3,1);
}
@keyframes lt-gps-slidein{
  from{transform:translateY(8px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
/* Sluitknop rechtsboven in de kaart. De kaart kon voorheen alleen weg via de
   Sim-CTA of via een echte GPS-fix; in sim-modus komt die fix nooit, dus was
   er geen uitweg (audit 2026-07-28). Visueel 28px, tikdoel 44px via ::after -
   zelfde recept als .bbs-back / .bbs-close. */
/* 36px echte knop i.p.v. 28px + een ::after die eroverheen moet compenseren:
   de kaart begint op y=0, dus een 44px-extender rond een knop op top:6px
   steekt boven de kaart uit en telt daar niet mee als tikdoel (gemeten:
   42x18). Een echte 36px-knop met wat lucht eromheen haalt de norm zonder
   die truc. */
.lt-gps-card-x{
  position:absolute;top:8px;right:8px;
  width:36px;height:36px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;font-family:inherit;
  background:transparent;border:none;cursor:pointer;
  color:var(--bb-navy);opacity:0.55;border-radius:999px;
  /* .lt-gps-card-body heeft opacity:0.85 en maakt daarmee een stacking
     context; omdat die na de knop in de DOM staat schilderde hij over de
     onderste helft van de knop heen (gemeten tikdoel: 34x6). z-index tilt
     de knop er weer bovenuit. */
  z-index:1;
}
.lt-gps-card-x:hover,.lt-gps-card-x:active{opacity:1}
.lt-gps-card-title{
  font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:inherit;margin-bottom:3px;display:flex;align-items:center;gap:6px;
  padding-right:44px;   /* houdt de titel vrij van de sluitknop */
}
.lt-gps-card-body{
  font-size:0.8rem;line-height:1.4;color:inherit;opacity:0.85;margin-bottom:8px;
}
.lt-gps-card-cta{
  display:inline-block;font-size:0.78rem;font-weight:600;letter-spacing:0.04em;
  padding:8px 14px;background:var(--bb-blue);color:#fff;border-radius:6px;
  border:none;cursor:pointer;font-family:inherit;
  min-height:36px;
}
.lt-gps-card-cta:hover,
.lt-gps-card-cta:active{background:var(--bb-blue-active);color:#fff}

/* ── Stremmingen loading strip ──
   Indeterminate progress strip under the strem button while the EuRIS
   feed is loading. Pure CSS animation; live-polish.js adds/removes the
   wrapper element when init starts/ends. */
.lt-strem-loading{
  position:absolute;bottom:-3px;left:2px;right:2px;height:2px;
  border-radius:1px;overflow:hidden;background:rgba(180,83,9,0.18);
}
.lt-strem-loading::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,var(--bb-warning-accent) 50%,transparent 100%);
  animation:lt-strem-strip 1.2s linear infinite;
}
@keyframes lt-strem-strip{
  from{transform:translateX(-100%)}
  to{transform:translateX(100%)}
}

/* ── AIS arrow fade-in ──
   live-polish.js calls a tiny rAF tween on first appearance of each
   marker label - the label DOM is the only target we can hook from
   the outside without modifying live-boats-overlay.js. The label fades
   from 0 -> 1 over 300ms via CSS transition; arrows themselves are
   Google Maps Symbols which can't be CSS-animated, so we only fade the
   label. The arrow + halo are already softened by the existing rAF
   tween that smooths position updates. */
.lt-ais-label{
  transition:opacity 0.3s ease-out;
}
.lt-ais-label--just-added{
  opacity:0;
}

/* ── Sim panel slide-down on toggle ──
   The panel already exists in live-tour.css. We add a slide-down entry
   animation so it feels intentional rather than just appearing. The
   existing `[hidden]` rule keeps it invisible until #ltSimPanel.hidden
   is set to false (which happens once at startTour - the animation
   only fires once, which is what we want). */
.lt-sim-panel:not([hidden]){
  animation:lt-sim-slide 0.28s cubic-bezier(0.2,0.9,0.3,1);
}
@keyframes lt-sim-slide{
  from{transform:translateY(-8px) scale(0.98);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}

/* ── Splash card subtle shimmer on the hero icon ──
   The icon image gets a soft glow that pulses gently so the splash
   feels alive while the user reads the body copy. Not a loading
   spinner - the page is already loaded - just a small "this is live"
   cue. */
.lt-splash-icon{
  position:relative;
}
.lt-splash-icon::after{
  content:'';position:absolute;left:50%;top:50%;
  width:120px;height:120px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(51,102,255,0.10) 0%,rgba(51,102,255,0) 70%);
  animation:lt-splash-glow 3.2s ease-in-out infinite;
  pointer-events:none;z-index:-1;
}
@keyframes lt-splash-glow{
  0%,100%{opacity:0.6;transform:translate(-50%,-50%) scale(0.92)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
}

/* ── Mobile (<=420px) ──
   Splash typography ramps gentler on small phones. Nav-pill sizing
   (lt-back, lt-lang-btn, lt-mini-btn, lt-end) is NOT bumped to 44px
   here - captain chose 36px nav pills as the visual target across
   viewports (see live-tour.css for the canonical sizes). */
@media(max-width:420px){
  .lt-cta{padding:15px 20px;min-height:48px;font-size:1rem}
  .lt-popup-close,
  .lt-popup-play{width:32px;height:32px;font-size:14px}
  /* Splash typography ramps gentler on small phones. The h1 is intentionally
     NOT resized here: it keeps the canonical page-title clamp so "Jij vaart,
     vertellen wij het verhaal" matches the Routes "Kies een route" title at
     every width (captain 2026-06-02: "zelfde fontsize als Kies een route"). */
  .lt-splash p{font-size:0.88rem;line-height:1.4}
  .lt-splash-icon img{width:64px;height:64px}
}