/* Motion-only styles. No colour tokens (those live in theme.css). Hooks are
   data attributes, see the addendum section 8. Everything here degrades to a
   complete static page when JS is absent. */

/* Pre-hide until js/sns.js has set each target's start state. theme-early.js adds
   motion-pending (never under reduced motion) and removes it after 6s at most. */
html.motion-pending [data-reveal],
html.motion-pending [data-stair],
html.motion-pending [data-preloader-count],
html.motion-pending [data-ghost] { visibility: hidden; }
html:not(.js) [data-preloader-count] { display: none; }
[data-preloader-line] { transform-origin: 50% 0; }

body.is-transitioning * { cursor: wait !important; }

/* Hole window (B2.1): the overlay is the frame, the window is cut out by an
   evenodd polygon. --hole-progress opens it, --hole-grow widens it on scroll. */
[data-hole] {
  --hole-progress: 1; --hole-grow: 0;
  --hw: calc(var(--hole-progress) * (24.165% + 25.835% * var(--hole-grow)));
  --hh: calc(var(--hole-progress) * (30% + 20% * var(--hole-grow)));
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    calc(50% - var(--hw)) calc(50% - var(--hh)), calc(50% + var(--hw)) calc(50% - var(--hh)),
    calc(50% + var(--hw)) calc(50% + var(--hh)), calc(50% - var(--hw)) calc(50% + var(--hh)),
    calc(50% - var(--hw)) calc(50% - var(--hh)));
}

/* Ghost bar: consumers read --ghost-p (0 rest, 1 collapsed) and --ghost-o. */
[data-ghost] { --ghost-p: 0; --ghost-o: 0.1; }

/* Sphere gallery. Children stay as the accessible strip, visually hidden once the canvas runs. */
[data-gallery-sphere][data-sphere-on] { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
[data-sphere-on] [data-gallery-item] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-gallery-info] { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 0.25em; padding: 1em; text-align: center; pointer-events: none; opacity: 0; visibility: hidden; }

/* Hero mask: fallback is the first image only. */
[data-hero-mask] { position: relative; overflow: hidden; }
[data-hero-mask]:not([data-hero-on]) [data-hero-item]:not(:first-child) { display: none; }
[data-hero-mask] [data-hero-item] img { display: block; width: 100%; height: auto; }

/* Infinite canvas host. The list inside stays as the fallback. */
[data-infinite-canvas][data-canvas-on] { position: relative; overflow: hidden; min-height: 70vh; }
[data-canvas-outline] { position: absolute; pointer-events: none; opacity: 0; z-index: 2; }

/* Scrub heading. */
[data-scrub-split] { display: flex; justify-content: space-between; align-items: baseline; }
[data-scrub-link] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* Dial rotor label host. */
[data-dial-label] { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; }

/* Custom cursor (fine pointer only; the element is only created then).
   mix-blend-mode keeps it visible on every ground. Focus outlines are never touched. */
.cursor { position: fixed; inset: 0; z-index: 2147483600; pointer-events: none; mix-blend-mode: difference; transition: opacity 0.2s; }
.cursor:not(.is-on) { opacity: 0; }
.cursor-dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.cursor-ring { position: absolute; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid #fff; border-radius: 50%; display: grid; place-items: center; transition: width 0.3s, height 0.3s, margin 0.3s; }
.cursor.is-hover .cursor-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.cursor.has-label .cursor-ring { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.cursor-label { font: 500 11px/1 system-ui, sans-serif; color: #fff; letter-spacing: 0; white-space: nowrap; }
html.has-cursor a, html.has-cursor button, html.has-cursor [data-cursor], html.has-cursor [data-hole] { cursor: none !important; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }