/* ==========================================================================
   LOOK Bus — module styles (scoped under .bus-scope)
   Works in both modes: index.html section and bus.html standalone.
   Palette: LOOK Bus yellow (--yellow / --yellow-ink) + amber accents,
   dark navy for the driver panel, green only for "live" status.
   No purple. All selectors stay inside .bus-scope (or html.stacked pairs).
   ========================================================================== */

.bus-scope{position:relative;overflow-x:clip;background:#fff}

/* ---------- Shared bits ---------- */
.bus-scope .bus-h3{font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.025em}
[dir="rtl"] .bus-scope .bus-h3{letter-spacing:0}

/* Phone-screen frame (shrink-wraps its img; videos overlay inset:0) */
.bus-scope .bus-screen{
  position:relative;display:inline-block;line-height:0;
  border-radius:30px;box-shadow:0 30px 70px -28px rgba(15,23,42,.35);
}
.bus-scope .bus-img{
  width:min(230px,58vw);height:auto;display:block;border-radius:inherit;
}
.bus-scope .bus-screen.sm{box-shadow:0 16px 36px -18px rgba(15,23,42,.3)}
.bus-scope .bus-hero-vid,
.bus-scope .bus-role-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;
}

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.bus-scope .bus-hero{
  position:relative;overflow:hidden;
  padding:clamp(90px,12vh,150px) 0;
  background:linear-gradient(180deg,#fffdf4 0%,#fff 78%);
}
.bus-scope .bus-ambient{
  position:absolute;inset:-48px;pointer-events:none;
  filter:blur(24px) saturate(1.05);opacity:.32;
}
.bus-scope .bus-ambient img,
.bus-scope .bus-ambient-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.bus-scope .bus-ambient-vid.b{opacity:.5}
.bus-scope .bus-hero-grid{position:relative;z-index:1}

.bus-scope .bus-hero-visual{position:relative;line-height:0}
.bus-scope .bus-route{
  position:absolute;top:-24px;inset-inline-end:-36px;
  width:150px;height:auto;z-index:2;overflow:visible;
}
.bus-scope .bus-route-path{
  stroke:var(--yellow);
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.6s var(--ease-out) .4s;
}
.bus-scope .bus-route-pin{
  fill:var(--yellow);stroke:#fff;stroke-width:3;
  opacity:0;transition:opacity .4s ease 1.7s;
  transform-box:fill-box;transform-origin:center;
}
.bus-scope .bus-hero-visual.in .bus-route-path{stroke-dashoffset:0}
.bus-scope .bus-hero-visual.in .bus-route-pin{
  opacity:1;animation:bus-pin-pulse 2.4s ease-in-out 2s infinite;
}
@keyframes bus-pin-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.35)}
}

.bus-scope .bus-eta-chip,
.bus-scope .bus-live-card{
  position:absolute;display:flex;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font-size:.86rem;font-weight:700;line-height:1.2;
  box-shadow:var(--shadow-card);white-space:nowrap;z-index:2;
  opacity:0;transform:translateY(10px) scale(.94);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.bus-scope .bus-eta-chip{inset-inline-start:-64px;bottom:118px;transition-delay:1.1s;color:var(--yellow-ink)}
.bus-scope .bus-eta-chip i{
  width:8px;height:8px;border-radius:50%;background:var(--yellow);flex-shrink:0;
}
.bus-scope .bus-live-card{inset-inline-end:-58px;bottom:44px;transition-delay:1.35s}
.bus-scope .bus-live-dot{
  width:9px;height:9px;border-radius:50%;background:var(--green);flex-shrink:0;
  animation:bus-live-pulse 2s ease-out infinite;
}
@keyframes bus-live-pulse{
  0%{box-shadow:0 0 0 0 rgba(34,192,122,.45)}
  70%{box-shadow:0 0 0 7px rgba(34,192,122,0)}
  100%{box-shadow:0 0 0 0 rgba(34,192,122,0)}
}
.bus-scope .bus-hero-visual.in .bus-eta-chip,
.bus-scope .bus-hero-visual.in .bus-live-card{opacity:1;transform:none}

/* ==========================================================================
   2 · PROBLEM — five morning questions
   ========================================================================== */
.bus-scope .bus-problem{padding:clamp(80px,10vh,130px) 0;background:#fff}
.bus-scope .bus-q-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:16px;
  max-width:920px;margin:44px auto 0;
}
.bus-scope .bus-q{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:13px 22px;font-weight:600;font-size:clamp(.95rem,1.4vw,1.08rem);
  box-shadow:var(--shadow-card);
}
.bus-scope .bus-q-mark{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:27px;height:27px;border-radius:50%;
  background:linear-gradient(135deg,var(--yellow),#fbd23e);
  color:#5b4300;font-weight:800;font-size:.95rem;
}

/* ==========================================================================
   3 · SOLUTION — one system, one live trip
   ========================================================================== */
.bus-scope .bus-solution{
  padding:clamp(70px,9vh,120px) 0;
  background:linear-gradient(180deg,#fff 0%,#fff8e6 55%,#fff 100%);
}

/* ==========================================================================
   4 · THREE INTERFACES
   ========================================================================== */
.bus-scope .bus-roles{padding:clamp(80px,10vh,130px) 0;background:var(--bg-soft)}
.bus-scope .bus-roles-note{
  color:var(--muted);font-size:.95rem;max-width:560px;margin:10px auto 0;
}
.bus-scope .bus-role-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;margin-top:50px;
}
.bus-scope .bus-role{
  display:flex;flex-direction:column;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px 26px 30px;box-shadow:var(--shadow-card);text-align:center;
}
.bus-scope .bus-role .bus-screen{margin-bottom:22px}
.bus-scope .bus-role .bus-img{width:min(150px,44vw)}
.bus-scope .bus-role h4{
  font-size:1.15rem;font-weight:800;letter-spacing:-.01em;margin-bottom:14px;
}
.bus-scope .bus-role ul{
  list-style:none;display:grid;gap:9px;text-align:start;margin-inline:auto;
}
.bus-scope .bus-role li{
  position:relative;padding-inline-start:26px;
  color:var(--muted);font-size:.95rem;
}
.bus-scope .bus-role li::before{
  content:'';position:absolute;inset-inline-start:0;top:.28em;
  width:15px;height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.bus-scope .bus-role-dark{
  background:#0f1b2d;border-color:#1e2f47;color:#eef4fb;
}
.bus-scope .bus-role-dark li{color:#b9c8da}

/* ==========================================================================
   5 · ONE JOURNEY — pinned scrollytelling (700vh, 7 steps)
   ========================================================================== */
.bus-scope .bus-journey{padding-top:clamp(80px,10vh,130px);background:#fff}
.bus-scope .bus-pin{position:relative;height:700vh}
.bus-scope .bus-stage{
  position:sticky;top:0;height:100vh;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:56px;
  width:min(1140px,100% - 40px);margin-inline:auto;
}
.bus-scope .bus-j-side{max-width:440px}
.bus-scope .bus-j-caps{position:relative;min-height:150px}
.bus-scope .bus-j-cap{
  position:absolute;top:0;inset-inline-start:0;
  display:flex;align-items:flex-start;gap:14px;
  font-size:clamp(1.25rem,2.3vw,1.8rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.3;
  opacity:0;transform:translateY(16px);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);
}
[dir="rtl"] .bus-scope .bus-j-cap{letter-spacing:0}
.bus-scope .bus-j-num{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--yellow),#fbd23e);
  color:#5b4300;font-size:1rem;font-weight:800;
}
.bus-scope .bus-pin[data-step="0"] .bus-j-cap.c1,
.bus-scope .bus-pin[data-step="1"] .bus-j-cap.c2,
.bus-scope .bus-pin[data-step="2"] .bus-j-cap.c3,
.bus-scope .bus-pin[data-step="3"] .bus-j-cap.c4,
.bus-scope .bus-pin[data-step="4"] .bus-j-cap.c5,
.bus-scope .bus-pin[data-step="5"] .bus-j-cap.c6,
.bus-scope .bus-pin[data-step="6"] .bus-j-cap.c7{opacity:1;transform:none}

.bus-scope .bus-j-dots{display:flex;gap:9px;margin-top:26px}
.bus-scope .bus-j-dot{
  width:8px;height:8px;border-radius:99px;background:#e3d9bd;
  transition:width .4s var(--ease-out),background .4s;
}
.bus-scope .bus-pin[data-step="0"] .bus-j-dot.d1,
.bus-scope .bus-pin[data-step="1"] .bus-j-dot.d2,
.bus-scope .bus-pin[data-step="2"] .bus-j-dot.d3,
.bus-scope .bus-pin[data-step="3"] .bus-j-dot.d4,
.bus-scope .bus-pin[data-step="4"] .bus-j-dot.d5,
.bus-scope .bus-pin[data-step="5"] .bus-j-dot.d6,
.bus-scope .bus-pin[data-step="6"] .bus-j-dot.d7{
  width:26px;background:var(--yellow);
}

.bus-scope .bus-j-screens{
  position:relative;height:min(500px,62vh);
  width:min(460px,42vw);justify-self:center;
}
.bus-scope .bus-j-screen{
  position:absolute;inset:0;
  opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.bus-scope .bus-pin[data-step="0"] .bus-j-screen.s1,
.bus-scope .bus-pin[data-step="1"] .bus-j-screen.s2,
.bus-scope .bus-pin[data-step="2"] .bus-j-screen.s3,
.bus-scope .bus-pin[data-step="3"] .bus-j-screen.s4,
.bus-scope .bus-pin[data-step="4"] .bus-j-screen.s5,
.bus-scope .bus-pin[data-step="5"] .bus-j-screen.s6,
.bus-scope .bus-pin[data-step="6"] .bus-j-screen.s7{opacity:1;transform:none}

/* Single screen: frame fills the stage; img+video share height:100% */
.bus-scope .bus-j-frame{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.bus-scope .bus-j-img{
  height:100%;width:auto;max-width:100%;
  border-radius:26px;box-shadow:0 26px 60px -24px rgba(15,23,42,.32);
}
.bus-scope .bus-j-screen:not(.pair) .bus-j-vid{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  height:100%;width:auto;max-width:100%;border-radius:26px;
}
/* Pair step (parent + driver side by side): frames become flex children */
.bus-scope .bus-j-screen.pair{
  display:flex;align-items:center;justify-content:center;gap:16px;
}
.bus-scope .bus-j-screen.pair .bus-j-frame{position:static;flex:1 1 0;min-width:0}
.bus-scope .bus-j-screen.pair .bus-j-img{width:100%;height:auto;max-height:100%}
.bus-scope .bus-j-screen.pair .bus-j-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:26px;
}

/* ==========================================================================
   6 · TRUST & SAFETY
   ========================================================================== */
.bus-scope .bus-trust{padding:clamp(80px,10vh,130px) 0;background:var(--bg-soft)}
.bus-scope .bus-t-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;margin:48px auto 0;max-width:920px;
}
.bus-scope .bus-t-card{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  padding:32px 26px;box-shadow:var(--shadow-card);
  text-align:center;font-weight:600;
}
.bus-scope .bus-t-card .bus-img{width:min(240px,60vw)}
.bus-scope .bus-t-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:76px;height:76px;border-radius:20px;
  background:linear-gradient(135deg,#fff7e0,#ffedb8);color:var(--yellow-ink);
}
.bus-scope .bus-t-ic svg{width:32px;height:32px}
.bus-scope .bus-t-mgmt{
  margin-top:36px;text-align:center;color:var(--muted);font-size:.92rem;
}

/* ==========================================================================
   7 · LINKS — store row is filled by main.js renderStoreSlots()
   (+90px bottom keeps content clear of the floating switcher pill)
   ========================================================================== */
.bus-scope .bus-links{
  padding:clamp(90px,12vh,150px) 0 calc(clamp(90px,12vh,150px) + 90px);
  background:linear-gradient(180deg,#fff 0%,#fffdf4 100%);
}

/* ==========================================================================
   STACKED MODE (html.stacked: ≤900px or reduced-motion) — flatten the pin
   ========================================================================== */
html.stacked .bus-scope .bus-pin{height:auto}
html.stacked .bus-scope .bus-stage{
  position:static;height:auto;display:flex;flex-direction:column;
  gap:44px;padding:48px 0 90px;
}
html.stacked .bus-scope .bus-j-side{max-width:none;width:100%}
html.stacked .bus-scope .bus-j-caps{position:static;min-height:0;display:grid;gap:12px}
html.stacked .bus-scope .bus-j-cap{
  position:static;opacity:1;transform:none;font-size:1.02rem;font-weight:700;
}
html.stacked .bus-scope .bus-j-num{width:30px;height:30px;font-size:.85rem}
html.stacked .bus-scope .bus-j-dots{display:none}
html.stacked .bus-scope .bus-j-screens{
  height:auto;width:100%;max-width:none;display:grid;gap:28px;justify-items:center;
}
html.stacked .bus-scope .bus-j-screen{position:static;opacity:1;transform:none}
html.stacked .bus-scope .bus-j-frame{position:static}
html.stacked .bus-scope .bus-j-img{
  height:auto;width:min(230px,62vw);max-width:none;max-height:none;
}
html.stacked .bus-scope .bus-j-screen.pair{display:flex;gap:16px}
html.stacked .bus-scope .bus-j-screen.pair .bus-j-frame{flex:0 1 auto}
html.stacked .bus-scope .bus-j-screen.pair .bus-j-img{width:min(150px,42vw)}
html.stacked .bus-scope .bus-j-vid{display:none}          /* posters carry the story */
html.stacked .bus-scope .bus-ambient-vid{display:none}    /* perf: blurred bg = img only */

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .bus-scope .bus-role-grid{gap:18px}
  .bus-scope .bus-stage{gap:32px}
  .bus-scope .bus-j-screens{width:min(400px,46vw)}
}
@media (max-width:900px){
  .bus-scope .bus-role-grid{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  .bus-scope .bus-role .bus-img{width:min(180px,52vw)}
  .bus-scope .bus-hero-visual{
    margin-top:36px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  }
  .bus-scope .bus-hero-screen{flex:0 0 auto}
  .bus-scope .bus-route{inset-inline-end:-12px;top:-18px;width:110px}
  /* floating callouts join the flow under the phone — no overlap, no clipping */
  .bus-scope .bus-eta-chip,.bus-scope .bus-live-card{position:static}
}
@media (max-width:640px){
  .bus-scope .bus-t-grid{grid-template-columns:1fr}
  .bus-scope .bus-t-card .bus-img{width:min(230px,64vw)}
  .bus-scope .bus-q{padding:11px 18px}
}

/* ==========================================================================
   REDUCED MOTION — final states, no loops
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .bus-scope .bus-route-path{transition:none;stroke-dashoffset:0}
  .bus-scope .bus-route-pin{transition:none;opacity:1;animation:none}
  .bus-scope .bus-eta-chip,.bus-scope .bus-live-card{transition:none}
  .bus-scope .bus-live-dot{animation:none}
  .bus-scope .bus-j-cap,.bus-scope .bus-j-screen{transition:none}
}

/* ==========================================================================
   STANDALONE PAGE (bus.html) — minimal footer (never .site-footer:
   main.js's footer observer requires index.html's #switcher)
   ========================================================================== */
.bus-footer{
  border-top:1px solid var(--line);padding:34px 0 44px;
  text-align:center;color:var(--muted);font-size:.88rem;
  background:#fffdf4;
}
.bus-footer a{color:var(--yellow-ink);font-weight:600}