/* ============================================================================
   Feature reel (js/shared/featureReel.js): a sliding pill rail above one
   stage. Each slide is a header band (headline and one line of copy) that
   fades into its clip, so the copy never covers the footage.

   Used by the landing hero and the EasyCompare and BetterThanSPY intro
   modals, so every colour is a --hm-reel-* token with a literal fallback.
   Hosts restyle the reel by overriding those tokens. Type scales with the
   reel's own width (cqi), so it reads the same in a modal and in the hero.
   ============================================================================ */

.hm-reel {
  --hm-reel-w: min(100%, 96vh);
  --hm-reel-bleed: var(--hm-pad, 0px);
  --hm-reel-ink: var(--hm-ink, #0e1726);
  --hm-reel-ink-soft: var(--hm-ink-soft, #44516a);
  --hm-reel-ink-faint: var(--hm-ink-faint, #6b7890);
  --hm-reel-line: var(--hm-line, #e4e9f2);
  --hm-reel-line-hover: #c9d3e6;
  --hm-reel-surface: var(--hm-surface, #ffffff);
  --hm-reel-band: var(--hm-bg-alt, #f3f6fb);
  --hm-reel-accent: var(--hm-brand, #3b5bdb);
  --hm-reel-accent-soft: #9fb4ff;
  --hm-reel-accent-shadow: rgba(59, 91, 219, 0.28);
  --hm-reel-progress: linear-gradient(90deg, #7c9cff, #63e6be);
  --hm-reel-radius: var(--hm-radius-lg, 22px);
  --hm-reel-shadow: var(--hm-shadow-lg, 0 24px 60px rgba(16, 23, 38, 0.13), 0 6px 18px rgba(16, 23, 38, 0.08));
  --hm-reel-ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  container-type: inline-size;
}

[data-theme="dark"] .hm-reel {
  --hm-reel-ink: #e6edf3;
  --hm-reel-ink-soft: #a5b1c2;
  --hm-reel-ink-faint: #7d8796;
  --hm-reel-line: rgba(148, 163, 184, 0.22);
  --hm-reel-line-hover: rgba(148, 163, 184, 0.42);
  --hm-reel-surface: #161b22;
  --hm-reel-band: #10151c;
  --hm-reel-accent: #748ffc;
  --hm-reel-accent-soft: #3b5bdb;
  --hm-reel-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

/* Reserve roughly the built height so the page doesn't jump when JS mounts. */
.hm-reel:not(.is-ready) {
  width: var(--hm-reel-w);
  margin-inline: auto;
  aspect-ratio: 16 / 12.8;
}

/* ---- Pill rail ------------------------------------------------------------ */
.hm-reel-nav {
  display: none;
  align-items: center;
  gap: 8px;
  width: var(--hm-reel-w);
  margin: 0 auto 14px;
}
.hm-reel.is-ready .hm-reel-nav { display: flex; }

.hm-reel-rail {
  --hm-reel-fade-l: 0px;
  --hm-reel-fade-r: 0px;
  flex: 1;
  min-width: 0;
  padding: 3px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--hm-reel-fade-l), #000 calc(100% - var(--hm-reel-fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--hm-reel-fade-l), #000 calc(100% - var(--hm-reel-fade-r)), transparent 100%);
}
.hm-reel-rail.has-before { --hm-reel-fade-l: 48px; }
.hm-reel-rail.has-after { --hm-reel-fade-r: 48px; }

.hm-reel-track {
  position: relative;
  display: flex;
  gap: 6px;
  width: max-content;
  transition: transform 0.55s var(--hm-reel-ease);
}
.hm-reel-track.is-instant { transition: none; }

.hm-reel-pill {
  position: relative;
  flex: none;
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  overflow: hidden;
  border: 1px solid var(--hm-reel-line);
  border-radius: 999px;
  background: var(--hm-reel-surface);
  color: var(--hm-reel-ink-soft);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.hm-reel-pill:hover { border-color: var(--hm-reel-line-hover); color: var(--hm-reel-ink); }
.hm-reel-pill:focus-visible { outline: 2px solid var(--hm-reel-accent); outline-offset: 2px; }

.hm-reel-pill-num {
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--hm-reel-ink-faint);
}

/* Progress of the playing clip, drawn along the bottom of the active pill. */
.hm-reel-pill::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--hm-reel-progress);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  opacity: 0;
}

.hm-reel-pill[aria-selected="true"] {
  background: var(--hm-reel-ink);
  border-color: var(--hm-reel-ink);
  color: var(--hm-reel-surface);
}
.hm-reel-pill[aria-selected="true"] .hm-reel-pill-num { color: var(--hm-reel-accent-soft); }
.hm-reel-pill[aria-selected="true"]::after { opacity: 1; }

.hm-reel-arrow {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hm-reel-line);
  border-radius: 50%;
  background: var(--hm-reel-surface);
  color: var(--hm-reel-ink-soft);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.hm-reel-arrow:hover { color: var(--hm-reel-ink); border-color: var(--hm-reel-line-hover); box-shadow: 0 1px 2px rgba(16, 23, 38, 0.04), 0 2px 8px rgba(16, 23, 38, 0.05); }
.hm-reel-arrow:focus-visible { outline: 2px solid var(--hm-reel-accent); outline-offset: 2px; }
.hm-reel-more { display: none; }

/* ---- Stage: slides stack in one grid cell, so the tallest sets the height -- */
.hm-reel-stage {
  position: relative;
  display: grid;
  width: var(--hm-reel-w);
  margin: 0 auto;
  border-radius: var(--hm-reel-radius);
  overflow: hidden;
  background: var(--hm-reel-band);
  border: 1px solid var(--hm-reel-line);
  box-shadow: var(--hm-reel-shadow);
}

.hm-reel-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.hm-reel-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}

/* Header band: sits above the clip and shares its backdrop colour. */
.hm-reel-note {
  order: -1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: clamp(14px, 2.1cqi, 22px) clamp(48px, 6.5cqi, 72px) 0;
  text-align: center;
  color: var(--hm-reel-ink);
}
.hm-reel-slide.is-active .hm-reel-note > * {
  animation: hm-reel-note-in 0.6s var(--hm-reel-ease) both;
}
.hm-reel-slide.is-active .hm-reel-note-text { animation-delay: 0.08s; }
@keyframes hm-reel-note-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.hm-reel-note-head {
  font-size: clamp(1.1rem, 2.7cqi, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.hm-reel-note-text {
  font-size: clamp(0.88rem, 1.7cqi, 1.1rem);
  line-height: 1.45;
  color: var(--hm-reel-ink-soft);
  text-wrap: pretty;
}

/* The clip starts under a soft fade from the band, so the two read as one. */
.hm-reel-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--hm-reel-band);
}
.hm-reel-screen::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: clamp(14px, 2.7cqi, 28px);
  background: linear-gradient(180deg, var(--hm-reel-band) 0%, color-mix(in srgb, var(--hm-reel-band) 55%, transparent) 45%, transparent 100%);
  pointer-events: none;
}
.hm-reel-screen > video,
.hm-reel-screen > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.hm-reel-slide[data-reel-fit="cover"] .hm-reel-screen > * { object-fit: cover; }

.hm-reel-pause {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: none;
  place-items: center;
  border: 1px solid var(--hm-reel-line);
  border-radius: 50%;
  background: var(--hm-reel-surface);
  color: var(--hm-reel-ink-soft);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hm-reel.is-ready .hm-reel-pause { display: grid; }
.hm-reel-pause:hover { color: var(--hm-reel-ink); border-color: var(--hm-reel-line-hover); }
.hm-reel-pause:focus-visible { outline: 2px solid var(--hm-reel-accent); outline-offset: 2px; }
.hm-reel-icon-play { display: none; }
.hm-reel-pause[aria-pressed="true"] .hm-reel-icon-play { display: block; }
.hm-reel-pause[aria-pressed="true"] .hm-reel-icon-pause { display: none; }

/* ---- Phones --------------------------------------------------------------- */
@media (max-width: 640px) {
  .hm-reel { --hm-reel-w: 100%; }
  .hm-reel:not(.is-ready) { aspect-ratio: 1; }
  .hm-reel-nav {
    width: auto;
    gap: 0;
    margin: 0 calc(-1 * var(--hm-reel-bleed)) 12px;
    padding-right: var(--hm-reel-bleed);
  }
  .hm-reel-track { padding-inline: var(--hm-reel-bleed) 10px; }
  .hm-reel-arrow,
  .hm-reel-pill-num { display: none; }
  .hm-reel-pill { height: 36px; padding: 0 14px; font-size: 0.84rem; }

  /* "N more" chip: tells phone visitors how many features are still to come. */
  .hm-reel-arrow--next {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    width: auto;
    height: 36px;
    padding: 0 8px 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--hm-reel-accent);
    color: #fff;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 12px var(--hm-reel-accent-shadow);
  }
  .hm-reel-arrow--next:hover { color: #fff; }
  .hm-reel-arrow--next.is-end { padding: 0 9px; }
  .hm-reel-more { display: inline; }

  /* One gentle slide on load hints that the pill row scrolls. */
  .hm-reel.is-ready .hm-reel-track { animation: hm-reel-nudge 1s var(--hm-reel-ease) 1.2s 1; }

  .hm-reel-stage {
    width: calc(100% + var(--hm-reel-bleed));
    margin-inline: calc(-0.5 * var(--hm-reel-bleed));
    border-radius: min(var(--hm-reel-radius), 16px);
    box-shadow: var(--hm-shadow-md, 0 6px 18px rgba(16, 23, 38, 0.07), 0 2px 6px rgba(16, 23, 38, 0.05));
  }
  .hm-reel-note { padding: 14px 8px 0; gap: 3px; }
  .hm-reel-note-head { font-size: 1.2rem; }
  .hm-reel-note-text { font-size: 0.95rem; line-height: 1.4; }
  .hm-reel-screen::before { height: 14px; }
  .hm-reel-pause {
    top: auto;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(14, 23, 38, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
  }
}

@keyframes hm-reel-nudge {
  0%, 100% { transform: translateX(0); }
  45% { transform: translateX(-44px); }
}

@media (prefers-reduced-motion: reduce) {
  .hm-reel.is-ready .hm-reel-track { animation: none; }
  .hm-reel-track,
  .hm-reel-slide { transition: none; }
  .hm-reel-slide.is-active .hm-reel-note > * { animation: none; }
}