/* Flow pass: where-you-are nav, scroll progress, hero cue + fade, scroll reveals, playable-logo cues, visualizer idle UI.
   Everything here is additive; delete this file and js/flow.js to go back to the previous behaviour. */

/* ---- header nav: underline grows under the section you are in ---- */
@media (min-width:901px){
  #hdr nav a{position:relative}
  #hdr nav a{transition:opacity .3s}
  #hdr nav:has(a.here) a:not(.here):not(:hover){opacity:.55}
}

/* ---- scroll progress: a one-pixel line across the very top ---- */
.fl-prog{display:none!important;position:fixed;top:0;left:0;width:100%;height:1px;background:var(--fg);opacity:.45;transform:scaleX(0);transform-origin:left;z-index:70;pointer-events:none}
@supports (animation-timeline:scroll()){
  .fl-prog{animation:flProg linear both;animation-timeline:scroll(root)}
  @keyframes flProg{to{transform:scaleX(1)}}
  /* hero settles back as the page scrolls over it */
  .hero .reel{animation:flReel linear both;animation-timeline:scroll(root);animation-range:0 90vh}
  .hero .in,.fl-cue{animation:flIn linear both;animation-timeline:scroll(root);animation-range:0 55vh}
  @keyframes flReel{to{opacity:.3}}
  @keyframes flIn{to{opacity:0;translate:0 -36px}}
}
html.vz-on .fl-prog,html.pong-on .fl-prog{display:none}

/* ---- hero: a quiet cue that there is more below ---- */
.fl-cue{position:absolute;z-index:2;right:var(--pad);bottom:clamp(36px,7vh,80px);display:flex;align-items:center;gap:12px;font:400 9px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--fg);opacity:.7;text-decoration:none}
.fl-cue i{display:block;width:1px;height:44px;background:linear-gradient(var(--fg),var(--fg)) no-repeat top/100% 40%;animation:flCue 2.2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes flCue{0%{background-position:0 -20px}100%{background-position:0 48px}}
@media (max-width:900px){.fl-cue span{display:none}.fl-cue{bottom:18px}}

/* ---- scroll reveals ---- */
html.fl-rv [data-rv]{opacity:0;translate:0 20px;transition:opacity .9s ease var(--rvd,0ms),translate 1s cubic-bezier(.2,.7,.2,1) var(--rvd,0ms)}
html.fl-rv [data-rv].in{opacity:1;translate:none}
@media (prefers-reduced-motion:reduce){
  html.fl-rv [data-rv]{opacity:1;translate:none;transition:none}
  .fl-cue i,.pong-hint{animation:none!important}
  .hero .reel,.hero .in,.fl-cue{animation:none!important}
}

/* ---- brand logos: they are playable, so they act like it ---- */
.lg2{cursor:pointer;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
@media (hover:hover){.lg2:hover{transform:translateY(-4px) rotate(-2.5deg) scale(1.06)}.lg2:nth-child(even):hover{transform:translateY(-4px) rotate(2.5deg) scale(1.06)}}
.pong-hint{display:inline-block;font:8px/1 "Press Start 2P",monospace;letter-spacing:.06em;color:#ffe9a8!important;opacity:1!important;animation:flBlink 1.1s steps(1) infinite;vertical-align:middle}
@keyframes flBlink{50%{opacity:.25}}

/* ---- visualizer: controls melt away when you stop moving ---- */
html.vz-idle .vz-dock{opacity:0!important;pointer-events:none;transition:opacity 1.4s ease!important}
html.vz-idle .vz-stage{cursor:none}

/* ---- pong: the line under a lost game ---- */
.pg-msg .pg-quip{color:#ffe9a8}

/* ---- pong: keep the music buttons clear of what the logo is saying on tall and mid-size windows ---- */
.pg-mu.mid{top:calc(50% + max(150px,19vh))}
.pg-hurt{top:calc(50% + max(202px,19vh + 52px))}