/* ============================================================================
   sides.css - "Your side, and their side" on product.html. One trip rendered
   on TWO live phone screens at once: your phone on the left, a watcher's phone
   on the right, a moment picker above, and a signal that crosses the gap when
   the moment changes. Auto-plays through the four moments (sides.js); tapping
   a moment selects it and pauses the loop.

   Both screens share the SAME drawn map and route, because that is the
   product: everybody is looking at the same trip. Only the chrome differs.

   Every colour is a shared app.css token or a local --sd-* pair (dark default
   + light override) so the whole thing is theme-aware. Scoped under .sides-*.
   ========================================================================== */

.sides {
  /* dark is the site default; light overrides below (mirrors the hero scene) */
  --sd-shell: rgba(18, 22, 31, 0.72);
  --sd-shell-border: rgba(255, 255, 255, 0.12);
  --sd-shell-shadow: 0 34px 74px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --sd-screen: linear-gradient(165deg, rgba(30, 36, 50, 0.9), rgba(18, 22, 32, 0.95));
  --sd-grid: rgba(122, 152, 214, 0.09);
  --sd-street: rgba(150, 172, 214, 0.14);
  --sd-glass: rgba(23, 27, 37, 0.86);
  --sd-glass-border: rgba(255, 255, 255, 0.1);
  --sd-glass-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
  --sd-muted: #99a1b3;
  --sd-dur: 3600ms; /* per-moment dwell; sides.js keeps its timer in sync */
  margin-top: clamp(34px, 5vw, 56px);
}
html[data-theme="light"] .sides {
  --sd-shell: rgba(255, 255, 255, 0.88);
  --sd-shell-border: rgba(255, 255, 255, 0.95);
  --sd-shell-shadow: 0 30px 64px rgba(56, 76, 120, 0.16), inset 0 1px 0 #fff;
  --sd-screen: linear-gradient(165deg, #f6f9ff, #eef2fb);
  --sd-grid: rgba(112, 144, 198, 0.1);
  --sd-street: rgba(103, 134, 186, 0.14);
  --sd-glass: rgba(255, 255, 255, 0.94);
  --sd-glass-border: rgba(255, 255, 255, 0.95);
  --sd-glass-shadow: 0 14px 30px rgba(40, 60, 100, 0.14);
  --sd-muted: #858da0;
}

/* ------------------------------------------------------------- the tabs --- */
.sides-tabs {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.sides-tab {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 18px; border: 1px solid var(--line-hi);
  border-radius: 999px; background: var(--panel); color: var(--dim);
  font: 600 13px/1 var(--sans); letter-spacing: -0.01em; cursor: pointer;
  overflow: hidden; transition: color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.sides-tab i {
  font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--soft); font-variant-numeric: tabular-nums; transition: color 200ms ease;
}
.sides-tab:hover { transform: translateY(-1px); border-color: var(--sky); color: var(--text); }
.sides-tab.is-active { border-color: transparent; color: var(--text); }
.sides-tab.is-active i { color: var(--royal); }
/* active tab wears a hairline of the brand gradient (border-image style trick) */
.sides-tab.is-active::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(104deg, #5cc1f6, #4979ef 50%, #f31a91);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
/* the auto-play dwell fill runs along the bottom edge of the active tab */
.sides-tab.is-active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
  border-radius: 99px; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, #5cc1f6, #4979ef 50%, #f31a91);
}
.sides:not(.is-paused) .sides-tab.is-active::after { animation: sides-dwell var(--sd-dur) linear forwards; }
@keyframes sides-dwell { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------ the stage --- */
.sides-stage {
  display: flex; align-items: stretch; justify-content: center;
  gap: clamp(18px, 3.4vw, 56px);
}

.sides-phone { position: relative; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.sides-who {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--soft); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.sides-who-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sky); }
.sides-phone--them .sides-who-dot { background: var(--royal); }
.sides[data-m="3"] .sides-phone--them .sides-who-dot { background: var(--alarm); }

.sides-shell {
  position: relative; width: clamp(220px, 21vw, 292px); aspect-ratio: 9 / 18.6;
  padding: 9px; border: 1px solid var(--sd-shell-border); border-radius: 42px;
  background: var(--sd-shell); box-shadow: var(--sd-shell-shadow);
}
.sides-notch {
  position: absolute; z-index: 6; top: 19px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 20px; border-radius: 99px; background: rgba(8, 10, 15, 0.92);
}
.sides-screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 34px; background: var(--sd-screen); isolation: isolate;
}
.sides-screen::before {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background-image: linear-gradient(90deg, var(--sd-grid) 1px, transparent 1px), linear-gradient(var(--sd-grid) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* Video-backed screens: the clip fills the screen and the drawn map + route are
   hidden; the moment chips still animate on top, with a soft bottom scrim so
   they stay legible over the footage. */
/* The clips are 9:16 but the shell is taller (9/18.6). object-fit: contain
   shows the FULL frame (both app-UI edges stay visible), and the dark screen
   fill reads as the phone's status-bar / home-indicator chrome above and below. */
.sides-screen--video { background: #080b16; }
.sides-video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.sides-screen--video::after {
  content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 10, 22, 0.28) 0%, transparent 26% 60%, rgba(6, 10, 22, 0.55) 100%);
}
.sides-screen--video .sides-mapbg,
.sides-screen--video .sides-route,
.sides-screen--video .sides-home-pin,
.sides-screen--video::before { display: none; }

/* shared drawn map + route (identical on both phones, on purpose) */
.sides-mapbg { position: absolute; inset: 0; z-index: 1; }
.sides-lot {
  position: absolute; border: 1px solid var(--sd-street); border-radius: 5px;
  background: rgba(122, 152, 214, 0.055);
}
.sides-route { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sides-route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sides-route-track { stroke: rgba(120, 148, 200, 0.3); stroke-width: 3; stroke-dasharray: 2 10; }
.sides-route-live {
  stroke-width: 4.5; stroke-dasharray: 100;
  stroke-dashoffset: 62; transition: stroke-dashoffset 1100ms cubic-bezier(0.3, 0, 0.2, 1);
}
/* the route keeps easing home as the moments advance */
.sides[data-m="1"] .sides-route-live { stroke-dashoffset: 44; }
.sides[data-m="2"] .sides-route-live { stroke-dashoffset: 28; }
.sides[data-m="3"] .sides-route-live { stroke-dashoffset: 16; }
.sides-me {
  fill: url(#sides-grad-you); stroke: #fff; stroke-width: 3.5;
  filter: drop-shadow(0 3px 7px rgba(60, 110, 210, 0.55));
  offset-path: path("M52 340 C 92 300 44 246 96 208 C 148 172 108 118 150 74");
  offset-rotate: 0deg; offset-distance: 38%;
  transition: offset-distance 1100ms cubic-bezier(0.3, 0, 0.2, 1);
}
.sides-phone--them .sides-me { fill: url(#sides-grad-them); }
.sides[data-m="1"] .sides-me { offset-distance: 56%; }
.sides[data-m="2"] .sides-me { offset-distance: 72%; }
.sides[data-m="3"] .sides-me { offset-distance: 84%; }
.sides-home-pin {
  position: absolute; z-index: 3; top: 15.5%; right: 21%;
  width: 12px; height: 12px; border: 3px solid var(--panel); border-radius: 50%;
  background: #22bd87; box-shadow: 0 0 0 2px rgba(34, 189, 135, 0.28);
}

/* the little live pill on YOUR phone only */
.sides-pill {
  position: absolute; z-index: 5; top: 50px; left: 12px;
  display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px;
  border: 1px solid var(--sd-glass-border); border-radius: 999px;
  background: var(--sd-glass); box-shadow: var(--sd-glass-shadow); backdrop-filter: blur(10px);
}
.sides-pill .rec, .sides-cam .rec {
  width: 6px; height: 6px; border-radius: 50%; background: var(--magenta);
  box-shadow: 0 0 0 4px rgba(243, 26, 145, 0.13); animation: sides-rec 1.4s ease-in-out infinite;
}
.sides-pill strong { color: var(--text); font-size: 10.5px; font-weight: 750; white-space: nowrap; }
.sides[data-m="3"] .sides-pill .rec { background: var(--alarm); box-shadow: 0 0 0 4px rgba(239, 59, 59, 0.16); }

/* ------------------------------------------- per-moment screen elements --- */
.sm {
  position: absolute; z-index: 5; opacity: 0; transform: translateY(12px) scale(0.94);
  transition: opacity 380ms ease, transform 480ms cubic-bezier(0.18, 1.15, 0.34, 1);
  pointer-events: none;
}
.sides[data-m="0"] .sm[data-on="0"],
.sides[data-m="1"] .sm[data-on="1"],
.sides[data-m="2"] .sm[data-on="2"],
.sides[data-m="3"] .sm[data-on="3"] { opacity: 1; transform: translateY(0) scale(1); }

/* card chrome shared by most moment elements */
.sm-you, .sm-them {
  left: 12px; right: 12px; bottom: 14px;
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border: 1px solid var(--sd-glass-border); border-radius: 17px;
  background: var(--sd-glass); box-shadow: var(--sd-glass-shadow); backdrop-filter: blur(12px);
}
.sm small { display: block; margin-bottom: 3px; color: var(--sd-muted); font-size: 8px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.sm strong { display: block; color: var(--text); font-size: 12px; font-weight: 750; line-height: 1.25; }
.sm .ico {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 10px; color: #fff;
}
.sm .ico.play { background: var(--grad); }
.sm .ico.play::before { content: "\25B6"; font-size: 9px; text-indent: 1px; }
.sm .ico.brand { background: var(--grad); font-size: 10px; font-weight: 850; }
.sm .ico.brand::before { content: "3i"; letter-spacing: -0.02em; }

/* you, moment 1: avatars watching */
.sides-avatars { display: flex; padding-left: 8px; flex: 0 0 auto; }
.sides-avatars span {
  display: grid; place-items: center; width: 26px; height: 26px; margin-left: -8px;
  border: 2px solid var(--panel); border-radius: 50%; color: #fff; font-size: 7px; font-weight: 820;
}
.sides-avatars .a1 { background: linear-gradient(145deg, #ff9c80, #eb4d96); }
.sides-avatars .a2 { background: linear-gradient(145deg, #45c9f5, #4278e5); }
.sides-avatars .a3 { background: linear-gradient(145deg, #a87bf0, #e443b0); }

/* nudge exchange: same two bubbles on both phones, mirrored roles */
.sm-you--nudge, .sm-them--nudge { flex-direction: column; align-items: stretch; gap: 6px; }
.sm-you--nudge small, .sm-them--nudge small { margin-bottom: 2px; }
.sides-bub {
  display: block; width: fit-content; padding: 7px 11px;
  border: 1px solid var(--sd-glass-border); font-size: 10px; font-weight: 720;
}
/* the neutral bubble is a hard white iMessage-style bubble in BOTH themes: on
   the dark map it must not melt into the glass card behind it */
.sides-bub.q { border-radius: 13px 13px 13px 4px; background: #fff; border-color: rgba(20, 30, 60, 0.08); color: #14171e; }
.sides-bub.a { align-self: flex-end; border-radius: 13px 13px 4px 13px; background: var(--grad-cta); border-color: transparent; color: #fff; }
/* on THEIR phone the roles mirror: their question sits right, your answer left */
.sm-them--nudge .sides-bub.q { align-self: flex-end; border-radius: 13px 13px 4px 13px; background: var(--grad-cta); border-color: transparent; color: #fff; }
.sm-them--nudge .sides-bub.a { align-self: flex-start; border-radius: 13px 13px 13px 4px; background: #fff; border-color: rgba(20, 30, 60, 0.08); color: #14171e; }

/* you, moment 3: the held alarm */
.sm-you--alarm { border-color: rgba(239, 59, 59, 0.35); }
.sides-hold {
  position: relative; display: grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 59, 59, 0.22), transparent 70%);
}
.sides-hold span { width: 16px; height: 16px; border-radius: 50%; background: var(--alarm); box-shadow: 0 0 12px rgba(239, 59, 59, 0.65); }
.sides-hold::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(239, 59, 59, 0.32);
}
.sm-you--alarm strong { color: var(--alarm); }

/* them, moment 0: the arriving banner drops from the top */
.sm-them--banner { top: 50px; bottom: auto; transform: translateY(-14px) scale(0.94); }

/* them, moment 1: live camera tile above the card row */
.sides-cam {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 8px 11px; border-radius: 11px;
  background: rgba(8, 10, 15, 0.92); border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 0.09em;
}

/* them, moment 3: the whole card goes dispatch-dark (both themes, on purpose:
   the Safety Agent surface is a control room, not a consumer card) */
.sm-them--agent { align-items: flex-start; border-color: rgba(255, 255, 255, 0.09); background: rgba(14, 17, 24, 0.96); }
.sm-them--agent .ico.shield { background: rgba(255, 255, 255, 0.08); color: #70c7ff; }
.sm-them--agent .ico.shield svg { width: 17px; height: 17px; }
.sm-them--agent small { color: #78c9fa; }
.sm-them--agent strong { color: #fff; }
.sm-them--agent em {
  display: block; margin-top: 3px; color: #a7b1c4; font-size: 9.5px; font-style: normal; line-height: 1.35;
}
.sm-them--agent .online { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: #2dc793; box-shadow: 0 0 0 4px rgba(45, 199, 147, 0.14); }

/* ------------------------------------------------------------- the beam --- */
/* a signal crossing the gap between the phones every time the moment lands */
.sides-beam { position: relative; align-self: center; width: clamp(30px, 4.5vw, 74px); height: 2px; flex: 0 0 auto; }
.sides-beam-line {
  position: absolute; inset: 0; border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(73, 121, 239, 0.5), transparent);
}
.sides-beam-dot {
  position: absolute; top: 50%; left: 0; width: 9px; height: 9px;
  transform: translate(0, -50%); border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--sky) 55%, transparent 75%);
  box-shadow: 0 0 12px rgba(92, 193, 246, 0.9);
  animation: sides-cross 2.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
/* the nudge starts on THEIR side, so the signal crosses back the other way */
.sides[data-m="2"] .sides-beam-dot { animation-name: sides-cross-back; }
.sides[data-m="3"] .sides-beam-dot { background: radial-gradient(circle, #fff, var(--alarm) 55%, transparent 75%); box-shadow: 0 0 12px rgba(239, 59, 59, 0.8); }
@keyframes sides-cross {
  0% { left: 0; opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; }
  100% { left: calc(100% - 9px); opacity: 0; }
}
@keyframes sides-cross-back {
  0% { left: calc(100% - 9px); opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; }
  100% { left: 0; opacity: 0; }
}

/* ------------------------------------------------------------- captions --- */
.sides-caps { display: grid; max-width: 620px; margin: clamp(26px, 4vw, 40px) auto 0; text-align: center; }
.sides-cap {
  grid-area: 1 / 1; margin: 0; color: var(--dim); font-size: 15px; line-height: 1.55;
  opacity: 0; transform: translateY(8px);
  transition: opacity 420ms ease, transform 460ms cubic-bezier(0.2, 0.82, 0.2, 1);
}
.sides-cap[hidden] { display: block; visibility: hidden; }
.sides[data-m="0"] .sides-cap[data-i="0"], .sides[data-m="1"] .sides-cap[data-i="1"],
.sides[data-m="2"] .sides-cap[data-i="2"], .sides[data-m="3"] .sides-cap[data-i="3"] {
  opacity: 1; transform: translateY(0); visibility: visible;
}

/* ------------------------------------------------------------ keyframes --- */
@keyframes sides-rec { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes sides-ping { 0% { opacity: 0.9; transform: scale(0.6); } 80%, 100% { opacity: 0; transform: scale(1.3); } }

/* ============================ responsive ================================= */
@media (max-width: 900px) {
  .sides-shell { width: clamp(190px, 30vw, 250px); }
}

@media (max-width: 700px) {
  /* both phones stay side by side, smaller: seeing the two screens AT ONCE is
     the whole point of the section */
  .sides-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-width: 340px; margin-inline: auto; }
  .sides-tab { min-height: 40px; padding: 0 12px; font-size: 11.5px; gap: 6px; justify-content: center; }
  .sides-tab i { font-size: 9px; }
  .sides-stage { gap: 12px; }
  .sides-beam { width: 22px; }
  .sides-shell { width: clamp(150px, 42vw, 200px); border-radius: 30px; padding: 6px; }
  .sides-screen { border-radius: 25px; }
  .sides-notch { top: 13px; height: 14px; }
  .sides-who { font-size: 9px; letter-spacing: 0.1em; }
  .sides-pill { top: 34px; left: 8px; min-height: 25px; padding: 0 9px; }
  .sides-pill strong { font-size: 9px; }
  .sm-you, .sm-them { left: 8px; right: 8px; bottom: 9px; padding: 8px 9px; gap: 7px; border-radius: 13px; }
  .sm-them--banner { top: 34px; bottom: auto; }
  .sm small { font-size: 7px; }
  .sm strong { font-size: 9.5px; }
  .sm .ico { width: 24px; height: 24px; border-radius: 8px; }
  .sides-avatars span { width: 20px; height: 20px; font-size: 6px; }
  .sides-bub { padding: 5px 8px; font-size: 8.5px; }
  .sides-cam { padding: 6px 8px; font-size: 7.5px; }
  .sides-hold { width: 26px; height: 26px; }
  .sides-hold span { width: 12px; height: 12px; }
  .sm-them--agent em { font-size: 8px; }
  .sides-cap { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .sides-tab.is-active::after { animation: none; transform: scaleX(1); }
  .sides-beam-dot, .sides-pill .rec, .sides-cam .rec, .sides-hold::after { animation: none; }
  .sm, .sides-cap, .sides-route-live, .sides-me { transition-duration: 0.01ms; }
}