/* Works E, round 13: the showcase (world.js). "the iklipse world showcase", the O of world the globe, three ways in and one
   button, then one motion into the field. world.js adds ww-on and builds every element under .ww, so nothing here changes a
   page without it. Every colour, family and radius is a live iklipse variable; the line's size is the site's h1 (96, 80,
   56 px) fitted by world.js to the width; the instructions are body size (16 px).
   Round 12's second part (the bar's loud toggles, its World and Grid labels) is gone from this file: round 13's bar is its
   own builder's files, and two stylesheets writing the switch's labels would draw both. */
/* slop-ok: SLOP-16 - the ladder is iklipseworld.com's own (h1 96, 80, 56; body 16), and the line's size is fitted by world.js to its measured width */
/* slop-ok: SLOP-25 - leading as the live site sets its headings (110 %) and its body (150 %) */
/* slop-ok: SLOP-18 - spacing is the live padding-global and the site's rem steps; the gap under the line is 48 px, 34 on a phone (world.js) */

/* Round 14: the showcase (world.js). Round 14 (Omar, 16 Oct 23:3x): "the" and "showcase" in PP Editorial
   medium, "iklipse world" in Excon; less room above Scroll / Drag / Swipe (24 px, 16 on a phone, from 48 and 34), more under
   them (48 px, 34 on a phone, from 24 and 20); "Enter the experience" is the site's own smaller button, .button.is-smaller
   (12 px type, padding 12 / 20 / 12 / 18, 42 px tall, from the 16 px, 52 px .button); the layer stays under the hand through
   the motion so a scroll cannot move the page under it. */
/* while the showcase shows, the field's chrome is held away whatever inline styles other modules write; from the end works.js
   brings the dock and Exit in over its own 450 ms */
.ww-on .we-dock,
.ww-on .we-stage > .we-exit,
.ww-on .we-back,
.ww-on .wh { visibility: hidden !important; opacity: 0 !important; }
/* before the first frame the field is not drawn, so the page never flashes the grid before the line */
.ww-pre .we-stage .we-plane,
.ww-pre .we-stage .ww-lens { visibility: hidden; }

/* Round 16 (Omar: "big FPS drop when it zooms in"): while the showcase runs, the tiles works.js parks off screen (at x -12000,
   by attribute) are out of the render tree. Each is a will-change layer, and with them in, Chrome re-layerized every one of
   them on every frame of the zoom (trace at 4x CPU, 1920: Layerize 0.80 s of the 2.6 s motion; with them out 0.51 s). The
   rule goes with ww-on when the field takes over, so the field parks as before. */
.ww-on .we-tile[data-park] { display: none !important; }

/* the globe's frame: the field's plane is moved into it for the length of the showcase; after the end a plain box */
.ww-rest { position: absolute; inset: 0; overflow: hidden; }
/* Clipped 6000 px outside its own box, in its own (scaled) pixels: works.js parks unused tiles at x -12000, which this keeps out
   at every scale the motion uses, while the opening sphere is never cut by the box's edge. Round 12 clipped to the box itself;
   with t rising from the first frame that cut the half opened sphere into a hard rectangle at lens 0.44 (r13 dev still, u 0.55) */
.ww-lens { position: absolute; inset: 0; overflow: visible; clip-path: inset(-6000px); will-change: transform; pointer-events: none; }
/* Round 16b (Omar, 17 Oct 2:41: "the sphere in the O has a weird color 3d object. Fix that too"): the core disc is gone; the
   O is the globe of project tiles alone on the dark ground. world.js no longer makes .ww-disc. */

/* the layer: fixed over the stage, never a scroller; armed it lets every pointer through, engaged it takes wheel and touch */
.ww {
  position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none;
  -webkit-tap-highlight-color: transparent; outline: none; color: var(--_theme---s-text);
}
.ww.is-engaged { pointer-events: auto; touch-action: none; cursor: grab; }
.ww.is-engaged:active { cursor: grabbing; }
.ww.is-pre { visibility: hidden; }
/* round 14: from the motion's first frame until the field takes input the layer itself still catches the wheel and the finger
   (world.js cancels them), so nothing scrolls the page under the motion; its children take nothing. is-free lets go. */
.ww.is-zooming, .ww.is-gone { pointer-events: auto; touch-action: none; cursor: default; }
.ww.is-zooming *, .ww.is-gone * { pointer-events: none !important; cursor: default; }
.ww.is-free, .ww.is-free * { pointer-events: none !important; }
.ww-view { position: absolute; inset: 0; will-change: transform; }
.ww-cam { position: absolute; inset: 0; will-change: transform, opacity; }

/* ---------- the line: one line on a wide screen, three on a narrow one; the o of world is left empty for the globe ---------- */
.ww-hi {
  position: absolute; left: 0; top: 0; width: 100%; margin: 0; text-align: center; white-space: nowrap;
  font-family: var(--_typography---font-family--primary); font-weight: var(--_typography---font-weight--semibold, 600);
  font-size: var(--ww-fs, 6rem); line-height: 1.1; letter-spacing: -.02em;
  font-kerning: normal; user-select: none; -webkit-user-select: none;
}
html.u-theme-dark .ww-hi { color: var(--_colors---primary--white); }
.ww-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ww-in { display: inline-block; }
.ww-l { display: inline-block; }
.ww-o { color: transparent; }
.ww-base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.ww-hi.is-three .ww-l { display: block; }
.ww-hi.is-three .ww-sp { display: none; }
/* PP Editorial Old italic 500, the site's .fancy and its rule (always medium italic): "the" and "showcase" */
.ww-it {
  font-family: var(--_typography---font-family--secondary); font-style: italic;
  font-weight: var(--_typography---font-weight--medium, 500); letter-spacing: -.03em;
}

/* ---------- round 15: one sentence and a quiet scroll cue, centred under the line on the O's axis (no button) ---------- */
.ww-how {
  position: absolute; left: 50%; top: 0; translate: -50% var(--ww-lift, 0px);
  /* round 16: 20 % bigger (Omar), from 36rem, a 48 px gap, 20 px type and a 2 x 40 px cue */
  width: min(43.2rem, calc(100vw - 2.5rem));
  display: flex; flex-direction: column; align-items: center; gap: 3.6rem;
}
/* the site's .text-size-large (20 px; 18 px, .text-size-medium, on a phone) times 1.2 since round 16 (24 and 21.6 px), Excon
   regular, the theme's text */
.ww-sub {
  margin: 0; text-align: center; text-wrap: balance;
  /* slop-ok: SLOP-35 - inherit carries the site's declared stack (Excon, Arial, sans-serif) */
  font-family: inherit; font-size: calc(var(--fixed--1-25rem, 1.25rem) * 1.2); font-weight: var(--_typography---font-weight--regular, 400); line-height: 1.5;
  color: var(--_theme---s-text);
}
html.u-theme-dark .ww-sub { color: var(--_colors---primary--white); }
/* from 768 px each sentence on its own line, so the break falls between them and not after "Filter it," */
.ww-sub-s { display: block; }
/* the cue: a 2 px track the text colour at 30 %, and a short run in Iklipse Cyan sliding down it, 1.8 s a pass, so the
   screen says "down" without a word or a box; still under reduced motion (the run rests at the top) */
.ww-cue {
  position: relative; display: block; width: 2.4px; height: 3rem; overflow: hidden; border-radius: 1.2px;
  background-color: color-mix(in srgb, var(--_theme---s-text) 30%, transparent);
}
/* 17 Oct: the cookie bar is up and the full rise would push the sentence into the line above (world.js makeRoom): the cue
   steps out and keeps its place, so nothing moves when it comes back with the bar answered */
.ww.is-tight .ww-cue { visibility: hidden; }
.ww-cue-run {
  position: absolute; left: 0; top: 0; width: 100%; height: 40%;
  background-color: var(--_colors---brand-colors--iklipse-cyan, #29abe2);
  animation: ww-cue 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes ww-cue {
  /* slop-ok: SLOP-08 - not a lift: the cue's cyan run travels down its own 2 px track, no shadow and no hover */
  0% { transform: translateY(-100%); }
  70%, 100% { transform: translateY(250%); }
}

/* slop-ok: SLOP-27 - Webflow's phone breakpoint, not a text measure */
@media screen and (max-width: 767px) {
  .ww-how { gap: 2.55rem; }
  .ww-sub { font-size: calc(var(--fixed--1-125rem, 1.125rem) * 1.2); }
  .ww-sub-s { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .ww-view, .ww-cam { will-change: auto; }
  .ww-cue-run { animation: none; }
}

/* ---------- J-259a: ?hero=eclipse only (world.js builds .ww-ecl; without the flag nothing here matches) ----------
   Omar, 17 Oct 22:1x: "Use this as the background of the hero section in a separate link and send it" / "For the works
   page*"; 22:3x: "Center the graphic in the section bruh wtf." His picture under the globe, centred in the section, on its
   own black (#000, the file's ground, measured at all four corners), edge to edge of the stage; world.js places and sizes
   it. The only life is a very slow scale of the picture as given, about its horizon (44.7 % of its height, the centre of
   its visible content), none under reduced motion. */
/* slop-ok: SLOP-08 - not a lift or a glow: the picture's own scale, 1.5 % over 12 s, the life Omar's brief allows */
.ww-ecl { position: absolute; inset: 0; overflow: hidden; background-color: #000; pointer-events: none; transform-origin: 0 0; will-change: transform, opacity; }
.ww-ecl-fit { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 50% 44.7%; }
.ww-ecl-img {
  display: block; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-select: none;
  /* the slow scale about the emblem's measured centre (world.js sets the same from EC) */
  transform-origin: 50.564% 45.464%; animation: ww-ecl-life 12s ease-in-out infinite alternate;
}
@keyframes ww-ecl-life { from { transform: scale(1); } to { transform: scale(1.015); } }
/* the soft dark fade behind the line and the sentence: black at --ww-veil over their boxes, to nothing over the soft edge
   (world.js sets the box and the edge); its strength is the least that holds every word at 4.5:1 over the picture
   (eclipse_contrast.py, measured on the render with the words hidden) */
/* slop-ok: SLOP-02 - a gradient with a job: the fade's soft edge, so the picture under the words dims without a box */
.ww-ecl-veil {
  --ww-veil: .55;
  position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0;
  background-color: rgb(0 0 0 / var(--ww-veil));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--ww-vx, 48px), #000 calc(100% - var(--ww-vx, 48px)), transparent), linear-gradient(to bottom, transparent, #000 var(--ww-vy, 32px), #000 calc(100% - var(--ww-vy, 32px)), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 var(--ww-vx, 48px), #000 calc(100% - var(--ww-vx, 48px)), transparent), linear-gradient(to bottom, transparent, #000 var(--ww-vy, 32px), #000 calc(100% - var(--ww-vy, 32px)), transparent);
  mask-composite: intersect;
}
@media (prefers-reduced-motion: reduce) {
  .ww-ecl { will-change: auto; }
  .ww-ecl-img { animation: none; }
}