/* =========================================================================
   STEADY STATE · Instagram carousel (Variant B of the in-feed phone mock)
   The slides live once, in carousel/phone/index.html, and this file styles
   them plus Instagram's carousel behaviour (n/N pill, edge arrows, dots in
   the action row). One fixed template: photo full bleed, a graded scrim,
   one first-person line bottom-left with one phrase in Andrew's cyan.
   Sizes are container units so a slide behaves like a 1080 x 1350 image.
   ========================================================================= */

/* ------------------------------------------------------------- the stage */
.post-media--car { aspect-ratio: 4 / 5; }
.cstage {
  position: absolute; inset: 0; overflow: hidden; container-type: inline-size;
  background: #030505; touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab;
}
.cstage.is-dragging { cursor: grabbing; }
.ctrack { display: flex; height: 100%; transition: transform 0.42s cubic-bezier(0.25, 0.8, 0.25, 1); will-change: transform; }
.ctrack.no-anim { transition: none; }
.cstage.is-peek .ctrack { animation: carPeek 1.3s cubic-bezier(0.45, 0, 0.2, 1); }
@keyframes carPeek { 0%, 100% { transform: translate3d(0, 0, 0); } 42% { transform: translate3d(-11%, 0, 0); } }

/* Instagram's n/N pill */
.ig-count {
  position: absolute; top: 14px; right: 14px; z-index: 5; padding: 4px 9px; border-radius: 13px;
  background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.02em;
  pointer-events: none;
}
/* Instagram's edge arrows: small translucent white discs, hidden at the ends */
.cnav {
  position: absolute; top: 50%; z-index: 5; width: 26px; height: 26px; margin-top: -13px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.82); cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); transition: opacity 0.2s ease;
}
.cnav::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
  border-top: 2px solid #262626; border-right: 2px solid #262626;
}
.cnav--prev { left: 8px; }
.cnav--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.cnav--next { right: 8px; }
.cnav--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.cnav[disabled] { opacity: 0; pointer-events: none; }

/* dots sit centred inside the action row, exactly where Instagram puts them */
.actions--car .cdots {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 4px;
}
.cdots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: #c7c7c7; cursor: pointer; transition: background 0.2s ease; }
.cdots button.is-on { background: #0095f6; }
/* bigger hit area without changing the look */
.cdots button { position: relative; }
.cdots button::after { content: ""; position: absolute; inset: -8px -2px; }

/* ----------------------------------------------------------- the slides */
.cslide {
  position: relative; flex: 0 0 100%; min-width: 100%; height: 100%; overflow: hidden; isolation: isolate;
  background: #030505; color: #fff;
}
.sl__photo {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--op, 50% 30%); pointer-events: none; -webkit-user-drag: none;
}
/* the arc is graded: cold for the before, neutral for the discovery, warm for the after */
.sl--cold .sl__photo { filter: saturate(0.45) contrast(1.08) brightness(0.86) hue-rotate(-6deg); }
.sl--cool .sl__photo { filter: saturate(0.8) contrast(1.04) brightness(0.92); }
.sl--warm .sl__photo { filter: saturate(1.12) contrast(1.03); }
.sl--cold::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(180deg, rgba(40, 90, 130, 0.55), rgba(10, 30, 50, 0.4));
}
.sl__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(3, 5, 5, 0.96) 0%, rgba(3, 5, 5, 0.86) 26%, rgba(3, 5, 5, 0.35) 50%, rgba(3, 5, 5, 0) 64%);
}
/* fine grain on every slide, so the set reads as one designed system */
.cslide::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the line */
.sl__copy { position: absolute; z-index: 4; left: 7cqw; right: 7cqw; bottom: 8cqw; }
.sl__mark { display: block; width: 15cqw; height: 4cqw; margin: 0 0 3.6cqw; overflow: visible; }
.sl__mark line { stroke: rgba(238, 243, 246, 0.28); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sl__mark path { fill: none; stroke: #0cbff0; stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sl__line {
  margin: 0; font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: 7cqw; line-height: 1.08; letter-spacing: 0.01em; color: #fff; text-wrap: balance;
  text-shadow: 0 0.4cqw 2.4cqw rgba(0, 0, 0, 0.55);
}
.sl__line--lg { font-size: 8.4cqw; line-height: 1.04; }
.sl__line em { font-style: normal; color: #0cbff0; }
.sl__sub { margin: 3.4cqw 0 0; font-family: var(--sans); font-weight: 700; font-size: 3.9cqw; line-height: 1.4; color: rgba(238, 243, 246, 0.86); }

/* slide 2 · built graphic: the count, dose and hope line that never settles */
.sl--graph { background: radial-gradient(80% 60% at 50% 32%, rgba(255, 93, 108, 0.10), transparent 70%), #05080a; }
.sl__graph { position: absolute; z-index: 1; left: 0; right: 0; top: 9cqw; width: 100%; height: 66cqw; overflow: visible; }
.sl__graph .rb { stroke: rgba(238, 243, 246, 0.26); stroke-width: 1.4; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.sl__graph .zone { fill: rgba(61, 220, 151, 0.06); }
.sl__graph .tr { fill: none; stroke: url(#slTraceGrad); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sl__graph text { font-family: var(--display); font-weight: 500; font-size: 15px; fill: rgba(238, 243, 246, 0.62); letter-spacing: 0.08em; }

/* slide 5 · the proof: his real CGM report, only the empty black side margins trimmed */
.sl--proof { background: #000; }
.sl__proof { position: absolute; z-index: 1; left: 0; top: 10cqw; width: 100%; height: 80cqw; overflow: hidden; background: #000; }
.sl__proof img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; pointer-events: none; -webkit-user-drag: none; }
.sl__src {
  position: absolute; z-index: 2; left: 4cqw; bottom: 3cqw; padding: 1cqw 2.2cqw; border-radius: 99px;
  background: rgba(0, 0, 0, 0.62); font-family: var(--sans); font-weight: 600; font-size: 2.7cqw; color: rgba(238, 243, 246, 0.85);
}
.sl--proof .sl__copy { bottom: 7cqw; }
.sl--proof .sl__line { font-size: 6.5cqw; }

/* slide 7 · the call to action (text only, a carousel slide can't be clicked) */
.sl--cta .sl__photo { object-position: 50% 0%; }
.sl--cta .sl__scrim { background: linear-gradient(0deg, rgba(3, 5, 5, 0.98) 0%, rgba(3, 5, 5, 0.92) 34%, rgba(3, 5, 5, 0.4) 56%, rgba(3, 5, 5, 0) 70%); }
.sl__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(60% 45% at 50% 28%, rgba(12, 191, 240, 0.22), transparent 70%); }
.sl__chip {
  display: inline-flex; align-items: center; gap: 1.6cqw; margin: 0 0 3.4cqw; padding: 1.3cqw 2.6cqw 1.3cqw 2.2cqw; border-radius: 99px;
  border: 1px solid rgba(12, 191, 240, 0.55); background: rgba(12, 191, 240, 0.12);
  font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 3.1cqw; line-height: 1; color: #bfeeff;
}
.sl__chip i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #0cbff0; box-shadow: 0 0 0 0.8cqw rgba(12, 191, 240, 0.22); }

/* ------------------------------------------------------- swipe hint line */
.hint {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0;
  font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em;
  font-size: calc(11px + var(--bump)); color: var(--muted);
}
.hint svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.is-thumb .hint { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ctrack { transition: none; }
  .cstage.is-peek .ctrack { animation: none; }
}
html.is-thumb .ctrack { transition: none; }

/* the hand-drawn "swipe me" note steps aside once they've swiped */
html.car-moved .callout { opacity: 0; }
@media (max-width: 979px) { .sa__intro .hint { display: none; } }
@media (min-width: 980px) { .sa__intro .hint { justify-content: flex-end; margin-top: 16px; } }