/* PhoneReel - ported from Framer code component PhoneReel.tsx
   A pre-rendered phone that turns as the page scrolls; the app screen changes at
   31%, 57% and 83% of the way through. Frames are painted to a <canvas> at device
   resolution by js/framer/phonereel.js. This sheet holds the layout and the two
   states: still (reduced motion, below 810px, or no JS) shows a poster frame with
   all captions stacked under it; motion (class .fr-phonereel--motion, added by JS)
   pins the stage, shows the canvas, cross-fades captions and reveals the ticks.

   phone height = min(<phoneHeight>vh, (100vw - 48px) / ASPECT) with ASPECT =
   1000 / 1560, i.e. (100vw - 48px) * 1.56; below 810px it also caps at 420px. */

.fr-phonereel {
  --fr-phonereel-label: #6CACF6;
  --fr-phonereel-tick: rgba(108, 172, 246, 0.22);
  --fr-phonereel-tick-live: #4A9EFF;
  --fr-phonereel-h: 74vh;      /* phoneHeight */
  --fr-phonereel-travel: 360vh; /* scroll travel */
  position: relative;
  width: 100%;
  height: auto; /* still by default; JS sets the tall section in motion */
}
.fr-phonereel--motion { height: calc(var(--fr-phonereel-travel) + 100vh); }

.fr-phonereel__stage {
  position: relative;
  top: 0;
  height: auto;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  padding: 4vh 0 5vh;
  overflow: hidden;
}
.fr-phonereel--motion .fr-phonereel__stage {
  position: sticky;
  height: 100vh;
}

.fr-phonereel__phone {
  position: relative;
  height: min(var(--fr-phonereel-h), calc((100vw - 48px) * 1.56));
  aspect-ratio: 1000 / 1560;
}
@media (max-width: 809.98px) {
  .fr-phonereel__phone { height: min(var(--fr-phonereel-h), calc((100vw - 48px) * 1.56), 420px); }
}
.fr-phonereel__poster,
.fr-phonereel__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.fr-phonereel__canvas { display: none; }
.fr-phonereel--motion .fr-phonereel__canvas { display: block; }
.fr-phonereel.is-drawn .fr-phonereel__poster { display: none; }

.fr-phonereel__legend {
  display: grid;
  justify-items: center;
  gap: 16px;
  min-height: 72px;
  margin-top: 8px;
}
.fr-phonereel__captions {
  position: relative;
  display: grid;
  gap: 6px;
  text-align: center;
}
.fr-phonereel--motion .fr-phonereel__captions { gap: 0; }
.fr-phonereel__caption {
  margin: 0;
  font-family: var(--jifu-font-body, Montserrat, sans-serif);
  font-weight: 700;
  font-size: 10.8px;
  line-height: 1.62em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fr-phonereel-label);
  opacity: 1;
}
/* motion: captions overlap in one cell and cross-fade to the live one */
.fr-phonereel--motion .fr-phonereel__caption {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms cubic-bezier(.16, 1, .3, 1), transform 420ms cubic-bezier(.16, 1, .3, 1);
}
.fr-phonereel--motion .fr-phonereel__caption.is-live { opacity: 1; transform: none; }

.fr-phonereel__ticks {
  display: none;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fr-phonereel--motion .fr-phonereel__ticks { display: flex; }
.fr-phonereel__tick {
  width: 22px;
  height: 2px;
  background: var(--fr-phonereel-tick);
  transition: width 520ms cubic-bezier(.16, 1, .3, 1), background 520ms cubic-bezier(.16, 1, .3, 1);
}
.fr-phonereel__tick.is-live { width: 34px; background: var(--fr-phonereel-tick-live); }

@media (prefers-reduced-motion: reduce) {
  .fr-phonereel__caption, .fr-phonereel__tick { transition: none; }
}