/* New Creative Design · "Every ___, one studio." section · CR-MOTION 2026-10-24
   Live: a sticky stage (canvas) over 9 svh of native scroll. Static (reduced motion / Save-Data): one poster per world. */
@font-face { font-family: "EvBrico"; src: url("/assets/home/fonts/bricolage-grotesque-latin-var.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "EvNews"; src: url("/assets/home/fonts/newsreader-italic-latin-var.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap; }

.every { --ink: #0F100E; --bone: #F3EFE6; --sig: #1E3BFF; --every-m: 22px;
  position: relative; height: 1000vh; height: 1000svh; background: var(--ink); color: var(--bone);
  font-family: "EvBrico", system-ui, sans-serif; }
.every-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); }
.every-poster, .every-poster img, .every-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.every-poster img { object-fit: cover; display: block; }
.every-canvas { display: block; }
.every.is-ready .every-poster { visibility: hidden; }
.every:not(.is-ready) .every-canvas { opacity: 0; }   /* keep the w0 poster visible until the first canvas frame paints (no black flash on load) */

/* the DOM is the source of truth: headings and lines stay readable to assistive tech, the canvas draws them */
.every-worlds { position: absolute; inset: 0; margin: 0; padding: 0; pointer-events: none; }
.every-world { position: absolute; inset: 0; }
.every-world h2, .every-world p, .every-still { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.every-still { display: none; }
.every-cta, .every-skip, .every-sound { font: 650 15px/1 "EvBrico", system-ui, sans-serif; letter-spacing: .01em;
  border-radius: 999px; text-decoration: none; cursor: pointer; }
.every-cta { position: absolute; left: var(--every-m); bottom: var(--every-m); display: inline-flex; align-items: center;
  min-height: 44px; padding: 8px 18px; box-sizing: border-box; max-width: calc(100% - 2 * var(--every-m) - 128px); line-height: 1.15; background: var(--bone); color: var(--ink); border: 0;
  opacity: 0; transform: translateY(8px); transition: opacity .22s ease-out, transform .22s ease-out; pointer-events: none; }
.every-cta:not([href]), .every-stage[data-field] .every-cta:not([href]) { cursor: default; background: none; color: var(--bone); padding-left: 0; padding-right: 0; font-weight: 600; filter: none; }
.every-stage[data-field="bone"] .every-cta:not([href]) { color: var(--ink); }
.every-world.is-on .every-cta:not([href]) { opacity: .6; pointer-events: none; }
.every-world.is-on .every-cta, .every-cta:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
.every-cta:focus-visible, .every-skip:focus-visible, .every-sound:focus-visible { outline: 3px solid var(--sig); outline-offset: 3px; }
.every-skip { position: absolute; top: var(--every-m); right: var(--every-m); z-index: 2; display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 14px; color: var(--bone); background: rgba(15, 16, 14, .55); border: 1px solid rgba(243, 239, 230, .4); }
.every-sound { position: absolute; right: var(--every-m); bottom: var(--every-m); z-index: 2; min-height: 44px; padding: 0 16px;
  color: var(--bone); background: rgba(15, 16, 14, .55); border: 1px solid rgba(243, 239, 230, .4); }
.every-sound[hidden] { display: none; }
.every-stage[data-field="bone"] .every-cta { background: var(--ink); color: var(--bone); }
.every-stage[data-field="bone"] .every-skip, .every-stage[data-field="bone"] .every-sound { color: var(--ink); background: rgba(243, 239, 230, .6); border-color: rgba(15, 16, 14, .35); }
.every-cta[href]:hover, .every-skip:hover, .every-sound:hover { filter: brightness(1.08); }

/* static: reduced motion or Save-Data → one poster per world, same DOM text and links */
@media (prefers-reduced-motion: reduce) {
  .every { height: auto; }
  .every-stage { position: relative; height: auto; overflow: visible; }
  .every-canvas, .every-poster, .every-sound { display: none; }
  .every-worlds { position: static; pointer-events: auto; }
  .every-world { position: relative; inset: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--every-m); padding-bottom: calc(var(--every-m) * 2); box-sizing: border-box; overflow: hidden; }
  .every-world .every-still, .every-world h2, .every-world p { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
  .every-still { display: block; position: absolute !important; inset: 0; z-index: 0; }
  .every-still img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .every-world h2 { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; }
  .every-world p { display: none; }
  .every-cta { position: relative; left: auto; bottom: auto; z-index: 1; opacity: 1; transform: none; pointer-events: auto; align-self: flex-start; transition: none; }
  .every-skip { position: absolute; }
}
.every.every--static { height: auto; }
.every--static .every-stage { position: relative; height: auto; overflow: visible; }
.every--static .every-canvas, .every--static .every-poster, .every--static .every-sound { display: none; }
.every--static .every-worlds { position: static; pointer-events: auto; }
.every--static .every-world { position: relative; inset: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--every-m); padding-bottom: calc(var(--every-m) * 2); box-sizing: border-box; overflow: hidden; }
.every--static .every-still { display: block; position: absolute; inset: 0; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; z-index: 0; }
.every--static .every-still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.every--static .every-cta { position: relative; left: auto; bottom: auto; z-index: 1; opacity: 1; transform: none; pointer-events: auto; align-self: flex-start; transition: none; }

/* film mode (film/film.html): a bare canvas */
html[data-every-mode="film"], html[data-every-mode="film"] body { margin: 0; height: 100%; overflow: hidden; background: #0F100E; }
.every-film { display: block; }

/* scroll cue (owner 10-24): a small mouse with a falling dot above "Sound on"; it fades once the visitor scrolls */
.every-cue { position: absolute; right: calc(var(--every-m) + 34px); bottom: calc(var(--every-m) + 62px); z-index: 2; width: 22px; height: 34px; box-sizing: border-box;
  border: 2px solid currentColor; border-radius: 12px; color: var(--bone); opacity: .85; pointer-events: none; transition: opacity .4s ease; }
.every-cue i { position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--sig); animation: every-cue 1.6s cubic-bezier(.5, 0, .5, 1) infinite; }
.every-cue::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 7px; height: 7px; margin-left: -4.5px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); animation: every-cue-ch 1.6s ease-in-out infinite; }
.every-stage[data-field="bone"] .every-cue { color: var(--ink); }
.every.is-scrolled .every-cue { opacity: 0; }
@keyframes every-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes every-cue-ch { 0%, 100% { opacity: .25; transform: translateY(-2px) rotate(45deg); } 50% { opacity: 1; transform: translateY(2px) rotate(45deg); } }
.every--static .every-cue { display: none; }
@media (prefers-reduced-motion: reduce) { .every-cue { display: none; } }

/* home mount (STUDIO): the site nav is sticky and 63px tall, so the stage sits under it instead of behind it */
body:has(> header.nav) #every .every-stage { top: 63px; height: calc(100vh - 63px); height: calc(100svh - 63px); }