/* The cursor. Owned by the cursor work: src/cursor.js sets data-mode on .cur and .curx
   (home scenes: ring, light, hand, disc, star; pages: view, play, drag, live, text).
   .cur blends by difference so it stays visible on paper, night, film and the footer.
   .curx is the filled disc (view, play, drag) on its own layer with no blend, so photos under it stay true.
   Calm only: slow eases, no bounce, no overshoot. Size changes ease over .8 to 1 s. */
  .cur { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; mix-blend-mode: difference; color: #fff; contain: layout style; transition: opacity .5s var(--ease); }
  .cur i, .cur span { position: absolute; left: 0; top: 0; will-change: transform; }
  .cur i { border-radius: 50%; }
  .cur .d { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; transition: opacity .5s var(--ease), width .8s var(--ease), height .8s var(--ease), margin .8s var(--ease); }
  .cur .r { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid #fff; transition: width .8s var(--ease), height .8s var(--ease), margin .8s var(--ease), opacity .6s var(--ease), background-color .6s var(--ease); }
  .cur.loading, .cur.hide { opacity: 0; }
  .cur.away { opacity: 0; transition-duration: .3s; }

  /* the word: sits at the ring's center, fades and rises when it changes */
  .cur span { font: 500 .75rem/1 var(--text); letter-spacing: .01em; white-space: nowrap; opacity: 0; transition: opacity .5s var(--ease); }
  .cur.big span, .cur[data-mode="disc"] span { opacity: 1; }
  .cw { position: absolute; left: 0; top: 0; translate: -50% -50%; font-weight: inherit; opacity: 0; transform: translateY(.7em); transition: opacity .55s var(--ease), transform .8s var(--ease); }
  .cw.on { opacity: 1; transform: none; }
  .cw.off { opacity: 0; transform: translateY(-.7em); transition-duration: .4s, .7s; }

  /* links and buttons: the ring grows and is pulled toward their center (src/cursor.js); a word fills it */
  .cur.link .r { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
  .cur.big .r { width: 92px; height: 92px; margin: -46px 0 0 -46px; }
  .cur.big .d { opacity: 0; }

  /* home scenes: each keeps its own cursor */
  .cur[data-mode="light"] .r { width: 14px; height: 14px; margin: -7px 0 0 -7px; opacity: .8; }
  .cur[data-mode="light"] .d { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; }
  .cur[data-mode="hand"] .r { width: 120px; height: 120px; margin: -60px 0 0 -60px; opacity: .55; border-style: dashed; }
  .cur[data-mode="disc"] .r { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: #fff; }
  .cur[data-mode="disc"] .d { opacity: 0; }
  .cur[data-mode="disc"] span { color: #000; }
  .cur[data-mode="star"] .d { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

  /* pages: data-cursor modes */
  .cur[data-mode="view"] .r, .cur[data-mode="play"] .r, .cur[data-mode="drag"] .r { width: 96px; height: 96px; margin: -48px 0 0 -48px; opacity: 0; }
  .cur[data-mode="view"] .d, .cur[data-mode="play"] .d, .cur[data-mode="drag"] .d { opacity: 0; }
  .cur[data-mode="live"] .r { width: 12px; height: 12px; margin: -6px 0 0 -6px; opacity: 0; }
  .cur[data-mode="live"] .d { width: 4px; height: 4px; margin: -2px 0 0 -2px; opacity: .7; }
  .cur[data-mode="text"] .r { width: 18px; height: 18px; margin: -9px 0 0 -9px; opacity: .55; }
  .cur[data-mode="text"] .d { width: 2px; height: 2px; margin: -1px 0 0 -1px; opacity: 0; }

  /* the disc layer */
  .curx { position: fixed; left: 0; top: 0; z-index: 61; pointer-events: none; contain: layout style; will-change: transform; color: var(--ink); transition: opacity .5s var(--ease); }
  .curx.hide, .curx.loading { opacity: 0; }
  .curx > * { position: absolute; left: 0; top: 0; }
  .curx__disc { width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%; background: rgba(243,242,251,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 18px 40px -22px rgba(5,6,26,.55); opacity: 0; transform: scale(.3); transition: transform .9s var(--ease), opacity .6s var(--ease); }
  .curx.on .curx__disc { opacity: 1; transform: none; }
  .curx__t { font: 500 .75rem/1 var(--text); letter-spacing: .01em; white-space: nowrap; transition: translate .8s var(--ease); }
  .curx__play { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; translate: -3px -19px; opacity: 0; transition: opacity .6s var(--ease); }
  .curx.on[data-mode="play"] .curx__play { opacity: 1; transition-delay: .15s; }
  .curx[data-mode="play"] .curx__t { translate: 0 9px; }
  .curx__arr { width: 6px; height: 6px; margin: -3px 0 0 -3px; border: solid currentColor; border-width: 0 0 1.25px 1.25px; opacity: 0; transition: opacity .6s var(--ease), translate .9s var(--ease); }
  .curx__arr--l { rotate: 45deg; translate: -20px 0; }
  .curx__arr--r { rotate: -135deg; translate: 20px 0; }
  .curx.on[data-mode="drag"] .curx__arr { opacity: 1; transition-delay: .15s; }
  .curx.on[data-mode="drag"] .curx__arr--l { translate: -32px 0; }
  .curx.on[data-mode="drag"] .curx__arr--r { translate: 32px 0; }

  /* reduced motion: no lag (src/cursor.js), and changes are quick fades instead of travels */
  @media (prefers-reduced-motion: reduce) {
    .cur *, .curx * { transition-duration: .2s !important; transition-delay: 0s !important; }
    .cw, .cw.off { transform: none; }
  }
  @media (pointer: coarse) { .cur, .curx { display: none; } }
  @media (hover: hover) and (pointer: fine) { html.has-cur, html.has-cur a, html.has-cur button, html.has-cur label, html.has-cur [role="button"], html.has-cur input[type="checkbox"], html.has-cur input[type="radio"] { cursor: none; } }