/* ============ TRANSITION TO 2016 ============
   Splash screen shown before the archived copy of the site. It is not decoration
   for its own sake: the 2016 bundle weighs 3.3 MB and takes noticeable time to
   load, so something has to fill that time anyway; let it be the years counting back.

   It lives in separate files and hooks into index.html with a few lines: the
   page itself is an artifact downloaded from the web archive, and any edits to
   it should be visible at first glance.

   The scene is built as a "flight": clouds come head-on, speed lines sweep
   across the screen, the duck trembles slightly and pulls a trail behind it. */

/* ---------- return band ----------
   The same ribbon as above the header of the current site, except it leads
   back to today instead of to the calculator: someone who follows a link here
   from 2026 should see the way out, not hunt for the browser's "back" button.

   Values are written as plain numbers, not our tokens: styles.css is not
   loaded on this page. Classes carry the tw prefix: the old site has its own
   markup, and a shared name like .promo would collide there. */
.twband,.twband *{box-sizing:border-box}
.twband{margin:0;padding:0 24px;background:#0E0E11;
  font-family:'Outfit',system-ui,-apple-system,sans-serif;
  border-bottom:1px solid rgba(242,242,244,.08)}
.twband__inner{display:flex;align-items:center;justify-content:center;
  gap:24px;height:64px;max-width:1440px;margin-inline:auto}
.twband__text{display:flex;align-items:center;gap:12px;min-width:0}
.twband__hook{font-size:15px;font-weight:500;line-height:1.5;color:#F2F2F4}
.twband__dot{width:4px;height:4px;flex:none;border-radius:50%;background:#9E9EA8}
.twband__cta{font-size:15px;line-height:1.5;color:#9E9EA8}
.twband__btn{display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:36px;flex:none;border-radius:999px;
  background:#FFFFFF;color:#0E0E11;text-decoration:none;
  transition:background-color .2s ease, transform .2s ease}
.twband__btn:hover{background:#F2F2F4;transform:translateX(2px)}
.twband__btn svg{display:block;width:18px;height:18px}
@media (max-width:640px){
  .twband{padding:0 16px}
  .twband__inner{gap:12px;height:auto;padding:12px 0}
  .twband__hook,.twband__cta{font-size:13px}
  /* On a narrow screen we drop "You are in 2016": the page itself already shows
     where the visitor is. The second phrase carries the meaning, so it stays. */
  .twband__dot,.twband__hook{display:none}
}

.tw{position:fixed;inset:0;z-index:99999;overflow:hidden;
  display:grid;place-items:center;
  background:#0E0E11;color:#F2F2F4;
  /* Not Roboto Condensed from the old page: the splash screen is still "today";
     you only arrive in 2016 after it. */
  font-family:'Outfit',system-ui,-apple-system,sans-serif;
  transition:opacity .42s ease .2s, visibility 0s linear .62s}
html.tw-lock,html.tw-lock body{overflow:hidden}

/* ---------- clouds ---------- */
/* Blurred blobs, not images: on a black background a cloud only needs a hint
   of volume, and any file here is an extra request before the bundle loads. */
.tw__sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tw__cloud{position:absolute;display:block;border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(156,124,244,.26), rgba(156,124,244,.06) 62%, rgba(156,124,244,0) 100%);
  filter:blur(8px);
  animation:tw-cloud linear infinite}
.tw__cloud:nth-child(1){top:12%;width:340px;height:150px;animation-duration:15s}
.tw__cloud:nth-child(2){top:64%;width:260px;height:110px;animation-duration:11s;animation-delay:-4s}
.tw__cloud:nth-child(3){top:32%;width:180px;height: 80px;animation-duration:8.5s;animation-delay:-2s}
.tw__cloud:nth-child(4){top:82%;width:420px;height:170px;animation-duration:19s;animation-delay:-9s}
.tw__cloud:nth-child(5){top:4%; width:200px;height: 90px;animation-duration:9.5s;animation-delay:-6s}

/* ---------- speed lines ---------- */
/* Duration goes through a variable: on the fly-out it is enough to shrink it,
   and the lines speed up together with the duck without a second set of rules. */
.tw__lines{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tw__lines span{position:absolute;left:0;height:1px;border-radius:1px;
  background:linear-gradient(90deg, rgba(242,242,244,0), rgba(242,242,244,.6));
  animation:tw-fazer var(--dur) linear infinite}
.tw__lines span:nth-child(1){top:22%;width:180px;--dur:1.4s}
.tw__lines span:nth-child(2){top:46%;width:120px;--dur:1.05s;animation-delay:-.4s}
.tw__lines span:nth-child(3){top:70%;width:230px;--dur:1.75s;animation-delay:-.8s}
.tw__lines span:nth-child(4){top:88%;width: 90px;--dur:.85s; animation-delay:-.2s}

/* ---------- duck in flight ---------- */
.tw__stage{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:22px;
  transition:transform .55s cubic-bezier(.6,0,.2,1), opacity .4s ease .1s,
             filter .55s cubic-bezier(.6,0,.2,1)}

/* Bobbing and shaking are split across two elements: both go through transform,
   and on a single element the second animation would wipe out the first. */
.tw__flyer{position:relative;display:flex;align-items:center;justify-content:center;
  animation:tw-bob 2.6s ease-in-out infinite;
  transition:transform .5s cubic-bezier(.55,0,.15,1), filter .5s ease, opacity .3s ease}

/* The duck is the one the site's preloader drew (removed 2026-10-24). It is drawn as an
   outline: the fill itself is the line, so we keep the stroke thin, otherwise
   at this size the lines run together. */
.tw__duck{position:relative;z-index:1;display:block;width:104px;height:auto;
  color:#F2F2F4;
  animation:tw-shake 1.1s linear infinite}
.tw__duck path{fill:currentColor;stroke:currentColor;stroke-width:.5}

/* The trail stretches back from under the duck: it flies right, so the tail goes off to the left */
.tw__trail{position:absolute;right:58%;height:2px;border-radius:2px;
  background:linear-gradient(90deg, rgba(156,124,244,0), #9C7CF4);
  animation:tw-trail linear infinite}
.tw__trail:nth-of-type(1){top:38%;width:52px;animation-duration:.55s}
.tw__trail:nth-of-type(2){top:52%;width:74px;animation-duration:.75s;animation-delay:-.2s}
.tw__trail:nth-of-type(3){top:62%;width:40px;animation-duration:.45s;animation-delay:-.1s}
.tw__trail:nth-of-type(4){top:46%;width:96px;animation-duration:.95s;animation-delay:-.35s}

/* ---------- digits ---------- */
/* Tabular digits: during the count, proportional ones would jump in width.
   Outfit has a real 300 weight, so here it is now genuine, not substituted
   with the 400 weight as it was with Instrument Sans. */
.tw__year{font-size:clamp(34px,4.6vw,56px);font-weight:300;line-height:1;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1}

.tw__track{width:min(260px,54vw);height:2px;border-radius:2px;
  background:rgba(242,242,244,.16);overflow:hidden}
.tw__bar{width:0;height:100%;background:#9C7CF4;
  transition:width .25s linear}

.tw__note{margin:0;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,242,244,.5)}

/* ---------- flight direction ----------
   Going back to 2016: the duck is flipped and heads left, the world flows toward
   it to the right. Returning to 2026: everything is reversed, the duck flies as drawn.

   The flip is moved to a separate element: bobbing and shaking already occupy
   transform on the wrapper and on the duck itself, and a static scaleX would not
   hold there, since the animation rewrites the whole property. */
.tw__mirror{display:block}
.tw.is-back .tw__mirror{transform:scaleX(-1)}
.tw.is-back .tw__cloud{animation-name:tw-cloud-back}
.tw.is-back .tw__lines span{animation-name:tw-fazer-back;
  background:linear-gradient(90deg, rgba(242,242,244,.6), rgba(242,242,244,0))}
.tw.is-back .tw__trail{right:auto;left:58%;
  background:linear-gradient(90deg, #9C7CF4, rgba(156,124,244,0));
  animation-name:tw-trail-back}

/* ---------- whoosh ---------- */
/* The splash screen is not removed from the DOM: it is needed again, for the way
   back to 2026. So we switch it off completely, clicks included: otherwise a
   transparent overlay on top of the page would intercept clicks. */
.tw.is-out{opacity:0;visibility:hidden;pointer-events:none}
.tw.is-out .tw__stage{transform:scale(1.35);opacity:0;filter:blur(6px)}
/* The duck leaves first, stretched in the direction of motion: that is what reads
   as "whoosh". Bobbing and shaking must be removed here: an animation overrides a
   transition, and with them the duck would stay shaking in place instead of flying. */
.tw.is-out .tw__flyer{animation:none;
  transform:translateX(125vw) scaleX(2.2) scaleY(.72);
  filter:blur(3px);opacity:0}
.tw.is-back.is-out .tw__flyer{transform:translateX(-125vw) scaleX(2.2) scaleY(.72)}
.tw.is-out .tw__duck{animation:none}
.tw.is-out .tw__lines span{--dur:.28s}
.tw.is-out .tw__cloud{animation-duration:1.6s}

@keyframes tw-cloud{
  from{transform:translateX(115vw)}
  to{transform:translateX(-60vw)}
}
@keyframes tw-fazer{
  from{transform:translateX(105vw);opacity:1}
  to{transform:translateX(-120vw);opacity:0}
}
@keyframes tw-trail{
  from{transform:translateX(0);opacity:.85}
  to{transform:translateX(-130px);opacity:0}
}
/* The same three, mirrored: the flight back in time goes the other way */
@keyframes tw-cloud-back{
  from{transform:translateX(-60vw)}
  to{transform:translateX(115vw)}
}
@keyframes tw-fazer-back{
  from{transform:translateX(-120vw);opacity:1}
  to{transform:translateX(105vw);opacity:0}
}
@keyframes tw-trail-back{
  from{transform:translateX(0);opacity:.85}
  to{transform:translateX(130px);opacity:0}
}
@keyframes tw-bob{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-12px) rotate(2deg)}
}
/* Slight shake: without it the duck just hangs there; with it, the speed comes across */
@keyframes tw-shake{
  0%  {transform:translate(2px,1px)  rotate(0deg)}
  20% {transform:translate(-2px,0)   rotate(1deg)}
  40% {transform:translate(1px,-1px) rotate(1deg)}
  60% {transform:translate(-1px,1px) rotate(0deg)}
  80% {transform:translate(-2px,-1px)rotate(1deg)}
  100%{transform:translate(1px,-2px) rotate(-1deg)}
}

/* The splash screen is not switched off entirely: it covers the bundle load. But
   everything that twitches is switched off: what remains is the changing digits
   and an instant disappearance. */
@media (prefers-reduced-motion:reduce){
  .tw,.tw__stage,.tw__flyer,.tw__duck,.tw__bar{transition:none;animation:none}
  .tw.is-out .tw__stage,.tw.is-out .tw__flyer{transform:none;filter:none}
  .tw__sky,.tw__lines,.tw__trail{display:none}
}