/* The experiments' frame (terminator, quicksilver, spirals, impossible, mirror, anamorphosis, seasons):
   the studio's bar in its dark glass, as over the lab on the home page, and the entrance with the
   eagle (assets/xp.js). Each experiment keeps its own world inside; only the frame is the studio's.
   The bar is each page's own #topbar, restyled here (the id outranks the pages' own class rules),
   so their scripts keep every hook: the name, the state, Top, Pause and the chapter button. */
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/assets/fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/assets/fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{--xb-h:76px;--xb-gut:clamp(16px,4vw,40px);--xb-mist:#E3E8E5;--xb-quick:#B8C1BF;--xb-ease:cubic-bezier(.2,.7,.1,1)}
/* a tap on a phone draws no grey-blue box over what was tapped, as on the home page */
html{-webkit-tap-highlight-color:transparent}
@media (max-width:760px){:root{--xb-h:64px}}

/* ── the bar ── */
#topbar,#topbar.scrolled{position:fixed;top:0;left:0;right:0;z-index:1500;height:var(--xb-h);padding:0 var(--xb-gut);margin:0;display:flex;align-items:center;justify-content:flex-start;gap:24px;
  background:rgba(6,12,9,.66);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  border:0;box-shadow:0 1px 0 rgba(227,232,229,.08);font-family:'Archivo',system-ui,sans-serif;color:var(--xb-mist);cursor:auto}
#topbar a,#topbar button{cursor:pointer}
/* above the experiments' own entry screens too (the camera gates), so the way out is always there */
/* the brand where the old "Portfolio" pill was */
#topbar .topbar-back{display:flex;align-items:center;gap:12px;flex:none;min-height:0;margin:0;padding:6px 0;border:0;border-radius:0;background:none;box-shadow:none;
  color:var(--xb-mist);font:inherit;letter-spacing:0;text-transform:none;text-decoration:none}
#topbar .topbar-back:hover{background:none;color:var(--xb-mist);box-shadow:none}
#topbar .topbar-back .mark{--mark-eye:#0B1712;height:30px;width:auto;max-width:58px;flex:none;color:#D9DEDC;margin-top:-4px;transition:opacity .35s var(--xb-ease)}
#topbar .wordmark{font-weight:430;font-stretch:125%;font-size:14px;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap}
#topbar .wordmark i{font-style:normal;color:var(--xb-quick)}
/* the experiment: its name, its state and its own buttons, after a hairline */
#topbar .topbar-meta{display:flex;align-items:center;gap:16px;min-width:0;margin:0;padding:0 0 0 22px;border-left:1px solid rgba(227,232,229,.2);
  font:500 13px/1.2 'Archivo',system-ui,sans-serif;font-stretch:104%;letter-spacing:.02em;text-transform:none;color:rgba(227,232,229,.62)}
#topbar .tb-wordmark{white-space:nowrap;font:inherit;letter-spacing:inherit;text-transform:none;color:inherit}
#topbar .tb-wordmark b{font-family:'Archivo',system-ui,sans-serif;font-weight:620;font-stretch:112%;font-size:15px;letter-spacing:-.005em;color:var(--xb-mist)}
#topbar .tb-state,#topbar .tb-priv,#topbar span.topbar-now{font:inherit;letter-spacing:inherit;text-transform:none;color:inherit;white-space:nowrap}
#topbar .topbar-top,#topbar button.topbar-now,#topbar .topbar-motion{min-height:32px;margin:0;padding:6px 11px;border:1px solid rgba(227,232,229,.24);border-radius:3px;background:none;
  color:var(--xb-mist);font:500 13px/1 'Archivo',system-ui,sans-serif;font-stretch:104%;letter-spacing:.02em;text-transform:none;box-shadow:none}
#topbar .topbar-top:hover,#topbar button.topbar-now:hover,#topbar .topbar-motion:hover{background:var(--xb-mist);border-color:var(--xb-mist);color:#0E2A1F}
/* the site's links, as on the home page */
#topbar .xb-nav{margin-left:auto;display:flex;align-items:center;gap:30px;font-size:15px;font-weight:500;font-stretch:104%;white-space:nowrap}
#topbar .xb-nav a{position:relative;padding:6px 0;color:inherit;text-decoration:none}
#topbar .xb-nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--xb-ease)}
#topbar .xb-nav a:hover::after{transform:scaleX(1)}
#topbar .xb-nav .xb-contact{padding:9px 16px;border:1px solid currentColor;border-radius:3px;transition:background .2s,color .2s}
#topbar .xb-nav .xb-contact::after{display:none}
#topbar .xb-nav .xb-contact:hover{background:var(--xb-mist);border-color:var(--xb-mist);color:#0E2A1F}
#topbar .xb-menu{display:none;margin-left:auto;align-items:center;gap:12px;height:44px;padding:0 0 0 12px;border:0;background:none;color:inherit;
  font:500 13px/1 'Archivo',system-ui,sans-serif;font-stretch:125%;letter-spacing:.2em;text-transform:uppercase}
#topbar .xb-menu .bars{position:relative;width:22px;height:10px}
#topbar .xb-menu .bars i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .45s var(--xb-ease),top .45s var(--xb-ease)}
#topbar .xb-menu .bars i:first-child{top:0}
#topbar .xb-menu .bars i:last-child{top:8.5px}
.xb-open #topbar .xb-menu .bars i{top:4.25px}
/* open, only the cross shows; the word stays for screen readers */
.xb-open #topbar .xb-menu{min-width:44px;justify-content:flex-end}
.xb-open #topbar .xb-menu .xb-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.xb-open #topbar .xb-menu .bars i:first-child{transform:rotate(45deg)}
.xb-open #topbar .xb-menu .bars i:last-child{transform:rotate(-45deg)}
/* narrower: the links move into the menu */
@media (max-width:1180px){
  #topbar .xb-nav{display:none}
  #topbar .xb-menu{display:inline-flex}
}
/* phones: like the home page, the mark, the wordmark and the menu; of the experiment only its buttons
   stay (its name and state step aside), and where it has several, the wordmark makes room */
@media (max-width:640px){
  #topbar,#topbar.scrolled{gap:12px}
  #topbar .topbar-back{gap:9px}
  #topbar .topbar-back .mark{height:24px;max-width:36px}
  #topbar .wordmark{font-size:11px;letter-spacing:.06em}
  #topbar .topbar-meta{gap:8px;padding-left:0;border-left:0;font-size:12px}
  #topbar .tb-wordmark,#topbar .tb-state,#topbar .tb-priv,#topbar span.topbar-now{display:none}
  #topbar .topbar-top,#topbar button.topbar-now,#topbar .topbar-motion{padding:6px 9px;font-size:12px}
  #topbar:has(.topbar-motion) .wordmark{display:none}
  #topbar .xb-menu{padding-left:8px}
}
@media (max-width:400px){#topbar .xb-menu .xb-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

/* the menu: the site's links large over the experiment, in the dark of the lab */
.xb-sheet{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;padding:calc(var(--xb-h) + 3vh) var(--xb-gut) calc(26px + env(safe-area-inset-bottom));
  background:rgba(6,10,8,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:var(--xb-mist);font-family:'Archivo',system-ui,sans-serif;cursor:auto;
  opacity:0;visibility:hidden;transition:opacity .35s var(--xb-ease),visibility 0s linear .35s}
.xb-sheet.is-open{opacity:1;visibility:visible;transition:opacity .35s var(--xb-ease)}
.xb-open #topbar{z-index:2001}
.xb-sheet nav{display:grid;gap:8px;margin:auto 0}
.xb-sheet nav a{justify-self:start;font-size:clamp(30px,8vw,56px);font-weight:640;letter-spacing:-.02em;line-height:1.2;color:var(--xb-mist);text-decoration:none;cursor:pointer;
  font-stretch:72%;opacity:0;transform:translateY(16px);transition:font-stretch .9s var(--xb-ease),opacity .5s var(--xb-ease),transform .7s var(--xb-ease)}
.xb-sheet.is-open nav a{font-stretch:118%;opacity:1;transform:none}
.xb-sheet.is-open nav a:nth-child(2){transition-delay:.05s}
.xb-sheet.is-open nav a:nth-child(3){transition-delay:.1s}
.xb-sheet.is-open nav a:nth-child(4){transition-delay:.15s}
.xb-sheet.is-open nav a:nth-child(5){transition-delay:.2s}
.xb-sheet .xb-foot{display:grid;gap:6px;padding-top:22px;border-top:1px solid rgba(227,232,229,.16);font-size:16px}
.xb-sheet .xb-foot a{color:var(--xb-mist);cursor:pointer}

/* a light experiment (seasons) keeps the bar in the page's own mist, with forest ink, as the home
   page's header is over the mist */
#topbar.xb-light,#topbar.xb-light.scrolled{background:rgba(227,232,229,.74);box-shadow:0 1px 0 rgba(15,26,22,.08);color:#0E2A1F}
#topbar.xb-light .topbar-back,#topbar.xb-light .topbar-back:hover{color:#0E2A1F}
#topbar.xb-light .topbar-back .mark{--mark-eye:#E3E8E5;color:#0E2A1F}
#topbar.xb-light .wordmark i{color:#6B726E}
#topbar.xb-light .topbar-meta{border-left-color:rgba(15,26,22,.18);color:rgba(15,26,22,.62)}
#topbar.xb-light .tb-wordmark b{color:#0F1A16}
#topbar.xb-light .topbar-top,#topbar.xb-light button.topbar-now,#topbar.xb-light .topbar-motion{border-color:rgba(15,26,22,.3);color:#0E2A1F}
#topbar.xb-light .topbar-top:hover,#topbar.xb-light button.topbar-now:hover,#topbar.xb-light .topbar-motion:hover,
#topbar.xb-light .xb-nav .xb-contact:hover{background:#0E2A1F;border-color:#0E2A1F;color:#E3E8E5}

/* ── the entrance: the eagle on the mist, then the mist lifts ── */
.xp-intro{position:fixed;inset:0;z-index:9990;background:var(--xb-mist);pointer-events:auto;
  /* if the script never runs, the mist still clears */
  animation:xi-safety 0s linear 4.5s forwards}
.xp-intro.is-out{opacity:0;transition:opacity .55s var(--xb-ease);pointer-events:none}
.xp-intro .xi-eagle{position:absolute;transform-origin:0 0;will-change:transform}
.xp-intro .xi-eagle svg{display:block;width:100%;height:100%;overflow:visible}
.xp-intro .xi-word{position:absolute;left:0;right:0;bottom:12vh;text-align:center;font:430 13px/1 'Archivo',system-ui,sans-serif;font-stretch:125%;letter-spacing:.24em;
  text-transform:uppercase;color:#4F5A55;opacity:0;transition:opacity .5s var(--xb-ease)}
.xp-intro .xi-word.is-on{opacity:1}
.xp-entering #topbar .topbar-back .mark{opacity:0}
@keyframes xi-safety{to{opacity:0;visibility:hidden;pointer-events:none}}
@media (prefers-reduced-motion:reduce){.xp-intro{display:none}}