/* The landing hero's shared demo bits: the finger, caption, and the anchored
   menu the app raises over a selection, plus the lockup-mark fix and cell
   transitions. The page's own layout lives in the <style> block in
   templates/pages/landing.html. The grid itself reuses .cal from app.css. */

/* the header lockup mark: app.css styles bare .mark as the big door glyph
   (display:grid, 44px wide, a 16px bottom margin), which floats it above the
   wordmark inside a centred lockup. In a lockup it is just an inline mark. */
.lockup .mark{display:inline-block;width:auto;height:auto;margin:0;gap:0;vertical-align:middle}

/* the finger: a soft ink touch point that glides to what it acts on */
.demo-finger{position:absolute;top:0;left:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  background:color-mix(in srgb,var(--ink) 20%,transparent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 40%,transparent);
  opacity:0;transform:translate(40px,40px);pointer-events:none;z-index:8;
  transition:transform .55s cubic-bezier(.4,.9,.3,1),opacity .3s ease}
.demo-finger.on{opacity:.85}

/* the caption: one muted line, fading in and out under the month */
.demo-cap{min-height:1.5em;margin-top:11px;text-align:center;font-size:13px;font-weight:500;
  letter-spacing:-.01em;color:var(--prose)}
.demo-cap [data-cap]{display:inline-block;opacity:0;transform:translateY(4px);
  transition:opacity .35s ease,transform .35s ease}
.demo-cap [data-cap].in{opacity:1;transform:none}

/* the cell transitions while the loop plays */
@property --split{syntax:"<percentage>";inherits:true;initial-value:75%}
.land-shot.playing .cell,.demo-stage.playing .cell,.stage.playing .cell{
  transition:background-color .5s ease,border-color .5s ease,opacity .45s ease,transform .45s ease,--split .9s ease}
.land-shot .cell.tap,.demo-stage .cell.tap,.stage .cell.tap{transform:scale(.95)}

/* the menu the app raises over the selection: a card with a tail, the app's
   own words, one row picked out. It floats above the cells it is about. */
.demo-menu{position:absolute;z-index:9;left:0;top:0;width:214px;
  transform:translate(-50%,-100%) translateY(6px) scale(.96);transform-origin:50% 100%;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 22px 48px -22px rgba(31,31,29,.55),0 2px 8px -4px rgba(31,31,29,.3);
  padding:5px;opacity:0;pointer-events:none;
  transition:opacity .28s ease,transform .28s cubic-bezier(.3,.9,.3,1)}
.demo-menu.up{opacity:1;transform:translate(-50%,-100%) translateY(0) scale(1)}
.demo-menu .row{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.25;
  padding:9px 11px;border-radius:8px;letter-spacing:-.01em}
.demo-menu .row.primary{color:var(--action);font-weight:600}
.demo-menu.picked .row.primary{background:color-mix(in srgb,var(--action) 12%,transparent)}
.demo-menu .tail{position:absolute;left:50%;bottom:-7px;width:13px;height:13px;margin-left:-6px;
  background:var(--card);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:rotate(45deg)}

@media (prefers-reduced-motion:reduce){
  .demo-finger{display:none}
  .land-shot.playing .cell,.demo-stage.playing .cell,.stage.playing .cell{transition:none}
  .demo-menu{opacity:1;transform:translate(-50%,-100%) translateY(0)}
}