:root {
  --boot: 5.7s;
  --red: #ff2d2b;
  --red-dim: #b3403e;
  --ice: #fff;
  --hope-bg: #111;
}

body { grid-template-columns: minmax(0, 1fr); }

.act-one,
main.chaos,
.site-footer {
  justify-self: stretch;
}

.act-one {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow-x: clip;
}
.act-one > .stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  margin: auto 0;
  padding: .05px;
}

.act-one > .stage > .scene {
  margin-inline: calc((100% - 600px) / 2);
}

main.chaos {
  display: block;
  width: 100%;
  overflow-x: clip;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: max(1.6rem, env(safe-area-inset-bottom, 0px));
  translate: -50% 0;
  width: 220px;
  height: 92px;
  z-index: 1001;
  pointer-events: none;
  text-align: center;
}


.cue-loading {
  position: absolute;
  left: 0; right: 0; bottom: 26px;
  color: #bdbdbd;
  font-size: .78rem;
  letter-spacing: .5em;
  animation: cue-out .45s ease var(--boot) forwards;
}
.cue-loading .dot { opacity: 0; }
.cue-loading .d1 { opacity: 1; }
.cue-loading .d2 { animation: dot-33 1.5s linear infinite; }
.cue-loading .d3 { animation: dot-66 1.5s linear infinite; }
@keyframes dot-33 { 0%, 33.3% { opacity: 0 } 33.6%, 100% { opacity: 1 } }
@keyframes dot-66 { 0%, 66.6% { opacity: 0 } 66.9%, 100% { opacity: 1 } }
@keyframes cue-out { to { opacity: 0; visibility: hidden; } }


.cue-arrow {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  opacity: 0;
  visibility: hidden;
  animation: cue-in .6s ease calc(var(--boot) + .35s) forwards;
}
@keyframes cue-in {
  from { opacity: 0; visibility: visible; }
  to   { opacity: 1; visibility: visible; }
}

.cue-label {
  display: block;
  font-size: .62rem;
  letter-spacing: .55em;
  text-indent: .55em;
  color: #8a8a8a;
  margin-bottom: .5rem;
  text-transform: uppercase;
}
.cue-bob {
  display: inline-block;
  animation: cue-bob 1.8s ease-in-out infinite;
}

.cue-v {
  display: block;
  width: 100px;
  height: 32px;
  margin: 0 auto;
  background: #ededed;
  clip-path: polygon(0 0, 50% 60%, 100% 0, 100% 32%, 50% 96%, 0 32%);
}
@keyframes cue-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 7px; }
}

.act {
  position: relative;
  view-timeline-name: --act;
  overflow: clip;
  min-height: 60vh;
  padding: 16vh 6vw;
  color: var(--text-color, #ededed);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.8;
}

@keyframes rv-fade   { from { opacity: 0 } to { opacity: 1 } }
@keyframes rv-rise   { from { opacity: 0; translate: 0 2.4rem } to { opacity: 1; translate: 0 0 } }
@keyframes rv-pop    { from { opacity: 0 } to { opacity: 1 } }
@keyframes draw-line { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes blink     { 0%, 49.9% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes float-idle { 0%, 100% { translate: 0 0 } 50% { translate: 0 -7px } }

.u {
  position: relative;
  white-space: nowrap;
}
.u::after {
  content: "";
  position: absolute;
  left: -.04em; right: -.04em;
  bottom: -.14em;
  height: max(2px, .07em);
  background: currentColor;
  transform-origin: 0 50%;
  transform: scaleX(1);
  animation: draw-line linear both;
  animation-timeline: --act;
  animation-range: entry 52% entry 68%;
}
.u-red { color: var(--red); }

.act-whoami { min-height: 62vh; padding-left: 10vw; }

.term-block { margin-top: 4vh; }

.term-line {
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  font-weight: 400;
  color: #ededed;
}
.term-line .prompt { color: #707070; }

.term-line .cmd {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  width: 6ch;
  animation: type-cmd steps(6, end) both;
  animation-timeline: --act;
  animation-range: entry 40% entry 80%;
}
@keyframes type-cmd { from { width: 0 } to { width: 6ch } }

.term-line .caret {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: .18em;
  background: #ededed;
  vertical-align: -.18em;
  animation: blink 1.1s steps(1) infinite;
}

.term-out {
  margin-top: 1.1rem;
  max-width: 58ch;
  color: #c7c7c7;
  animation: rv-fade linear both;
  animation-timeline: --act;
  animation-range: entry 100% entry 120%;
}
.act-whoami .u-1::after { animation-range: entry 110% entry 120%; }
.act-whoami .u-2::after { animation-range: entry 140% entry 145%; }


.act-why {
  min-height: 66vh;
  text-align: center;
}

.why-line {
  font-family: Impact, Haettenschweiler, 'Arial Narrow', sans-serif;
  font-size: clamp(3.2rem, 12vw, 9rem);
  line-height: .95;
  color: #ededed;
  font-weight: 400;
  letter-spacing: .01em;
}

.why-float {
  display: inline-block;
  animation: float-idle 5s ease-in-out infinite;
}
.why-word {
  display: inline-block;
  animation: why-drift linear both;
  animation-timeline: --act;
  animation-range: entry 70% entry 90%;
}
@keyframes why-drift {
  from { opacity: 0; translate: -14vw 0; }
  55%  { opacity: .82; }
  to   { opacity: .82; translate: 0 0; }
}

.me-wrap { position: relative; display: inline-block; }
.me-g1, .me-g2 {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.me-g1 {
  color: var(--red);
  translate: 3px 0;
  animation: g1-resolve linear both;
  animation-timeline: --act;
  animation-range: entry 12% entry 82%;
}
.me-g2 {
  color: #fff;
  translate: -3px 0;
  animation: g2-resolve linear both;
  animation-timeline: --act;
  animation-range: entry 18% entry 92%;
}
@keyframes g1-resolve { from { opacity: 1 } to { opacity: 0 } }
@keyframes g2-resolve { from { opacity: .75 } to { opacity: 0 } }
.jit {
  display: inline-block;
  animation: glitch-jit .21s steps(1) infinite;
}
.jit-2 { animation-delay: -.11s; }
@keyframes glitch-jit {
  0%   { translate: 4px -3px;  clip-path: inset(5%  0 55% 0); }
  25%  { translate: -4px 2px;  clip-path: inset(45% 0 28% 0); }
  50%  { translate: 3px 3px;   clip-path: inset(20% 0 50% 0); }
  75%  { translate: -3px -2px; clip-path: inset(60% 0 10% 0); }
  100% { translate: 4px 0;     clip-path: inset(8%  0 68% 0); }
}
.me-clean {
  position: relative;
  animation: rv-fade linear both;
  animation-timeline: --act;
  animation-range: entry 45% entry 86%;
}
.why-q {
  color: #777;
  display: inline-block;
  animation: rv-fade linear both;
  animation-timeline: --act;
  animation-range: entry 70% entry 88%;
}
.why-sub {
  margin-top: 1.6rem;
  color: #707070;
  font-size: clamp(.8rem, 1.1vw, .95rem);
  letter-spacing: .06em;
  animation: rv-fade linear both;
  animation-timeline: --act;
  animation-range: entry 72% entry 94%;
}


.act-desperate { min-height: 78vh; padding-left: 8vw; }


.act-desperate::before {
  content: "";
  position: absolute;
  left: 50%; top: 58%;
  width: 80vmin; height: 80vmin;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255,45,43,.13), rgba(255,45,43,0) 70%);
  opacity: 0;
  pointer-events: none;
  animation: bloom-in linear both;
  animation-timeline: --act;
  animation-range: entry 58% entry 85%;
}
@keyframes bloom-in { to { opacity: 1 } }
.act-desperate > * { position: relative; z-index: 1; }

.d-line1 {
  font-size: clamp(1.9rem, 5.2vw, 4rem);
  line-height: 1.05;
  padding-bottom: 5.5vw;
}
.d-im {
  display: inline-block;
  animation: rv-rise linear both;
  animation-timeline: --act;
  animation-range: entry 4% entry 34%;
}
.d-desperate {
  display: inline-block;
  color: var(--red);
  transform-origin: 50% 0;
  scale: 1 2.35; 
  animation: desperate-stretch linear both;
  animation-timeline: --act;
  animation-range: entry 50% entry 100%;
}
@keyframes desperate-stretch {
  0%  { opacity: 0; scale: 1 1; }
  35% { opacity: 1; }
  100% { opacity: 1; scale: 1 3.17; }
}
.d-line2 {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  color: #bdbdbd;
  margin: 1.2rem 0 0 2vw;
  animation: rv-rise linear both;
  animation-timeline: --act;
  animation-range: entry 36% entry 60%;
}
.d-line3 { margin: 1.6rem 0 .5rem 8vw; }

.soul-pop {
  display: inline-block;
  animation: rv-pop steps(1, start) both;
  animation-timeline: --act;
  animation-range: entry 60% entry 62%;
}
.soul {
  display: inline-block;
  white-space: nowrap;
  font-family: Impact, Haettenschweiler, 'Arial Narrow', sans-serif;
  font-size: clamp(2.7rem, 8.5vw, 6.5rem);
  line-height: 1;
  letter-spacing: .03em;
  color: var(--red);
  text-shadow: 0 0 8px rgba(255,45,43,.55), 0 0 34px rgba(255,45,43,.3);
}
.d-line4 {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  color: #bdbdbd;
  margin: .4rem 0 0 2vw;
  animation: rv-rise linear both;
  animation-timeline: --act;
  animation-range: entry 66% entry 88%;
}
.d-your { color: #fff; font-weight: 700; }


.act-passion { min-height: 72vh; padding-left: 18vw; }

.p-line1 {
  font-size: clamp(1.6rem, 3.6vw, 2.8rem);
  animation: rv-rise linear both;
  animation-timeline: --act;
  animation-range: entry 4% entry 42%;
}
.p-passion {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.55em;
  letter-spacing: .04em;
  color: var(--red);
  text-shadow: 0 0 18px rgba(255,45,43,.22);
  animation: passion-in linear both;
  animation-timeline: --act;
  animation-range: entry 40% entry 70%;
}
@keyframes passion-in {
  from { opacity: 0; filter: blur(8px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; filter: blur(0); }
}
.p-line2 {
  margin-top: 1rem;
  color: #bdbdbd;
  animation: rv-rise linear both;
  animation-timeline: --act;
  animation-range: entry 36% entry 62%;
}

.p-like {
  font-family: Impact, Haettenschweiler, 'Arial Narrow', sans-serif;
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 1;
  margin-top: 4rem;
  color: #ededed;
  font-weight: 400;
}
.p-i {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: i-fall linear both;
  animation-timeline: --act;
  animation-range: entry 80% entry 130%;
}
@keyframes i-fall {
  0% { opacity: 0; translate: 0 -46vh; animation-timing-function: cubic-bezier(.55, 0, .9, .6); }
  4% { opacity: 1; }
  52% { opacity: 1; translate: 0 0; animation-timing-function: ease-out; }
  58% { translate: 0 0; scale: 1.18 .45; color: var(--red); animation-timing-function: ease-in-out; }  /* impact */
  66% { scale: 1 1; color: #fff; }
  70% { translate: 2px 0; }
  74% { translate: -2px 0; }
  78% { translate: 1px 0; }
  82% { translate: -1px 0; }
  86% { translate: 0 0; }
}



.act-years { min-height: 64vh; padding-left: 12vw; }

.y-line {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 2.1;
  max-width: 30ch;
  font-weight: 400;
  animation: rv-rise linear both;
  animation-timeline: --act;
  animation-range: entry 4% entry 38%;
}
.y-num {
  font-family: Impact, Haettenschweiler, 'Arial Narrow', sans-serif;
  color: var(--red);
  font-size: 1.9em;
  line-height: 1;
  white-space: nowrap;
}
.y-plus { font-size: .8em; vertical-align: .12em; }
.y-window {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: -.04em;
}
.y-strip {
  display: block;
  translate: 0 -6em;
  animation: odo-roll linear both;
  animation-timeline: --act;
  animation-range: entry 12% entry 88%;
}
.y-strip span { display: block; height: 1em; line-height: 1; }
@keyframes odo-roll {
  0%   { translate: 0 0; }
  84%  { translate: 0 -6em; }
  92%  { translate: 0 -6.16em; }
  100% { translate: 0 -6em; }
}
.y-aside {
  margin-top: 1.4rem;
  color: #707070;
  font-size: .92rem;
  animation: rv-fade linear both;
  animation-timeline: --act;
  animation-range: entry 55% entry 80%;
}



.act-original { min-height: 72vh; padding-left: 6vw; }

.o-shake {
  display: block;
  animation: jolt linear both;
  animation-timeline: --act;
  animation-range: entry 66% entry 80%;
}
@keyframes jolt {
  0%, 20%   { translate: 0 0; }
  26%       { translate: 6px -4px; }
  40%       { translate: -5px 3px; }
  55%       { translate: 3px -2px; }
  70%       { translate: -2px 1px; }
  85%,100%  { translate: 0 0; }
}

.o-line1 {
  font-size: clamp(1.7rem, 4.2vw, 3.2rem);
  animation: rv-rise linear both;
  animation-timeline: --act;
  animation-range: entry 6% entry 40%;
}
.o-open {
  display: inline-block;
  font-weight: 700;
  color: #fff;
  letter-spacing: .5em;
  animation: open-spread linear both;
  animation-timeline: --act;
  animation-range: entry 14% entry 58%;
}
@keyframes open-spread {
  from { letter-spacing: .02em; }
  to   { letter-spacing: .5em; }
}

.o-line2 {
  margin-top: .6rem;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  color: #c7c7c7;
  animation: rv-rise linear both;
  animation-timeline: --act;
  animation-range: entry 26% entry 50%;
}
.o-original {
  position: relative;
  font-weight: 700;
  color: #fff;
  padding-bottom: .14em;
}
.o-original span { display: inline-block; }
.o-original span:nth-child(1) { rotate: -2deg; }
.o-original span:nth-child(2) { rotate: 3deg;  translate: 1px -2px; }
.o-original span:nth-child(3) { rotate: -1deg; translate: -1px 1px; }
.o-original span:nth-child(4) { rotate: 2deg;  translate: 0 2px; }
.o-original span:nth-child(5) { rotate: -3deg; }
.o-original span:nth-child(6) { rotate: 1deg;  translate: 2px -1px; }
.o-original span:nth-child(7) { rotate: -2deg; translate: -1px 2px; }
.o-original span:nth-child(8) { rotate: 2deg;  translate: 1px -2px; }
.o-original::after {
  content: "";
  position: absolute;
  left: 0; right: .1em;
  bottom: 0;
  height: max(2px, .08em);
  background: var(--red);
  transform-origin: 0 50%;
  transform: scaleX(1);
  animation: draw-line linear both;
  animation-timeline: --act;
  animation-range: entry 44% entry 62%;
}
.o-ideas {
  display: inline-block;
  font-weight: 700;
  color: #fff;
  animation: flicker linear both;
  animation-timeline: --act;
  animation-range: entry 42% entry 58%;
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  8%       { opacity: 0; }
  22%      { opacity: 1; }
  36%      { opacity: 0; }
  55%      { opacity: 1; }
  70%      { opacity: .25; }
  85%      { opacity: 1; }
}

.o-proof {
  margin: 2.4rem 0 .6rem 10vw;
  color: #707070;
  font-size: .95rem;
  animation: rv-fade linear both;
  animation-timeline: --act;
  animation-range: entry 52% entry 68%;
}
.o-website { margin-left: 5vw; }
.web-pop {
  display: inline-block;
  animation: rv-pop steps(1, start) both;
  animation-timeline: --act;
  animation-range: entry 120% entry 125%;
}
.web-buzz {
  display: inline-block;
  white-space: nowrap;
  font-family: Impact, Haettenschweiler, 'Arial Narrow', sans-serif;
  font-size: clamp(2.4rem, 7.5vw, 5.5rem);
  line-height: 1;
  color: var(--red);
  rotate: -2.5deg;
  text-shadow: 0 0 8px rgba(255,45,43,.5), 0 0 28px rgba(255,45,43,.3);
}


.act-poor {
  min-height: 58vh;
  text-align: right;
  padding-right: 14vw;
}
.po-line {
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  animation: rv-rise linear both;
  animation-timeline: --act;
  animation-range: entry 6% entry 46%;
}
.po-low {
  display: inline-block;
  color: var(--red-dim);
  transform-origin: 50% 100%;
  translate: 0 .16em;
  scale: 1 .42;
  animation: low-drop linear both;
  animation-timeline: --act;
  animation-range: entry 38% entry 72%;
}
@keyframes low-drop {
  0%  { opacity: 0; translate: 0 -1.4em; scale: 1 1; }
  35% { opacity: 1; }
  55% { translate: 0 .16em; scale: 1 1; }
  63% { scale: 1 .25; }
  100% { opacity: 1; translate: 0 .16em; scale: 1 .42; }
}


.act-trust { min-height: 62vh; padding-left: 16vw; }

.t-line1 {
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  animation: rv-rise linear both;
  animation-timeline: --act;
  animation-range: entry 4% entry 38%;
}
.act-trust .u::after { animation-range: entry 24% entry 42%; }

.t-line2 {
  margin-top: .9rem;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 400;
  animation: rv-rise linear both;
  animation-timeline: --act;
  animation-range: entry 34% entry 62%;
}
.t-trust {
  position: relative;
  display: inline-block;
  padding: .08em .42em;
  font-weight: 800;
  letter-spacing: .14em;
  color: #fff;
}

.t-trust::after {
  content: "";
  position: absolute;
  inset: -.14em -.3em;
  pointer-events: none;
  background:
    linear-gradient(var(--red), var(--red)) left top,
    linear-gradient(var(--red), var(--red)) right top,
    linear-gradient(var(--red), var(--red)) right bottom,
    linear-gradient(var(--red), var(--red)) left bottom;
  background-repeat: no-repeat;
  background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
  animation: seal-frame linear both;
  animation-timeline: --act;
  animation-range: entry 48% entry 92%;
}
@keyframes seal-frame {
  from { background-size: 0% 3px, 3px 0%, 0% 3px, 3px 0%; }
  to   { background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%; }
}



.act-hope {
  min-height: 92vh;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--hope-bg);
  animation: hope-bg linear both;
  animation-timeline: view();
  animation-range: entry 15% entry 100%;
}
@keyframes hope-bg {
  from { background: #000; }
  to   { background: var(--hope-bg); }
}
.act-hope::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 120vmin; height: 120vmin;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(150,205,255,.11), rgba(150,205,255,0) 65%);
  opacity: 0;
  pointer-events: none;
  animation: bloom-in linear both;
  animation-timeline: --act;
  animation-range: entry 25% entry 90%;
}
.h-line {
  position: relative;
  z-index: 1;
  font-weight: 700;
  color: var(--ice);
  letter-spacing: .18em;
  animation: hope-rise linear both;
  animation-timeline: --act;
  animation-range: entry 22% entry 77%;
}
@keyframes hope-rise {
  from { opacity: 0; letter-spacing: .03em; translate: 0 18px; }
  to   { opacity: 1; letter-spacing: .18em; translate: 0 0; }
}


.endnote {
  min-height: 52vh;
  display: grid;
  align-content: center;
  padding-left: 10vw;
}


.endnote a {
  color: red;
  text-decoration: underline;
}



.site-footer {
  border-top: 1px solid #15151a;
  padding: 2.8rem 6vw 3.6rem;
  text-align: center;
  color: #757575;
  font-size: .82rem;
  animation: rv-fade linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}
.f-line a {
  color: #9a9a9a;
  text-decoration: none;
  border-bottom: 1px solid #2a2a2a;
  padding-bottom: .1em;
  transition: color .25s ease, border-color .25s ease;
}
.f-line a:hover { color: var(--red); border-color: var(--red); }
.f-zero { color: var(--red); font-weight: 700; letter-spacing: .04em; }
.f-sep { color: #3a3a3a; margin: 0 .55rem; }
.f-sub {
  margin-top: 1rem;
  font-size: .7rem;
  letter-spacing: .08em;
  color: #4a4a4a;
}


main.chaos ::selection,
.site-footer ::selection {
  background: var(--red);
  color: #000;
}


@media (prefers-reduced-motion: reduce) {
  .fade { animation: none; opacity: 0; visibility: hidden; }
  body { animation: none; }
  main.chaos, main.chaos *, main.chaos *::before, main.chaos *::after,
  .site-footer, .site-footer *, .site-footer *::before, .site-footer *::after,
  .scroll-cue, .scroll-cue *, .scroll-cue *::before, .scroll-cue *::after,
  .act-one > .stage, .act-one > .stage *, .act-one > .stage *::before, .act-one > .stage *::after {
    animation: none !important;
  }
  .cue-loading { display: none; }
  .cue-arrow { opacity: 1; visibility: visible; }
  .me-g1, .me-g2 { display: none; }
}