:root {
  color-scheme: dark;
  --black: #040506;
  --white: #f4f3ef;
  --muted: rgba(244, 243, 239, 0.58);
  --line: rgba(244, 243, 239, 0.42);
  --edge: clamp(1rem, 3vw, 3rem);
}

@font-face {
  font-family: "Instrument Sans";
  src: url("./assets/instrument-sans-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Saira Stencil One";
  src: url("./assets/saira-stencil-one.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--black);
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: none;
  color: var(--white);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

button {
  color: inherit;
  font: inherit;
}

.film {
  position: fixed;
  z-index: 1;
  inset: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
}

.scroll-story {
  position: relative;
  z-index: 0;
}

.scroll-step {
  min-height: 100svh;
}

.scroll-step--cover {
  min-height: 115svh;
}

.scroll-step--hits {
  min-height: 130svh;
}

.scroll-step--manifesto {
  min-height: 280svh;
}

.scroll-step--release,
.scroll-step--piano,
.scroll-step--finale {
  min-height: 125svh;
}

.scroll-step--permission {
  min-height: 88svh;
}

.picture,
.picture__image,
.picture__grade,
.scene,
.flash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.picture {
  z-index: -3;
  background: var(--black);
}

.picture__image {
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  filter: saturate(0.72) contrast(1.07) brightness(0.72);
  transform: scale(1.015);
  transition: opacity 900ms ease, filter 1.2s ease, transform 5s cubic-bezier(0.2, 0.7, 0, 1);
}

.picture__tension {
  object-position: 53% 50%;
}

.picture__bound {
  object-fit: contain;
}

.picture__grade {
  background:
    linear-gradient(180deg, rgba(2, 3, 5, 0.48), transparent 28%, transparent 66%, rgba(2, 3, 5, 0.74)),
    linear-gradient(90deg, rgba(2, 3, 5, 0.44), transparent 34%, transparent 72%, rgba(2, 3, 5, 0.22));
  transition: background 900ms ease;
}

body[data-picture="bound"] .picture__bound {
  opacity: 1;
}

body[data-picture="bound"] .picture__bound {
  filter: saturate(0.7) contrast(1.08) brightness(0.76);
  transform: scale(1);
}

body[data-opening="thesis"][data-picture="bound"] .picture__bound,
body[data-opening="refusal"][data-picture="bound"] .picture__bound {
  opacity: 0;
}

body[data-picture="tension"] .picture__tension {
  opacity: 1;
  filter: saturate(0.58) contrast(1.08) brightness(0.64);
  transform: scale(1.035);
}

body[data-picture="tension-deep"] .picture__tension {
  opacity: 1;
  filter: saturate(0.5) contrast(1.08) brightness(0.5);
  transform: scale(1.055);
}

body[data-picture="release"] .picture__release {
  opacity: 1;
  filter: saturate(0.82) contrast(1.06) brightness(0.82);
  transform: scale(1);
}

body[data-picture="brasilia-aerial"] .picture__brasilia-aerial {
  opacity: 1;
  filter: saturate(0.72) contrast(1.08) brightness(0.72);
  transform: scale(1.02);
}

body[data-picture="brasilia-venue"] .picture__brasilia-venue {
  opacity: 1;
  filter: saturate(0.78) contrast(1.08) brightness(0.82);
  transform: scale(1);
}

body[data-picture="piano"] .picture__piano {
  opacity: 1;
  filter: saturate(0.7) contrast(1.08) brightness(0.88);
  transform: scale(1);
}

body[data-picture="piano"] .picture__grade {
  background: linear-gradient(180deg, rgba(1, 2, 3, 0.38), transparent 34%, transparent 68%, rgba(1, 2, 3, 0.8));
}

.credits {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: clamp(1rem, 2.4vw, 2.25rem) clamp(1rem, 3vw, 3rem);
  font-size: clamp(0.64rem, 0.72vw, 0.78rem);
  font-weight: 450;
  letter-spacing: 0.08em;
  mix-blend-mode: difference;
  pointer-events: none;
}

.credits p {
  margin: 0;
}

.credits button {
  justify-self: end;
  min-height: 1.75rem;
  padding: 0.36rem 0.68rem;
  border: 1px solid rgba(244, 243, 239, 0.68);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  pointer-events: auto;
  transition: background 160ms ease, color 160ms ease;
}

.credits button:hover,
.credits button:focus-visible {
  background: var(--white);
  color: var(--black);
}

.scene {
  z-index: 2;
  padding: clamp(5.5rem, 9vh, 8rem) clamp(1rem, 3vw, 3rem) clamp(2rem, 5vw, 4rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 650ms ease, visibility 0s linear 650ms;
}

body[data-scene="cover"] .scene--cover,
body[data-scene="hits"] .scene--hits,
body[data-scene="manifesto"] .scene--manifesto,
body[data-scene="blackout"] .scene--blackout,
body[data-scene="release"] .scene--release,
body[data-scene="brasilia-aerial"] .scene--location,
body[data-scene="brasilia-venue"] .scene--location,
body[data-scene^="permission-"] .scene--permission,
body[data-scene="piano"] .scene--piano,
body[data-scene="finale"] .scene--finale {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.scene--cover {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
}

.cover__prologue {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  align-items: center;
  padding: clamp(5.5rem, 9vh, 8rem) clamp(1rem, 5vw, 6rem) clamp(2rem, 5vw, 4rem);
  background: var(--black);
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 900ms;
}

.prologue__sentence,
.prologue__refusal {
  grid-area: 1 / 1;
  margin: 0;
  text-transform: uppercase;
  transition: opacity 420ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.prologue__sentence {
  display: grid;
  gap: clamp(0.08rem, 0.2vw, 0.24rem);
  max-width: min(86rem, 91vw);
  font-family: "Saira Stencil One", Impact, sans-serif;
  font-size: clamp(3.25rem, 6.2vw, 7.4rem);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.008em;
}

.prologue__refusal {
  max-width: 92vw;
  font-family: "Saira Stencil One", Impact, sans-serif;
  font-size: clamp(5rem, 12vw, 14rem);
  font-weight: 400;
  line-height: 0.76;
  letter-spacing: -0.008em;
  opacity: 0;
  transform: translateY(0.16em);
}

body[data-opening="thesis"] .cover__prologue,
body[data-opening="refusal"] .cover__prologue {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

body[data-opening="refusal"] .prologue__sentence {
  opacity: 0;
  transform: translateY(-0.12em);
}

body[data-opening="refusal"] .prologue__refusal {
  opacity: 1;
  transform: translateY(0);
}

body[data-opening="thesis"] .cover__copy,
body[data-opening="refusal"] .cover__copy,
body[data-opening="thesis"] .scroll-cue,
body[data-opening="refusal"] .scroll-cue,
body[data-opening="thesis"] .credits > p,
body[data-opening="refusal"] .credits > p {
  opacity: 0;
  visibility: hidden;
}

.cover__copy {
  align-self: end;
  max-width: 25rem;
  padding-bottom: clamp(5.8rem, 13vh, 8.5rem);
  transition: opacity 700ms ease;
}

.kicker,
.actmark,
.provisional,
.private-note,
.study-note,
.permission__label {
  margin: 0;
  font-size: clamp(0.62rem, 0.74vw, 0.78rem);
  font-weight: 450;
  letter-spacing: 0.08em;
}

.kicker {
  margin-bottom: 0.75rem;
  font-weight: 450;
}

.cover__thesis {
  margin: 0;
  font-family: "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(0.68rem, 0.82vw, 0.82rem);
  font-weight: 420;
  line-height: 1.32;
  letter-spacing: 0.06em;
}

.scroll-cue {
  position: absolute;
  right: clamp(1rem, 3vw, 3rem);
  bottom: clamp(1rem, 2.6vw, 2.25rem);
  margin: 0;
  color: rgba(244, 243, 239, 0.76);
  font-size: 0.58rem;
  font-weight: 450;
  letter-spacing: 0.14em;
  transition: opacity 700ms ease;
}

.cover__entry {
  position: absolute;
  right: clamp(1rem, 3vw, 3rem);
  bottom: clamp(1rem, 2.6vw, 2.25rem);
  width: min(9rem, calc(100vw - 2rem));
}

.cover__entry p {
  margin: 0 0 0.42rem;
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.enter,
.next-act,
.quiet-action {
  min-width: 7.5rem;
  min-height: 1.75rem;
  padding: 0.32rem 0.72rem;
  border: 1px solid rgba(244, 243, 239, 0.7);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  font-size: 0.58rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.03em;
  text-align: center;
  transition: background 160ms ease, color 160ms ease;
}

.enter {
  width: 100%;
}

.enter:hover,
.enter:focus-visible,
.next-act:hover,
.next-act:focus-visible,
.quiet-action:hover,
.quiet-action:focus-visible {
  background: var(--white);
  color: var(--black);
}

.scene--hits {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.hits__notes {
  position: relative;
  min-height: 0;
}

.hits__note {
  position: absolute;
  margin: 0;
  font-family: "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(0.62rem, 0.78vw, 0.76rem);
  font-weight: 450;
  line-height: 1.48;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.78);
}

.hits__note--opening {
  top: 22%;
  left: 0;
}

.hits__note--state {
  right: 0;
  bottom: 12%;
  color: rgba(244, 243, 239, 0.9);
  text-align: right;
}

.hits__note--index {
  left: 52%;
  bottom: 5%;
  color: var(--muted);
  font-size: 0.56rem;
}

.hits__next {
  justify-self: end;
}

.scene--manifesto {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.actmark {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.actmark span {
  color: var(--muted);
}

.manifesto {
  align-self: center;
  width: min(78rem, 88vw);
  margin: 0 auto;
  font-size: clamp(2.3rem, 5.9vw, 7.4rem);
  font-weight: 480;
  line-height: 0.98;
  letter-spacing: -0.052em;
  text-wrap: balance;
  text-align: center;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.7);
  transition: opacity 180ms ease, transform 180ms ease;
}

.manifesto.is-changing {
  opacity: 0;
  transform: translateY(0.25em);
}

.quiet-action {
  justify-self: end;
  align-self: end;
}

.scene--blackout {
  display: grid;
  place-items: center;
  background: var(--black);
}

.scene--blackout p {
  margin: 0;
  color: rgba(244, 243, 239, 0.38);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
}

.scene--release {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.release__footer,
.piano__footer {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 2rem;
}

.release__footer p,
.piano__footer p {
  margin: 0;
  font-size: clamp(0.78rem, 1.05vw, 1rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.next-act {
  min-width: 7.5rem;
}

.scene--location {
  display: grid;
  place-items: center;
}

.location__city,
.location__venue {
  margin: 0;
  text-shadow: 0 5px 36px rgba(0, 0, 0, 0.68);
}

.location__city {
  width: 100%;
  justify-self: center;
  align-self: center;
  text-align: center;
}

.location__city h2 {
  margin: 0;
  font-size: clamp(5.4rem, 11.8vw, 12.5rem);
  font-weight: 850;
  line-height: 0.78;
  letter-spacing: -0.082em;
  white-space: nowrap;
}

.location__venue {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  width: 100%;
  max-width: none;
  padding: var(--edge);
  text-align: center;
}

.location__venue p {
  position: absolute;
  top: clamp(6rem, 13vh, 9rem);
  left: var(--edge);
  margin: 0;
  color: var(--white);
  font-size: clamp(0.62rem, 0.74vw, 0.78rem);
  font-weight: 450;
  letter-spacing: 0.08em;
}

.location__venue h2 {
  margin: 0;
  font-size: clamp(4rem, 8.8vw, 9.5rem);
  font-weight: 820;
  line-height: 0.82;
  letter-spacing: -0.07em;
}

body[data-scene="brasilia-venue"] .location__city {
  display: none;
}

body[data-scene="brasilia-venue"] .location__venue {
  display: grid;
}

.scene--permission {
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  background: var(--black);
  text-align: center;
}

.permission__label {
  justify-self: start;
  color: var(--muted);
}

.permission__message > p {
  margin: 0;
  color: var(--white);
  font-size: clamp(1.4rem, 3.6vw, 4rem);
  font-weight: 450;
  letter-spacing: -0.035em;
}

.permission__message {
  display: grid;
  width: min(72rem, 90vw);
  min-height: 10rem;
  place-items: center;
}

.permission__message > * {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity 520ms ease, transform 520ms ease;
}

body[data-scene="permission-no"] .permission__callback,
body[data-scene="permission-years"] .permission__story,
body[data-scene="permission-ok"] .permission__received,
body[data-scene="permission-official"] .permission__official,
body[data-scene="permission-title"] .permission__message h2 {
  opacity: 1;
  transform: translateY(0);
}

.permission__message h2 {
  margin: 0;
  font-size: clamp(3rem, 8vw, 8rem);
  font-weight: 520;
  line-height: 0.92;
  letter-spacing: -0.06em;
}

.scene--piano {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.piano__copy {
  align-self: center;
  justify-self: start;
  max-width: min(58rem, 58vw);
}

.piano__copy p {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: 0.17em;
}

.piano__copy h2 {
  margin: 0;
  font-size: clamp(3.1rem, 7.3vw, 7.8rem);
  font-weight: 560;
  line-height: 0.8;
  letter-spacing: -0.072em;
  text-shadow: 0 7px 42px rgba(0, 0, 0, 0.5);
}

.piano__copy .piano__answer {
  margin: 1.1rem 0 0;
  color: var(--white);
  font-size: clamp(0.72rem, 1vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.16em;
}

body[data-scene="piano"] .piano__copy h2 {
  animation: piano-strike 720ms cubic-bezier(0.14, 0.72, 0.18, 1) both;
}

body[data-scene="piano"] .piano__answer {
  animation: piano-strike 720ms 240ms cubic-bezier(0.14, 0.72, 0.18, 1) both;
}

.scene--finale {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(24rem, 0.92fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 5rem);
  overflow: hidden;
  background: #000;
}

.finale__copy {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 54rem;
}

.finale__question {
  margin: 0;
  font-size: clamp(4.3rem, 6.4vw, 7.8rem);
  font-weight: 820;
  line-height: 0.8;
  letter-spacing: -0.072em;
}

.finale__copy h2 {
  margin: clamp(1.6rem, 3.4vh, 2.8rem) 0 clamp(1.1rem, 2.2vh, 1.7rem);
  font-size: clamp(1.25rem, 2.1vw, 2.5rem);
  font-weight: 520;
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.finale__ready {
  margin: 0;
  color: rgba(244, 243, 239, 0.88);
  font-size: clamp(1.15rem, 1.65vw, 1.9rem);
  font-weight: 650;
  line-height: 0.95;
  letter-spacing: -0.025em;
}

.finale__signature {
  display: block;
  width: clamp(8rem, 11vw, 11.5rem);
  height: auto;
  margin-top: clamp(4rem, 9vh, 7rem);
  object-fit: contain;
}

.finale__badge {
  align-self: stretch;
  justify-self: end;
  display: grid;
  place-items: end center;
  min-width: 0;
  height: 100%;
  margin: 0;
}

.finale__badge img {
  display: block;
  width: auto;
  max-width: 45vw;
  height: min(96svh, 74vw);
  object-fit: contain;
  object-position: center bottom;
}

body[data-scene="finale"] #soundToggle {
  opacity: 0;
  pointer-events: none;
}

@keyframes piano-strike {
  from { opacity: 0; transform: translateY(1.2rem) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.study-note {
  position: absolute;
  right: clamp(1rem, 3vw, 3rem);
  bottom: clamp(1rem, 2.6vw, 2.25rem);
  color: var(--muted);
  font-size: 0.58rem;
}

.piano__footer {
  padding-right: 0;
}

.review-nav {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: clamp(1rem, 2.6vw, 2.25rem);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 500ms ease, visibility 0s linear 500ms;
}

body:not([data-scene="cover"]) .review-nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.review-nav button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.review-nav span {
  width: 3.5rem;
  height: 1px;
  background: var(--line);
}

.private-note {
  position: absolute;
  z-index: 24;
  right: clamp(1rem, 3vw, 3rem);
  bottom: clamp(1rem, 2.6vw, 2.25rem);
  color: var(--muted);
  font-size: 0.58rem;
}

body[data-scene="cover"] .private-note,
body[data-scene="piano"] .private-note {
  opacity: 0;
}

.flash {
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  background: #fff;
}

.rotate-gate {
  display: none;
}

body.is-flashing .flash {
  animation: rupture-flash 460ms cubic-bezier(0.7, 0, 0.3, 1);
}

@keyframes rupture-flash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  43% { opacity: 0.82; }
  100% { opacity: 0; }
}

@media (max-width: 760px) {
  .cover__prologue {
    padding-inline: clamp(1rem, 5vw, 2rem);
  }

  .prologue__sentence {
    max-width: 92vw;
    font-size: clamp(2.6rem, 8.6vw, 4.6rem);
  }

  .prologue__refusal {
    font-size: clamp(4rem, 15vw, 7rem);
  }

  .cover__copy {
    position: absolute;
    top: 64%;
    left: 1rem;
    right: 1rem;
    padding-bottom: 0;
    transform: translateY(-50%);
  }

  .kicker {
    font-size: 0.56rem;
  }

  .cover__entry {
    left: 1rem;
    right: auto;
    bottom: 4.35rem;
    width: 8.5rem;
  }

  .provisional,
  .private-note,
  .study-note {
    max-width: 46vw;
    line-height: 1.4;
  }

  .private-note,
  .study-note {
    display: none;
  }

  .picture__image {
    object-position: 51% 50%;
  }

  .picture__tension {
    object-position: 52% 50%;
  }

  .hits__note--opening {
    top: 16%;
  }

  .hits__note--state {
    right: 0;
    bottom: 25%;
  }

  .hits__note--index {
    left: 0;
    bottom: 5%;
  }

  .manifesto {
    width: 92vw;
    font-size: clamp(2.15rem, 10.2vw, 4.7rem);
  }

  .release__footer,
  .piano__footer {
    align-items: start;
    flex-direction: column;
  }

  .piano__copy {
    align-self: end;
    max-width: 90vw;
    padding-bottom: 5.5rem;
  }

  .piano__copy h2 {
    font-size: clamp(3.5rem, 16vw, 6.5rem);
  }

  .piano__footer {
    display: none;
  }

  .scene--permission blockquote {
    justify-self: center;
    text-align: center;
  }

  .scene--finale {
    grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.9fr);
    gap: 1rem;
  }

  .finale__question {
    font-size: clamp(2.6rem, 7.4vw, 4rem);
  }

  .finale__copy h2 {
    font-size: clamp(0.95rem, 2.8vw, 1.5rem);
  }

  .finale__ready {
    font-size: clamp(0.95rem, 2.7vw, 1.45rem);
  }

  .finale__signature {
    margin-top: 2.2rem;
  }

  .finale__badge img {
    max-width: 43vw;
    height: 94svh;
  }
}

@media (orientation: portrait) and (max-width: 900px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .film,
  .scroll-story {
    visibility: hidden;
  }

  .rotate-gate {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--black);
    color: var(--white);
  }

  .rotate-gate p {
    margin: 0;
    font-family: "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(1.4rem, 8vw, 2.8rem);
    font-weight: 560;
    letter-spacing: -0.045em;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}