/* Cinematic scroll story: scenes A (desktop + popover), B (the reading takes over), C (Analytics).
   Layers: static composition first (no JS, reduced motion, phones), then the pinned scroll story on
   html.pin (>= 900px, motion allowed). Native scroll-driven animations drive it; html.pin-js is the
   fallback (site.js sets --p per track and the same keyframes are scrubbed by animation-delay). */

:root {
  --mb-h: 28px;
  --mb-gs-cx: 328px; /* menu bar GluScout item centre, distance from the right edge */
  --pop-w: min(420px, calc(100vw - 2rem));
  --scene-ink: #f5f5f7;
  --scene-muted: rgb(235 240 255 / 0.78);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 900px) {
  :root {
    --pop-w: clamp(360px, 34vw, 560px);
  }
}

/* ---------- stage basics ---------- */
.track {
  position: relative;
}

.track__timeline {
  display: none;
}

.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--scene-ink);
  background-color: #030816;
}

.stage__wall {
  position: absolute;
  inset: 0;
  z-index: -4;
  overflow: hidden;
}

.wallpaper {
  display: block;
  width: 100%;
  height: 100%;
}

.wallpaper img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 30%;
}

.stage__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(to bottom, rgb(2 6 20 / 0) 38%, rgb(2 6 20 / 0.94) 78%);
}

.stage__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 34% at 50% 46%, rgb(var(--glow) / 0.34), transparent 70%);
}

.stage .btn--large {
  padding: 1rem 2.25rem;
  font-size: 1.1875rem;
}

.stage .btn--primary {
  box-shadow: 0 6px 24px rgb(0 80 255 / 0.4);
}

/* ---------- menu bar (desktop scene, not a device) ---------- */
.menubar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--mb-h);
  padding-inline: 14px;
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: var(--scene-ink);
  background-color: rgb(6 12 34 / 0.55);
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  white-space: nowrap;
  user-select: none;
}

.menubar__menus,
.menubar__status {
  display: flex;
  align-items: center;
  gap: 1.375rem;
}

.menubar__menus b {
  font-weight: var(--weight-semibold);
}

.menubar__status {
  gap: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.menubar__gs {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 2px 9px;
  margin-inline: -9px;
  isolation: isolate;
}

.menubar__gs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 6px;
  background-color: rgb(10 100 255 / 0.9);
  opacity: 0;
}

/* Static compositions show the open popover, so the item is pressed. */
html:not(.pin) .track--ab .menubar__gs::before {
  opacity: 1;
}

.menubar__gs::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
}

.menubar__gs img {
  width: 18px;
  height: 18px;
}

.menubar__icon {
  width: 17px;
  height: 14px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.menubar__icon circle {
  fill: currentcolor;
  stroke: none;
}

.menubar__icon--battery {
  width: 25px;
  stroke-width: 1.1;
}

@media (max-width: 899px) {
  .menubar__menus span {
    display: none;
  }

  .menubar__icon,
  .menubar__clock {
    display: none;
  }
}

/* ---------- scene A copy ---------- */
.a-copy {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--space-md);
  padding: calc(var(--mb-h) + 132px) var(--gutter) var(--space-lg);
}

.a-copy h1 {
  max-width: 11ch;
  font-size: clamp(3rem, 6.2vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.a-copy__sub {
  max-width: 25ch;
  font-size: clamp(1.25rem, 2.4vw, 2.25rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--scene-muted);
}

.a-copy__note {
  font-size: var(--text-caption);
  letter-spacing: 0;
  color: var(--scene-muted);
}

/* ---------- popover (hangs from the GluScout item) ----------
   The clip is the recorded popover (684x888 crop of V1). Its arrow sits 5 source px above the bar edge, so the
   figure rises by 6/684 of its width and the HTML menu bar covers the overlap. The arrow centre is 0.469 of the width. */
.popover {
  position: relative;
  width: var(--pop-w);
  margin: 0 auto var(--space-lg);
  /* --ps (0..1) is the scrub's shadow progress: the shadow grows in with the popover. Static frames keep it at 1. */
  filter: drop-shadow(0 0 1px rgb(255 255 255 / calc(0.3 * var(--ps, 1)))) drop-shadow(0 28px 50px rgb(0 0 20 / calc(0.6 * var(--ps, 1))));
  transform-origin: 50% 0;
}

.popover__clip,
.people-pop__clip {
  position: relative;
  overflow: hidden;
  aspect-ratio: 684 / 888;
  -webkit-mask: url("../video/mask-popover.svg") center / 100% 100% no-repeat;
  mask: url("../video/mask-popover.svg") center / 100% 100% no-repeat;
}

.people-pop__clip {
  width: 100%;
  aspect-ratio: 1004 / 822;
  -webkit-mask-image: url("../video/mask-profiles.svg");
  mask-image: url("../video/mask-profiles.svg");
}

.people-pop {
  filter: drop-shadow(0 0 1px rgb(255 255 255 / 0.18)) drop-shadow(0 24px 40px rgb(0 0 20 / 0.35));
}

.popover__clip :is(picture, video, img),
.people-pop__clip :is(picture, video, img),
.c-desk :is(picture, video, img) {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.popover__clip video,
.people-pop__clip video,
.c-desk video {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Live video: the scrubbed clip replaces the poster once it paints (.has-frame). The poster stays for no-JS, reduced motion,
   Save-Data and phones, and until the first frame is on screen, so no slot is ever an empty box. */
.vid [data-video].has-frame picture,
.vid [data-video][data-once]:not(.is-failed) picture {
  display: none;
}

/* V1 on wide screens is the scrub: until it fails, the poster stays out so scroll 0 shows the clean desktop. */
.vid [data-scene="1"]:not(.is-failed):not([data-still]) picture {
  display: none;
}

.scroll-hint {
  display: none;
}

/* ---------- scene B reading ---------- */
.b-reading {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-xs);
  padding: var(--space-lg) var(--gutter) var(--space-xl);
  text-align: center;
}

.b-reading__value {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.15em;
  font-size: clamp(7rem, 30vw, 17rem);
  font-weight: 200;
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-shadow: 0 0 2px rgb(255 255 255 / 0.9), 0 0 36px rgb(var(--glow) / 0.7), 0 0 120px rgb(var(--glow) / 0.55);
}

.b-reading__side {
  display: grid;
  justify-items: start;
  align-content: space-between;
  align-self: stretch;
  padding-block: 0.12em 0.04em;
}

.b-reading__arrow {
  width: 0.34em;
  height: 0.34em;
  fill: none;
  stroke: #ff6b64;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 14px rgb(255 107 100 / 0.5));
}

.b-reading__unit {
  font-size: 0.17em;
  font-weight: var(--weight-regular);
  letter-spacing: -0.01em;
  color: var(--scene-muted);
  text-shadow: none;
}

.b-reading__label {
  font-size: var(--text-caption);
  letter-spacing: 0;
  color: var(--scene-muted);
}

.b-reading h2 {
  margin-top: var(--space-md);
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: var(--weight-regular);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.b-reading__lead {
  max-width: 38ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  color: var(--scene-muted);
}

/* ---------- scene C ---------- */
.stage--c .menubar__menus {
  visibility: hidden; /* the floating nav pill sits over the menus; the clock side carries the desktop */
}

.stage--c {
  padding: calc(var(--mb-h) + 48px) 0 var(--space-xl);
}

.stage--c::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  height: min(22svh, 220px);
  background: linear-gradient(to bottom, transparent, var(--canvas));
  pointer-events: none;
}

.c-copy {
  position: relative;
  display: grid;
  gap: var(--space-sm);
  padding-inline: var(--gutter);
}

.c-copy h2 {
  max-width: 16ch;
  font-size: clamp(2.5rem, 4.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.c-copy__sub {
  max-width: 60ch;
  font-size: clamp(1.125rem, 1.7vw, 1.625rem);
  line-height: 1.3;
  color: var(--scene-muted);
}

.c-copy__note {
  font-size: var(--text-caption);
  letter-spacing: 0;
  color: var(--scene-muted);
}

/* The recorded desk (V2 crop, 2600x1850 source px at 900,62 of the 3840x2160 desktop; wide enough to hold the window and popover shadows). On wide screens it sits on the same
   desktop mapping as the page wallpaper (see the >= 900px block), so its background pixels are the page's: no edge to feather.
   Below that the box is static and its edges feather into the wallpaper. */
.c-desk {
  position: relative;
  width: min(100% - 2 * var(--gutter), 720px);
  margin: var(--space-lg) auto 0;
  aspect-ratio: 2600 / 1850;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 90%, transparent);
  mask-composite: intersect;
}

/* ---------- desktop composition (>= 900px): same frames static and pinned ---------- */
@media (min-width: 900px) {
  .stage--ab {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--pop-w);
    grid-template-areas: "copy pop" "read read";
    column-gap: var(--space-lg);
  }

  .a-copy {
    grid-area: copy;
    align-content: center;
    min-height: 100svh;
    padding: var(--mb-h) 0 0 max(var(--gutter), 4vw);
  }

  .popover {
    grid-area: pop;
    align-self: start;
    margin: calc(var(--mb-h) - var(--pop-w) * 0.00877) calc(var(--mb-gs-cx) - 0.531 * var(--pop-w)) 0 0;
    justify-self: end;
  }

  .b-reading {
    grid-area: read;
    padding-top: var(--space-section);
  }

  /* Scene C is one desktop: wallpaper and recording share a scale (--u, px per desktop px, cover) and an origin. */
  .stage--c {
    --u: max(100cqw / 3840, 100cqh / 2160);
    --x0: calc((100cqw - 3840 * var(--u)) / 2);
    --y0: calc((100cqh - 2160 * var(--u)) / 2);
    container-type: size;
    height: 100svh;
    padding: 0;
  }

  .stage--c .stage__wall .wallpaper {
    position: absolute;
    left: var(--x0);
    top: var(--y0);
    width: calc(3840 * var(--u));
    height: calc(2160 * var(--u));
    max-width: none;
  }

  .c-desk {
    position: absolute;
    z-index: 1;
    width: calc(2600 * var(--u));
    margin: 0;
    left: calc(var(--x0) + 900 * var(--u));
    top: calc(var(--y0) + 62 * var(--u));
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* The recording puts the Analytics window at 29% from the left, so the copy takes the column beside it, under the nav pill. */
  .c-copy {
    position: absolute;
    inset: 112px auto auto max(var(--gutter), 4vw);
    z-index: 2;
    width: calc(var(--x0) + 1118 * var(--u) - max(var(--gutter), 4vw) - 2rem);
  }

  .c-copy h2 {
    max-width: none;
    font-size: clamp(2.25rem, 3.7vw, 4.5rem);
  }

  .c-copy__sub {
    font-size: clamp(1rem, 1.3vw, 1.375rem);
  }
}

/* Narrow desktops: the column beside the window is too thin, so the copy sits under the desk. */
@media (min-width: 900px) and (max-width: 1199px) {
  .c-copy {
    inset: calc(var(--y0) + 1700 * var(--u)) auto auto max(var(--gutter), 4vw);
    width: min(72vw, 760px);
  }

  .c-copy h2 {
    font-size: clamp(2rem, 4.6vw, 3rem);
  }
}

/* ---------- pinned scroll story ---------- */
.pin .track--ab {
  height: 340svh;
}

.pin .track--c {
  height: 270svh;
}

.pin .stage {
  position: sticky;
  top: 0;
  height: 100svh;
}

.pin .track__timeline {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pin .track--c .track__timeline {
  top: -50svh;
}

.pin .stage--ab {
  display: block;
}

.pin .a-copy {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  width: min(54vw, 860px);
}

.pin .popover {
  position: absolute;
  top: calc(var(--mb-h) - var(--pop-w) * 0.00877);
  right: calc(var(--mb-gs-cx) - 0.531 * var(--pop-w));
  margin: 0;
  z-index: 2;
}

.pin .scroll-hint {
  display: block;
  position: absolute;
  inset: auto 0 22px;
  z-index: 2;
  width: 14px;
  margin-inline: auto;
  color: var(--scene-ink);
  opacity: 0.7;
  transition: opacity 0.35s var(--ease-out);
  pointer-events: none;
}

.pin .scroll-hint svg {
  display: block;
  width: 14px;
  height: 24px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: hint-bob 2.2s ease-in-out infinite;
}

.is-scrolled .scroll-hint {
  opacity: 0;
}

.pin:not(.is-scrolled) .track--ab .menubar__gs::after {
  animation: gs-pulse 2.4s ease-out 0.8s infinite;
}

@keyframes hint-bob {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(6px); opacity: 1; }
}

@keyframes gs-pulse {
  0% { opacity: 0.9; box-shadow: 0 0 0 0 rgb(120 170 255 / 0.65), 0 0 10px rgb(120 170 255 / 0.5); }
  70%, 100% { opacity: 0; box-shadow: 0 0 0 10px rgb(120 170 255 / 0), 0 0 10px rgb(120 170 255 / 0); }
}

.pin .b-reading {
  position: absolute;
  inset: calc(var(--mb-h) + 11svh) 0 auto;
  padding: 0 var(--gutter);
  z-index: 1;
}

.pin .b-reading__value {
  font-size: min(25svh, 17rem);
}

.pin .b-reading h2 {
  margin-top: 1.5svh;
}

/* fallback + native driver share these */
.pin .stage--ab .stage__wall .wallpaper,
.pin .a-copy,
.pin .popover,
.pin .b-reading,
.pin .stage__scrim,
.pin .stage__glow,
.pin .track--ab .menubar__gs::before,
.pin .track--ab .menubar__menus {
  animation-timing-function: linear;
  animation-fill-mode: both;
  will-change: transform, opacity;
}

.pin .stage--ab .stage__wall .wallpaper {
  animation-name: wall-dolly;
}

.pin .a-copy {
  animation-name: a-out;
}

.pin .popover {
  animation-name: popover-travel;
}

.pin .b-reading {
  animation-name: b-in;
}

.pin .stage__scrim {
  animation-name: scrim-in;
}

.pin .stage__glow {
  animation-name: glow-in;
}

.pin .track--ab .menubar__gs::before {
  animation-name: gs-on;
}

.pin .track--ab .menubar__menus {
  animation-name: menus-out;
}

/* B reading starts hidden only while pinned (visible in the static frames) */
.pin .stage__scrim {
  background: rgb(2 6 20 / 0.92);
}

@keyframes wall-dolly {
  from { transform: scale(1); }
  to { transform: scale(1.14); }
}

@keyframes a-out {
  0%, 28% { opacity: 1; transform: none; }
  44%, 100% { opacity: 0; transform: translate3d(0, -5svh, 0); }
}

/* The h1 stays in the accessibility tree: opacity only. Once faded, the badge link leaves tab order and pointer reach. */
.a-gone .a-copy {
  pointer-events: none;
}

.a-gone .a-copy a {
  visibility: hidden;
}

/* Handover to scene C: scene B's copy fades out as its stage leaves, so it never slides under the pill. */
.pin .stage--ab .b-reading {
  filter: opacity(calc(1 - var(--leave, 0)));
}

/* Scene C's bar fades in only as it reaches the top, so no second bar crosses the screen. */
.pin .stage--c .menubar {
  opacity: var(--bar-in, 1);
}

@keyframes popover-travel {
  0%, 30% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  48% {
    transform: translate3d(calc((var(--mb-gs-cx) - 50vw - 0.031 * var(--pop-w)) * 0.9), calc((71svh - var(--mb-h) - 6px) * 0.92), 0) scale(1.09);
  }
  62%, 100% {
    transform: translate3d(calc(var(--mb-gs-cx) - 50vw - 0.031 * var(--pop-w)), calc(71svh - var(--mb-h) - 6px), 0) scale(1.1);
  }
}

@keyframes b-in {
  0%, 34% { opacity: 0; transform: translate3d(0, 5svh, 0) scale(0.9); visibility: hidden; }
  35% { visibility: visible; }
  64%, 100% { opacity: 1; transform: none; visibility: visible; }
}

@keyframes scrim-in {
  0%, 28% { opacity: 0; }
  58%, 100% { opacity: 1; }
}

@keyframes glow-in {
  0%, 30% { opacity: 0; }
  66%, 100% { opacity: 1; }
}

@keyframes gs-on {
  0% { opacity: 0; }
  2%, 34% { opacity: 1; }
  40%, 100% { opacity: 0; }
}

@keyframes menus-out {
  0%, 26% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

@supports (animation-timeline: view()) {
  .pin:not(.pin-js) .track--ab {
    timeline-scope: --tab;
  }

  .pin:not(.pin-js) .track--c {
    timeline-scope: --tc;
  }

  .pin:not(.pin-js) .track--ab .track__timeline {
    view-timeline: --tab block;
    view-timeline-inset: 0 0;
  }

  .pin:not(.pin-js) .track--c .track__timeline {
    view-timeline: --tc block;
    view-timeline-inset: 0 0;
  }

  .pin:not(.pin-js) .track--ab :is(.wallpaper, .a-copy, .popover, .b-reading, .stage__scrim, .stage__glow),
  .pin:not(.pin-js) .track--ab .menubar__menus,
  .pin:not(.pin-js) .track--ab .menubar__gs::before {
    animation-timeline: --tab;
    animation-range: contain 0% contain 100%;
  }

}

.pin-js :is(.stage--ab .wallpaper, .a-copy, .popover, .b-reading, .stage__scrim, .stage__glow),
.pin-js .track--ab .menubar__menus,
.pin-js .track--ab .menubar__gs::before {
  animation-duration: 1s;
  animation-play-state: paused;
  animation-delay: calc(var(--p, 0) * -1s);
}

/* ---------- below the scenes ---------- */
.section--first {
  background-image: radial-gradient(70% 38% at 50% 0%, light-dark(rgb(0 113 227 / 0.06), rgb(41 110 255 / 0.18)), transparent 70%);
  background-repeat: no-repeat;
  padding-top: var(--space-section);
}

.section-header__more {
  max-width: 44rem;
  font-size: var(--text-caption);
  letter-spacing: 0;
  color: var(--muted);
}

/* ---------- Polish pages: app windows as stills ----------
   The scroll-story recordings show English UI, so /pl/ uses the Polish screenshots until Polish recordings exist.
   The screenshots carry their own rounded alpha edges, so the recording masks come off. */
.popover__clip--shot,
.people-pop__clip--shot {
  -webkit-mask: none;
  mask: none;
}

.popover__clip--shot {
  aspect-ratio: 686 / 867;
}

.people-pop__clip--shot {
  aspect-ratio: 1006 / 824;
}

.b-reading__arrow--slow {
  stroke: #34d27b;
  filter: drop-shadow(0 0 14px rgb(52 210 123 / 0.5));
  transform: rotate(-45deg);
}

.c-desk--shot {
  aspect-ratio: auto;
  -webkit-mask-image: none;
  mask-image: none;
}

.c-desk--shot :is(picture, img) {
  height: auto;
  object-fit: contain;
}

.c-desk--shot picture {
  filter: drop-shadow(0 0 1px rgb(255 255 255 / 0.25)) drop-shadow(0 28px 50px rgb(0 0 20 / 0.55));
}

/* Image-driven scrub (data-still): site.js sets inline opacity, --ps and --m from the same progress as the EN video.
   Until its first run the still stays out, so scroll 0 is the clean desktop; static frames never set --m (identity). */
.pin [data-still] {
  opacity: 0;
}

.popover__clip[data-still] {
  transform-origin: 46.9% 0; /* the arrow: the popover grows out of the menu bar item */
  transform: translate3d(0, calc((1 - var(--m, 1)) * -3%), 0) scale(calc(0.84 + 0.16 * var(--m, 1)));
}

.c-desk[data-still] {
  transform-origin: 50% 40%;
  transform: translate3d(0, calc((1 - var(--m, 1)) * 7svh), 0) scale(calc(0.92 + 0.08 * var(--m, 1)));
}

/* >= 900px the still sits where the recorded window sits (7.8% / 13.7% of the 2600x1850 desk crop, 69.1% wide). */
@media (min-width: 900px) {
  .c-desk--shot {
    aspect-ratio: 2600 / 1850;
  }

  .c-desk--shot picture {
    position: absolute;
    left: 7.8%;
    top: 13.7%;
    width: 69.1%;
  }
}