/* Animations. Everything sits behind .motion, which iris.js sets only when motion is welcome.
   .ready means motion.js ran, so nothing is ever hidden unless a script will bring it back. */
/* The living full stop, and the letters it lands on. See alive.js. */
.alive{position:fixed;left:0;top:0;z-index:30;border-radius:50%;background:var(--orange);pointer-events:none;transform-origin:50% 50%}
.alive.on-orange{background:var(--ink)}
.alive.held{box-shadow:0 0 0 6px rgba(217,83,30,.22)}
.alive.asleep{animation:nap 3.6s ease-in-out infinite}
@keyframes nap{0%,100%{opacity:1}50%{opacity:.72}}
.away .hero .dot{visibility:hidden}
.w,.verb{white-space:nowrap}
.c{display:inline-block}
.said{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.veil{position:fixed;inset:0;z-index:40;background:var(--orange);pointer-events:none}
.arrive::before{content:'';position:fixed;inset:0;z-index:40;background:var(--orange);animation:lift 0s 1.2s forwards}
@keyframes lift{to{visibility:hidden}}
@media print{.alive,.veil{display:none}}

/* Home: the full stop is dropped in, and lands with weight. */
.motion .hero .dot{display:inline-block;transform-origin:50% 88%;animation:bounce 1.25s .25s both}
@keyframes bounce{
  0%{transform:translateY(-110vh) scale(.82,1.22);animation-timing-function:cubic-bezier(.5,0,1,.6)}
  40%{transform:translateY(0) scale(1.34,.62);animation-timing-function:cubic-bezier(0,.5,.4,1)}
  58%{transform:translateY(-.34em) scale(.94,1.08);animation-timing-function:cubic-bezier(.6,0,1,.6)}
  74%{transform:translateY(0) scale(1.18,.8);animation-timing-function:cubic-bezier(0,.5,.4,1)}
  85%{transform:translateY(-.08em) scale(.98,1.03);animation-timing-function:cubic-bezier(.6,0,1,.6)}
  94%{transform:translateY(0) scale(1.06,.94)}
  100%{transform:none}
}

/* Home: figures are redacted one by one, in reading order. */
.ready .win:not(.in) .mask{transform:scaleX(0)}
.motion .win .mask{transform-origin:0 50%}
.ready .win.in .mask{animation:redact .3s calc(.2s + var(--i,0) * 90ms) cubic-bezier(.5,0,.3,1) both}
@keyframes redact{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Time: each bar takes as long as its share of a life, so the years really do speed up. */
.motion .share i{transform-origin:0 50%}
.ready .share:not(.in) i{transform:scaleX(0)}
.ready .share.in i{animation:grow linear both}
.ready .share.in li:nth-child(1) i{animation-duration:2.4s}
.ready .share.in li:nth-child(2) i{animation-duration:1.2s;animation-delay:2.4s}
.ready .share.in li:nth-child(3) i{animation-duration:.6s;animation-delay:3.6s}
.ready .share.in li:nth-child(4) i{animation-duration:.3s;animation-delay:4.2s}
.ready .share.in li:nth-child(5) i{animation-duration:.15s;animation-delay:4.5s}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* The phrase: in for four, out for six. */
.a-quote.live .a-quote-in .s,.phrase.live{animation:breathe 10s ease-in-out infinite}
.a-quote.live .a-photo2{animation:chest 10s ease-in-out infinite}
.motion .a-quote-in .s,.motion .phrase{transform-origin:0 50%}
@keyframes breathe{0%,100%{transform:scale(1)}40%{transform:scale(1.035)}}
@keyframes chest{0%,100%{translate:0 0}40%{translate:0 -5px}}
.verb{transition:color .8s}
.a-quote.live .verb{animation:verb-paper 10s calc(var(--n) * 1.1s) infinite}
.phrase.live .verb{animation:verb-orange 10s calc(var(--n) * 1.1s) infinite}
@keyframes verb-paper{0%,18%,100%{color:inherit}4%,12%{color:#F7F6F2}}
@keyframes verb-orange{0%,18%,100%{color:inherit}4%,12%{color:#BF4319}}

/* Explore: construction lines, an outline, then ink. */
.motion .x-head h1{position:relative}
.motion .x-head h1:not(.inked){color:transparent;-webkit-text-stroke:1px var(--orange);animation:settle 0s 2.5s forwards}
@keyframes settle{to{color:var(--ink);-webkit-text-stroke:0 transparent}}
.motion .x-head h1::before,.motion .x-head h1::after{content:'';position:absolute;left:0;right:0;height:1px;background:var(--orange);animation:rule 1.5s .1s cubic-bezier(.6,0,.2,1) both;pointer-events:none}
.motion .x-head h1::before{top:26%}
.motion .x-head h1::after{top:72%;animation-delay:.28s}
@keyframes rule{0%{clip-path:inset(0 100% 0 0)}45%,60%{clip-path:inset(0)}100%{clip-path:inset(0 0 0 100%)}}
.x-head .l{animation:ink .42s calc(.45s + var(--i) * 24ms) both}
@keyframes ink{
  0%{color:transparent;-webkit-text-stroke:1px var(--orange)}
  100%{color:var(--ink);-webkit-text-stroke:0 var(--orange)}
}

/* Prints lean towards the mouse. */
.motion .tilt{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(var(--r,0deg));transition:transform .18s ease-out}
@media (min-width:900px){.x-rh-img2.tilt{--r:1.4deg}}
.a-photo2.tilt{--r:-2deg}

/* RabbitHole: cut paper, animated on twos, the way it would be under a rostrum camera. */
.motion .drop{animation:paste .56s var(--d) steps(1,end) both,boil .66s calc(var(--d) + .7s) steps(1,end) infinite}
.ready .rl-hero:not(.live) .drop{animation-play-state:running,paused}
.motion .rl-collage .cut{transform:rotate(calc(var(--r,0deg) + var(--fall,0) * var(--spin,14deg))) translateY(calc(var(--fall,0) * var(--sink,90px)))}
.motion .rl-collage .cut:hover,.motion .rl-collage .cut:focus-visible{transform:rotate(0deg) translateY(-4px)}
.c-rocket{--spin:-9deg;--sink:150px}
.c-phone{--spin:24deg;--sink:70px}
.c-card{--spin:-16deg;--sink:110px}
@keyframes paste{
  0%{opacity:0}
  1%{opacity:1;scale:1.42;rotate:-9deg}
  18%{scale:1.2;rotate:6deg}
  36%{scale:1.1;rotate:-4deg}
  54%{scale:.97;rotate:2deg}
  72%{scale:1.02;rotate:-1deg}
  100%{opacity:1;scale:1;rotate:0deg}
}
@keyframes boil{0%{rotate:.4deg}33%{rotate:-.35deg;translate:1px 0}66%{rotate:.15deg;translate:-1px 1px}}

/* RabbitHole: the thread. */
.rl-world{position:relative}
.rl-world>article,.rl-world>.w-ideas{position:relative;z-index:1}
.thread{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}
.thread path{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linecap:round}

/* Questions that hang. */
.lastw{white-space:nowrap}
.hang{display:inline-block;transform-origin:50% 10%}

/* RabbitHole: the clock that gets faster. */
.ready .w-ideas.in article:nth-child(2) svg path[stroke]{transform-box:view-box;transform-origin:60px 80px;animation:hands 5s .4s cubic-bezier(.85,0,1,.75) both}
.ready .w-ideas.in article:nth-child(2) svg path[stroke="#1B1716"]{animation-name:hands-slow}
@keyframes hands{to{transform:rotate(2160deg)}}
@keyframes hands-slow{to{transform:rotate(360deg)}}

.motion #scene-frame{position:relative}
.motion #scene-img{position:relative;z-index:1}
.was{position:absolute;left:6px;top:6px;width:calc(100% - 12px)}
/* Episode: rings spread from the tap, like a card reaching a terminal. */
.print-rings{position:absolute;inset:6px;z-index:2;overflow:hidden;pointer-events:none}
.print-rings i{position:absolute;width:40px;height:40px;margin:-20px;border:3px solid var(--orange);border-radius:50%;animation:ring .8s cubic-bezier(.1,.6,.3,1) both}
.print-rings i:nth-child(2){animation-delay:.11s}
.print-rings i:nth-child(3){animation-delay:.22s}
@keyframes ring{from{transform:scale(.2);opacity:1}to{transform:scale(13);opacity:0}}

/* Episode: approved, like a stamp. */
.ready .ep-promise:not(.in) .s{visibility:hidden}
.ready .ep-promise.in .s{animation:slam .36s cubic-bezier(.5,0,.9,.5) both}
.ready .ep-promise.in{animation:thud .3s .34s steps(5,end)}
.ready .ep-promise.in .print{animation:knock .5s .34s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes slam{from{transform:scale(2.3) rotate(-5deg);visibility:visible}to{transform:none;visibility:visible}}
@keyframes thud{0%{translate:0 0}20%{translate:0 7px}40%{translate:-3px -3px}60%{translate:2px 2px}80%{translate:-1px 0}100%{translate:0 0}}
@keyframes knock{from{rotate:-3deg;translate:0 -10px}to{rotate:0deg;translate:0 0}}

/* About: the portrait develops under a safelight. */
.motion .a-photo{position:relative}
.ready .a-photo:not(.in) img{filter:brightness(2.5) contrast(.28) sepia(1)}
.ready .a-photo.in img{animation:develop 3.4s cubic-bezier(.3,0,.3,1) both}
.ready .a-photo:not(.in)::after,.ready .a-photo.in::after{content:'';position:absolute;inset:0;background:#B3200A;mix-blend-mode:multiply;pointer-events:none}
.ready .a-photo.in::after{animation:safelight 3.4s ease-in both}
@keyframes develop{
  0%{filter:brightness(2.5) contrast(.28) sepia(1) blur(3px)}
  45%{filter:brightness(1.5) contrast(.7) sepia(.8) blur(1px)}
  100%{filter:none}
}
@keyframes safelight{0%,40%{opacity:.8}100%{opacity:0}}

/* Notebook: a pencil, and a pen waiting. */
.n-head h1{position:relative;width:fit-content}
.scribble{position:absolute;left:0;bottom:-.1em;width:100%;height:.22em;overflow:visible;pointer-events:none}
.scribble path{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;animation:scribble 1.1s .3s cubic-bezier(.6,0,.3,1) both}
@keyframes scribble{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.motion .n-empty::after{content:'';display:inline-block;width:2px;height:1.1em;margin-left:5px;vertical-align:-.2em;background:var(--orange);animation:caret 1.1s steps(1,end) infinite}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* 404: the word gives way. */
.fell{white-space:nowrap;margin-right:.07em}
.fall{display:inline-block;transform-origin:50% 100%;animation:fall .9s calc(.6s + var(--i) * 130ms) cubic-bezier(.55,0,.85,.4) both}
.fall:nth-child(1){--end:.02em;--tip:-3deg}
.fall:nth-child(2){--end:.05em;--tip:4deg}
.fall:nth-child(3){--end:.09em;--tip:-6deg}
.fall:nth-child(4){--end:.15em;--tip:11deg}
@keyframes fall{
  0%{transform:none}
  12%{transform:translateY(-.06em) rotate(calc(var(--tip) * -.2))}
  72%{transform:translateY(var(--end)) rotate(var(--tip))}
  84%{transform:translateY(calc(var(--end) - .09em)) rotate(calc(var(--tip) * 1.1))}
  100%{transform:translateY(var(--end)) rotate(var(--tip))}
}

/* Lenis. Its own stylesheet also stops iframes taking the pointer, which would break the video players, so only the useful parts are here. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}

/* Experiment diagrams: arrows draw themselves when you reach them. */
.ready .e-fig:not(.in) .draw{stroke-dashoffset:1}
.ready .e-fig.in .draw{animation:draw .8s calc(.2s + var(--i,0) * .12s) cubic-bezier(.5,0,.2,1) both}
.ready .e-fig:not(.in) .head{opacity:0}
.ready .e-fig.in .head{animation:appear .2s calc(.75s + var(--i,0) * .12s) both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes appear{from{opacity:0}to{opacity:1}}