/* Receva AI — hero motion sequence. Consumes root tokens (tokens.css). No new colour values.

   Replaces the static hero screenshot with an autoplaying walkthrough of the tenant
   dashboard: five real analytics views, each zoomed toward the figure it is making,
   with an annotation ring on the frame and a caption below it.

   Degradation, in order:
     no JS          -> frame 1 renders as a plain screenshot; rail and pause control hidden
     reduced motion -> no autoplay and no drift; the rail steps between frames
     off-screen     -> timer and animations suspend (see hero-motion.js)

   Every screenshot's own canvas is --brand-ivory, which is also --color-bg. Frames whose
   crop is wider than the viewport therefore letterbox invisibly instead of being cropped,
   so nothing readable is ever cut off. */

.hm{--hm-dur:5200ms;--hm-fade:780ms;--hm-z:1;position:relative}

/* ---------- frame ---------- */
.hm__viewport{position:relative;overflow:hidden;aspect-ratio:1890/859;background:var(--color-bg)}

.hm__scene{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  transform:translate3d(var(--dx,0),0,0);
  transition:opacity var(--hm-fade) var(--ease-in-out),transform var(--hm-fade) var(--ease-out)}
.hm__scene.is-visible{opacity:1;transform:none;z-index:1}
.hm__scene.is-live{will-change:opacity,transform}

/* scenes cropped by their own zoom dissolve at the cut instead of being sliced */
.hm__scene--fadeR{-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 90%,transparent 100%)}
.hm__scene--fadeL{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%);
  mask-image:linear-gradient(90deg,transparent 0,#000 10%)}
.hm__scene--fadeX{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}

.hm__frame{position:relative;width:100%;
  transform:scale(calc(var(--s0) * var(--hm-z)));transform-origin:var(--ox) var(--oy)}
.hm__frame img{display:block;width:100%;height:auto}
.hm__scene.is-live .hm__frame{will-change:transform;
  animation:hmDrift calc(var(--hm-dur) + var(--hm-fade)) var(--ease-out) forwards}
@keyframes hmDrift{
  from{transform:scale(calc(var(--s0) * var(--hm-z)))}
  to{transform:scale(calc(var(--s1) * var(--hm-z)))}
}

/* annotation ring — sits inside the frame, so it tracks the zoom */
.hm__ring{display:block;position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);
  border:2px solid var(--color-accent);border-radius:var(--radius-sm);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 16%,transparent);
  opacity:0;pointer-events:none}
.hm__scene.is-live .hm__ring{
  animation:hmRing calc(var(--hm-dur) + var(--hm-fade)) var(--ease-out) forwards}
@keyframes hmRing{
  0%{opacity:0;transform:scale(1.08)}
  16%{opacity:1;transform:scale(1)}
  84%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}
}


/* ---------- pause control, in the browser bar ---------- */
.hm__toggle{margin-left:auto;display:none;align-items:center;gap:7px;height:22px;padding:0 10px;
  border:1px solid var(--color-border-strong);border-radius:var(--radius-full);
  background:transparent;color:var(--color-text-muted);cursor:pointer;
  font:600 10px/1 var(--font-sans);letter-spacing:.07em;text-transform:uppercase}
.hm--ready .hm__toggle{display:inline-flex}
.hm__toggle:hover{color:var(--color-primary);border-color:var(--color-primary)}
.hm__glyph{width:8px;height:9px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.hm__toggle[aria-pressed="true"] .hm__glyph{width:0;height:0;border:5px solid transparent;
  border-left:8px solid currentColor;border-right:0}

/* ---------- caption deck ---------- */
.hm__deck{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-6);
  align-items:end;margin-top:var(--space-6)}
.hm__captions{display:grid}
.hm__caption{grid-area:1/1;display:flex;flex-direction:column;gap:var(--space-1);
  opacity:0;pointer-events:none}
.hm__caption>*{transform:translateY(9px);opacity:0;
  transition:opacity 460ms var(--ease-out),transform 460ms var(--ease-out)}
.hm__caption.is-visible{opacity:1;pointer-events:auto}
.hm__caption.is-visible>*{transform:none;opacity:1}
.hm__caption.is-visible>*:nth-child(3){transition-delay:110ms}

/* the figure rises out of a mask rather than fading, so the number lands like a readout */
.hm__caption>.hm__figure{overflow:hidden;padding-bottom:3px;opacity:1;transform:none;transition:none}
.hm__figure>span{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-3);
  font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-h3);letter-spacing:-.015em;
  transform:translateY(112%);transition:transform 600ms var(--ease-out)}
.hm__caption.is-visible .hm__figure>span{transform:none}
.hm__delta{flex-shrink:0;padding:4px 10px;border-radius:var(--radius-full);
  background:var(--color-success-subtle);color:var(--color-success);
  font-size:var(--fs-caption);font-weight:600;letter-spacing:.01em}

/* ---------- chapter rail ---------- */
.hm__rail{display:none;gap:var(--space-2);align-items:center}
.hm--ready .hm__rail{display:flex}
.hm__step{position:relative;width:46px;height:40px;padding:0;border:0;background:transparent;
  cursor:pointer;flex-shrink:0}
.hm__track,.hm__fill{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;
  border-radius:2px}
.hm__track{background:var(--color-border)}
.hm__fill{background:var(--color-accent-strong);transform:scaleX(0);transform-origin:0 50%}
.hm__step:hover .hm__track{background:var(--color-border-strong)}
.hm__step.is-done .hm__fill{transform:scaleX(1)}
.hm__step.is-live .hm__fill{animation:hmFill var(--hm-dur) linear forwards}
@keyframes hmFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- suspended: user pause, or scrolled out of view ---------- */
.hm.is-held .hm__scene.is-live .hm__frame,
.hm.is-held .hm__scene.is-live .hm__ring,
.hm.is-held .hm__step.is-live .hm__fill{animation-play-state:paused}

/* ---------- no JS: frame 1 only ---------- */
.hm:not(.hm--ready) .hm__scene:first-child,
.hm:not(.hm--ready) .hm__caption:first-child{opacity:1}
.hm:not(.hm--ready) .hm__caption:first-child>*{opacity:1;transform:none}
.hm:not(.hm--ready) .hm__caption:first-child .hm__figure>span{transform:none}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .hm{--hm-z:1.45;--hm-dur:4600ms}
  .hm__viewport{aspect-ratio:16/11}
  .hm__deck{grid-template-columns:1fr;gap:var(--space-4);align-items:start;margin-top:var(--space-4)}
  .hm__figure>span{font-size:20px;gap:var(--space-2)}
  .hm__rail{width:100%}
  .hm__step{flex:1 1 0;width:auto;height:44px}
  .hm__ring{border-width:1.5px}
}

/* ---------- reduced motion: hold each frame at its resting state ---------- */
@media (prefers-reduced-motion:reduce){
  .hm__scene.is-live .hm__frame{animation:none;transform:scale(calc(var(--s1) * var(--hm-z)))}
  .hm__scene.is-live .hm__ring{animation:none;opacity:1;transform:none}
  .hm__caption.is-visible .hm__figure>span{transform:none}
  .hm__step.is-live .hm__fill{animation:none;transform:scaleX(1)}
  .hm--ready .hm__toggle{display:none}
}