/* Hero scroll hint (B7, approved 2026-10-21). Testers tapped/typed into the Muse chat in the 3D phone
   instead of scrolling. A swipe-up hand (touch) / mouse wheel (mouse) with "Scroll to see your week"
   floats over the lower-middle of the phone screen, and the chat behind gets a light green wash.
   JS (src/js/main.js, "scroll hint") writes --cx/--cy on .scroll-hint (stage px, from the phone's
   projected rect) and --hint (1 at the top of the page, eased to 0 once scrolling starts) on <html>. */

/* the phone reads as a picture, not an app: default cursor, greyed composer */
.stage,.layer--mid,.screen{cursor:default}
.ms-input{background:#F1F1F2;box-shadow:0 0 0 1px #E9E9EB}
.ms-input #typed:empty::before{color:#C2C2C5}
.ms-plus{color:#C6C6C9}
.ms-mic{stroke:#C8C8CB}

/* the cue: no box; text and glyph lift off the chat with a soft white glow */
.scroll-hint{position:absolute;z-index:7;left:var(--cx,50%);top:var(--cy,60%);display:block;cursor:default;
  opacity:var(--hint,1);transform:translate3d(-50%,calc(-50% + (1 - var(--hint,1)) * 10px),0)}
.scroll-hint__in{display:flex;flex-direction:column;align-items:center;gap:10px;animation:hint-in .7s cubic-bezier(.23,1,.32,1) .35s both}
@keyframes hint-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.scroll-hint__ic{position:relative;width:56px;height:80px;display:block;margin-bottom:-4px}
.scroll-hint__ic svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 2px 6px rgba(35,97,58,.22))}
.scroll-hint__t{font:650 18px/1.15 var(--display);letter-spacing:-.015em;color:var(--ink);white-space:nowrap;
  text-shadow:0 0 1px #fff,0 0 10px rgba(255,255,255,.95),0 0 22px rgba(255,255,255,.85)}

/* touch: the hand swipes up (20px travel) and a short arrow line grows out of the fingertip, then both fade; 2 s loop */
.scroll-hint .mouse{display:none}
.scroll-hint .hand{animation:hint-swipe 2s cubic-bezier(.45,0,.25,1) infinite}
.scroll-hint .hand path{stroke:var(--brand-deep);stroke-width:1.6;fill:#fff}
.scroll-hint .streak{stroke:var(--brand-deep);stroke-width:2;transform-box:fill-box;transform-origin:50% 100%;animation:hint-streak 2s cubic-bezier(.45,0,.25,1) infinite}
.scroll-hint .arr{stroke:var(--brand-deep);stroke-width:2;animation:hint-arr 2s cubic-bezier(.45,0,.25,1) infinite}
@keyframes hint-swipe{0%{transform:translateY(0);opacity:0}8%{transform:translateY(0);opacity:1}58%{transform:translateY(-20px);opacity:1}80%,100%{transform:translateY(-20px);opacity:0}}
@keyframes hint-streak{0%,18%{transform:scaleY(0);opacity:0}26%{opacity:1}58%{transform:scaleY(1);opacity:1}82%,100%{transform:scaleY(1);opacity:0}}
@keyframes hint-arr{0%,28%{transform:translateY(5px);opacity:0}58%{transform:translateY(0);opacity:1}82%,100%{transform:translateY(-2px);opacity:0}}

/* mouse (hover + fine pointer): a mouse whose wheel rolls down, plus a bobbing chevron */
@media (hover:hover) and (pointer:fine){
  .scroll-hint .swipe{display:none} .scroll-hint .mouse{display:inline}
  .scroll-hint__ic{margin:-6px 0 -14px}
  .scroll-hint .mouse rect{stroke:var(--brand-deep);stroke-width:2;fill:rgba(255,255,255,.9)}
  .scroll-hint .wheel{stroke:var(--brand-deep);stroke-width:2.6;animation:hint-wheel 1.6s cubic-bezier(.45,0,.55,1) infinite}
  .scroll-hint .mchev{stroke:var(--brand-deep);stroke-width:2;animation:hint-bob 1.6s cubic-bezier(.45,0,.55,1) infinite}
  .scroll-hint__t{font-size:17px}
}
@keyframes hint-wheel{0%{transform:translateY(0);opacity:1}60%{transform:translateY(5px);opacity:0}61%{transform:translateY(0);opacity:0}100%{opacity:1}}
@keyframes hint-bob{0%,100%{transform:translateY(-1.5px)}50%{transform:translateY(2px)}}

/* the chat behind the cue gets a light green wash, so it reads as a preview (fades with the hint) */
.screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(238,247,230,0) 12%,rgba(238,247,230,.55) 44%,rgba(238,247,230,.68) 100%);opacity:var(--hint,1)}

/* reduced motion (.is-reduced = prefers-reduced-motion or ?reduced): the page opens on the finished story,
   so there is nothing to scroll-reveal over the phone: no cue, no wash, no animation */
.is-reduced .scroll-hint{display:none!important}
.is-reduced .screen::after{display:none}
@media (prefers-reduced-motion:reduce){ .scroll-hint__in,.scroll-hint__ic *{animation:none!important} }