body { margin: 0; background: #000; }
*, *::before, *::after { box-sizing: border-box; }

.stage {
  position: relative; width: 100%; height: 100vh; height: 100dvh; min-height: 440px;
  overflow: hidden; background: #000; color: #fff;
  font-family: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  touch-action: none; overscroll-behavior: none; outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* One stage, changing scenes: every scene occupies the same field and dissolves in place. */
.scene {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 7vw 5vh; text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .75s ease, visibility 0s linear .75s;
}
.scene.on {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 1s ease .55s, visibility 0s linear 0s;
}

.copy {
  margin: 0; font-size: clamp(1rem, min(1.4vw, 2.7vh), 1.4rem);
  line-height: 1.4; font-weight: 400; text-wrap: balance;
}
.copy p { margin: 0 0 2.05em; }
.copy p:last-child { margin-bottom: 0; }
.copy.final { margin-top: 3em; }
.copy p.apart { margin-top: 2.4em; margin-bottom: .6em; font-size: .95em; color: rgba(255,255,255,.9); }
.copy p.quiet { font-size: 1.05em; color: rgba(255,255,255,.9); white-space: nowrap; }

/* Opening */
.scene.open { display: block; padding: 0; }
.title {
  position: absolute; left: 0; right: 0; top: 11vh; margin: 0; padding: 0 5vw;
  text-align: center; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
  font-size: clamp(2.5rem, 6.1vw, 7.4rem); line-height: 1.1; color: #f3c9ff;
  text-shadow: 0 0 .05em rgba(238,160,255,.86), 0 0 .2em rgba(192,74,242,.72), 0 0 .5em rgba(150,40,214,.5);
  animation: arrive 1.8s ease .2s both;
}
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
.tagwrap {
  position: absolute; left: 0; right: 0; top: 31vh; padding: 0 5vw; text-align: center;
  opacity: 0; transition: opacity .7s ease;
}
.tagwrap.on { opacity: 1; transition: none; }
.tagline {
  margin: 0; font-family: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 2.7rem); line-height: 1.25; white-space: pre; color: #fff;
}
/* The strike is drawn by hand so it passes through the centre of the x-height. */
.can { position: relative; display: inline-block; line-height: 1; }
.can::after {
  content: ""; position: absolute; left: -.07em; right: -.07em; top: 60.2%;
  height: .05em; margin-top: -.025em; background: #fff;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .25s cubic-bezier(.65, 0, .35, 1);
}
.can.struck::after { transform: scaleX(1); }

/* Five inner conflicts: one ellipse, one node travelling it, texts accumulate around the journey. */
.scene.dia-scene { padding: 0 0 5vh; }
.dia {
  position: relative; width: min(1200px, 94vw); height: min(500px, 60vh);
  font-size: clamp(.92rem, min(1.25vw, 2.4vh), 1.25rem); line-height: 1.4;
}
.ring {
  position: absolute; left: 50%; top: 50%; width: 37%; height: auto; aspect-ratio: 520 / 240;
  transform: translate(-50%, -50%); display: block; overflow: visible;
}
.conf {
  position: absolute; margin: 0; transform: translate(-50%, -50%); white-space: nowrap;
  opacity: 0; transition: opacity 1.2s ease .5s, color .9s ease;
}
/* The conflict just revealed is full white; earlier ones soften to gray and stay. */
.conf.on { opacity: 1; color: rgba(255,255,255,.5); }
.conf.on.cur { color: #fff; }
/* Five phases spaced evenly round the orbit, each text just outside its point on the ellipse. */
.k1 { left: 50%; top: 85.5%; }
.k2 { left: 19.9%; top: 59.8%; }
.k3 { left: 33.8%; top: 22.1%; }
.k4 { left: 66.2%; top: 22.1%; }
.k5 { left: 84.8%; top: 59.8%; }

/* Invitation */
/* Final-scene invitation: a small, quiet outlined button. */
.link {
  font: inherit; font-size: .78em; font-weight: 400; letter-spacing: .03em; color: rgba(255,255,255,.82);
  background: none; border: 1px solid rgba(255,255,255,.26); border-radius: 0;
  padding: .5em 1.15em; cursor: pointer;
  transition: color .4s ease, border-color .4s ease;
}
.link:hover { color: #fff; border-color: rgba(255,255,255,.6); }
.link:focus-visible { outline: 1px solid #fff; outline-offset: 6px; }
.link.gone { visibility: hidden; }

.scene.form-scene { padding: 0; }
.formscroll {
  width: 100%; height: 100%; overflow-y: auto; display: flex; padding: 4vh 24px;
  touch-action: pan-y; overscroll-behavior: contain;
}
.invite {
  --lab: 11.5rem;
  margin: auto; width: min(520px, 100%); text-align: left; display: flex; flex-direction: column;
  gap: clamp(10px, 2.1vh, 20px);
}
/* Desktop: label and input share one row. Phones stack them (see the media query). */
.field { display: grid; grid-template-columns: var(--lab) minmax(0, 300px); column-gap: 16px; align-items: end; }
.field.grow { align-items: start; }
.field.grow label { padding-top: .4rem; padding-bottom: 0; }
.field label { font-size: clamp(.95rem, min(1.1vw, 2.3vh), 1.05rem); line-height: 1.4; color: rgba(255,255,255,.72); padding-bottom: .65rem; text-align: left; }
/* The two Meta Morphosis questions: set apart by space and a quieter-to-warmer hierarchy, no decoration. */
.reflect { display: flex; flex-direction: column; gap: clamp(16px, 3.2vh, 32px); margin-top: clamp(14px, 4.5vh, 44px); }
.reflect .field label { color: #fff; }
.opt { display: inline; margin-left: .7em; color: #8c8c8c; font-size: .78em; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 1.15rem; color: #fff; background: transparent; border: 0;
  border-bottom: 1px solid rgba(255,255,255,.38); border-radius: 0; height: 50px; padding: .5em 0;
  outline: none; caret-color: #fff; transition: border-color .4s ease;
}
.field input::placeholder { color: rgba(255,255,255,.62); font-size: .8em; }
/* The long answer grows downward, never wider than the other lines. */
.field textarea { display: block; resize: none; overflow: hidden; line-height: 1.4; min-height: 50px; }
.field input:focus, .field textarea:focus { border-bottom-color: #fff; }
.field input:-webkit-autofill {
  -webkit-text-fill-color: #fff; box-shadow: 0 0 0 1000px #000 inset;
  transition: background-color 9999s ease 0s;
}
.invite .link { align-self: flex-start; margin-left: calc(var(--lab) + 16px); font-size: 1rem; margin-top: clamp(8px, 2.2vh, 22px); }

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

/* Phones and portrait screens: designed separately, not shrunk. */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .scene { padding: 0 8vw 4vh; }
  .copy, .dia { font-size: clamp(1.05rem, 4.6vw, 1.3rem); }
  .title { top: 15vh; font-size: clamp(2.2rem, 10.5vw, 3.6rem); }
  .tagwrap { top: 34vh; }
  .tagline { font-size: clamp(1.2rem, 5.4vw, 1.7rem); }
  /* Mobile conflicts: the orbit stays anchored at the top at full width; each accepted scroll reveals the next
     conflict beneath it. Earlier ones stay and accumulate downward, softened to gray; the current one is white. */
  .scene.dia-scene { align-items: flex-start; padding: clamp(80px, 17vh, 170px) 6vw 4vh; }
  .dia {
    width: 100%; max-width: 420px; height: auto; display: flex; flex-direction: column; align-items: center;
    font-size: clamp(1rem, 4.5vw, 1.15rem);
  }
  /* The orbit is sized to its text: its drawn path is just wider than the longest conflict line beneath it. */
  .ring { position: relative; left: auto; top: auto; transform: none; width: 14em; max-width: 80%; margin-bottom: clamp(16px, 2.6vh, 26px); }
  .conf { position: static; transform: none; white-space: nowrap; margin: 0 0 .8em; transition: opacity 1.2s ease .5s, color .9s ease; }
  .formscroll { padding: 5vh 24px; }
  .invite { width: min(380px, 100%); }
  .field { grid-template-columns: 1fr; }
  .field label, .field.grow label { padding: 0 0 4px; text-align: left; }
  .field.grow { align-items: end; }
  .invite .link { margin-left: 0; }
  .reflect { margin-top: clamp(18px, 4vh, 36px); gap: clamp(14px, 2.8vh, 26px); }
  .reflect .field label { white-space: normal; }
  .brk { display: none; }
  .field label { font-size: 1rem; }
  .field input::placeholder { font-size: .74em; }
}

@media (prefers-reduced-motion: reduce) {
  .scene, .scene.on { transition-duration: .01s; transition-delay: 0s; }
  .conf { transition-duration: .01s; transition-delay: 0s; }
  .title { animation: none; }
}