/* =====================================================================
   A-O — core
   ---------------------------------------------------------------------
   Reset, the two site-wide rules that no page may break, the ground,
   the scrollbar, and the refusal screen.

   Load order is fixed and matters:
       fonts/fonts.css → css/tokens.css → css/core.css → css/components.css
   ===================================================================== */

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

/* --------------------------------------------------------------------
   RULE ONE — nothing is rounded.                    DECISIONS.md § 1
   --------------------------------------------------------------------
   Applied to everything, with zero specificity, so any component can
   opt back in simply by saying so. Shapes that ARE round say it with
   `.is-round`; the site has exactly three of them — the veil, the
   logo's burst, and the particles, which are drawn on canvas and never
   touch CSS at all.

   Line ends are cut square for the same reason: a rounded cap is a
   rounded corner that happens to be made of stroke.                  */

*,*::before,*::after{ border-radius:var(--radius); }
.is-round{ border-radius:var(--round); }

svg *{ stroke-linecap:butt; stroke-linejoin:miter; }
svg .is-round{ stroke-linecap:butt; }   /* circles need no cap anyway */

/* --------------------------------------------------------------------
   RULE TWO — almost everything casts a shadow.      DECISIONS.md § 1
   --------------------------------------------------------------------
   "Almost" is the operative word: the shadow is a token, applied by
   the components that are surfaces — panels, sliders, forms, boxes.
   It is not applied here globally, because a shadow on every span is
   not a style, it is a smear.                                        */

/* ------------------------------------------------------------ ground */

html,body{
  width:100%; height:100%;
  overflow:hidden;
  background:var(--grey-0);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -webkit-user-select:none; user-select:none;
}

body{ cursor:grab; }
body.dragging{ cursor:grabbing; }
button,a{ cursor:pointer; font-family:inherit; color:inherit; }
button{ background:none; border:0; }
img,a{ -webkit-user-drag:none; user-drag:none; }

/* The scrolling surface. Everything the user can move lives inside it. */
#stage{
  position:fixed; inset:0;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  will-change:transform;
  background:var(--ground-log);
}
#stage.anim { transition:transform var(--t-page) var(--ease-out); }
#stage.nudge{ transition:transform 240ms cubic-bezier(.3,.9,.3,1); }

body.blk #stage{ background:var(--ground-blk); }

/* --------------------------------------------------------------------
   Scrollbar — removed.                              DECISIONS.md § 8
   --------------------------------------------------------------------
   Section 8 says "la barre de défilement du navigateur est restylée,
   pas masquée", and until now it was. The author has overruled it:
   the bar was misbehaving and earning nothing.

   He is right about the earning. #stage is a fixed, full-screen
   scroller, so the browser draws its bar down the right-hand edge of
   the WINDOW rather than beside anything — a rule floating over the
   ground of section 7 with no page to sit next to. And on LOG and
   BLACK-LOG there is nothing to scroll at all, so it announced a
   depth the page does not have.

   THE SCROLLING ITSELF IS UNTOUCHED. overflow-y stays auto, the wheel
   still works, PageUp / PageDown / Home / End still work, and the
   destination pages still run their whole length. What is gone is the
   drawing of the bar, and nothing else.

   To bring it back, delete this block: the rules that styled it are in
   the history of this file, and section 8 is still the contract's
   wording.                                                           */

#stage{
  scrollbar-width:none;                    /* Firefox, and the standard */
  -ms-overflow-style:none;                 /* old Edge                  */
}
#stage::-webkit-scrollbar{                 /* Chrome, Edge, Safari      */
  width:0; height:0;
  display:none;
}

/* ------------------------------------------------------------- board */

#dust{
  position:absolute; left:0; top:0; width:100%; height:100%;
  z-index:var(--z-dust); pointer-events:none;
}
/* Section 7: the fog is allowed to pass slightly over the sliders and
   the texts, so it sits above the board rather than behind it. */
#fog{
  position:absolute; left:0; top:0; width:100%; height:100%;
  z-index:var(--z-fog); pointer-events:none;
  mix-blend-mode:screen;
}
.board{ position:relative; z-index:var(--z-board); width:100vw; height:100vh; }

/* -------------------------------------------------------- the veil */

#veil{
  position:fixed; left:0; top:0; width:160px; height:160px; margin:-80px 0 0 -80px;
  background:#000; z-index:var(--z-veil); pointer-events:none;
  transform:scale(0); display:none;
  border-radius:var(--round);          /* a disc: round on purpose */
}

/* ------------------------------------------------- zone transition */

html.flash{ animation:flash 520ms steps(1,end); }
@keyframes flash{
  0%,100%{ filter:none; }
  12%{ filter:invert(1); }
  24%{ filter:none; }
  40%{ filter:invert(1) saturate(.2); }
  55%{ filter:invert(1); }
  80%{ filter:invert(1) saturate(0); }
}

/* --------------------------------------------------------------------
   Refusal screen — desktop only.                    DECISIONS.md § 1
   --------------------------------------------------------------------
   The site is navigated by dragging with a mouse. On a touch pointer
   there is no drag, no hover, and no A-O button: half the site would
   simply not exist. So it is refused, plainly, rather than degraded.

   The test is the POINTER, not the screen width: a narrow desktop
   window is still a desktop, and a large tablet is still a tablet.   */

#nodesktop{
  position:fixed; inset:0; z-index:var(--z-refusal); display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:#000; color:#fff; text-align:center; padding:32px;
}
#nodesktop b{
  font-weight:700; font-size:calc(18px * var(--scale));
  text-transform:uppercase; letter-spacing:.04em;
}
#nodesktop span{
  font-family:var(--mono); font-size:calc(11px * var(--ui));
  opacity:.6; max-width:38ch; line-height:2;
}
/* `#stage` is the scrolling surface, and index has none — it is a black
   screen with one sentence, nothing to scroll. `.screen` is the generic
   hook for "everything the visitor can see on this page", so a page that
   is not built on a stage is refused just as firmly. */
@media (pointer:coarse){
  #nodesktop{ display:flex; }
  #stage,
  .screen{ display:none; }
}