/* Tourbillon reveal page. Uses the public gallery frame, ASCII idle loader, and
   lights-down spotlight structure from the existing reveal page. */

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }

body {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, 0.76), transparent 58%),
    linear-gradient(180deg, var(--wall-warm), var(--wall) 62%, var(--wall-cool));
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.site {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* ----- Header ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(20px, 4vw, 48px);
  background: rgba(236, 232, 224, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-rule);
}
.site-id {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.site-id a { color: inherit; text-decoration: none; }
.site-meta {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 24px);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.site-meta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--crimson);
  box-shadow: 0 0 0 3px rgba(122, 31, 18, 0.16);
  animation: pulse 2.4s ease-in-out infinite;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(122, 31, 18, 0.16); }
  50% { box-shadow: 0 0 0 6px rgba(122, 31, 18, 0.04); }
}

main {
  flex: 1;
  position: relative;
  z-index: 2;
  padding: clamp(36px, 5vw, 80px) clamp(20px, 5vw, 72px) clamp(56px, 7vw, 100px);
}

/* ----- Two-column page ----- */
.reveal-page {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.reveal-left {
  position: sticky;
  top: calc(60px + clamp(20px, 4vw, 44px));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.reveal-title {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 8vw, 104px);
  line-height: 0.86;
  letter-spacing: 0;
}

.reveal-copy {
  margin: 0;
  max-width: 38ch;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}
.reveal-copy-em {
  font-style: italic;
  color: var(--ink-faint);
}

.meta-line {
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.meta-line span { color: var(--ink-soft); }
.meta-traits { letter-spacing: 0.08em; }

.owned-picker {
  width: min(100%, 380px);
  margin-top: 8px;
  padding: 14px;
  border: 1px solid var(--ink-rule);
  background: rgba(255, 255, 255, 0.46);
  box-shadow: 0 18px 42px rgba(45, 40, 32, 0.08);
}
.owned-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.owned-connect {
  padding: 8px 12px;
  min-height: 30px;
  font-size: 9px;
  white-space: nowrap;
}
.owned-status {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}
.owned-status.is-bad { color: var(--crimson); }
.owned-status.is-good { color: var(--ink); }
.owned-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.owned-list[hidden] { display: none; }
.token-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 12px;
}
.token-form input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--ink-rule);
  border-radius: 0;
  background: rgba(247, 242, 232, 0.82);
  color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  padding: 4px 10px;
}
.token-form input:focus {
  outline: 1px solid rgba(20, 19, 15, 0.36);
  outline-offset: 2px;
}
.owned-token {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--ink-rule);
  background: rgba(247, 242, 232, 0.82);
  color: var(--ink);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.owned-token:hover {
  background: #fff;
  border-color: rgba(20, 19, 15, 0.35);
  transform: translateY(-1px);
}
.owned-token.is-active {
  background: var(--ink);
  color: var(--wall);
  border-color: var(--ink);
}
.owned-token-id {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.owned-token-state {
  font-size: 11px;
  color: currentColor;
  opacity: 0.72;
}

/* Ghost buttons. */
.ghost-btn {
  appearance: none;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  border: 1px solid var(--ink-rule);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 999px;
  min-height: 34px;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.ghost-btn:hover { background: var(--ink); color: var(--wall); }
.other-modes-btn[hidden], .ghost-btn[hidden] { display: none; }
#otherModesButton { margin-top: 8px; animation: fadeUp 360ms ease both; }

/* ----- Right column ----- */
.reveal-right {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  width: 100%;
}

.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.nav-arrow {
  width: clamp(38px, 4vw, 46px);
  height: clamp(38px, 4vw, 46px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  border: 1px solid var(--ink-rule);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}
.nav-arrow:hover { transform: translateY(-1px); background: #fff; }

/* The square work follows the CMPLX mint prereveal frame. */
.frame {
  position: relative;
  width: min(572px, 100%);
  aspect-ratio: 1;
  padding: 10px;
  border: 1px solid rgba(20, 19, 15, 0.18);
  border-radius: 0;
  background: #f7f2e8;
  margin: 0 auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 28px 56px rgba(20, 19, 15, 0.14),
    0 2px 4px rgba(20, 19, 15, 0.12);
}

/* Neutral mat wrapper between the page and artwork. */
.mat {
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.picture {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #14161b;
  border: 1px solid rgba(20, 19, 15, 0.18);
  box-shadow: none;
}
.picture canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.reveal-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

.reveal-cover.is-on {
  opacity: 1;
}

.main-work {
  width: min(572px, 100%);
  margin: -24px auto 0; /* nudge the resting frame up in the right column */
  animation: artworkBreathe 7s ease-in-out infinite;
}

@keyframes artworkBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.004); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hud { display: flex; gap: 14px; justify-content: center; margin-top: 28px; }

/* ----- Derivative previews ----- */
.modes-panel { width: 100%; margin-top: 6px; animation: fadeUp 420ms ease both; }
.modes-panel[hidden] { display: none; }
.modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  width: 100%;
}
.mode-card { margin: 0; display: flex; flex-direction: column; gap: 8px; }
/* Thin warm-white frame for the small derivative previews (a quiet echo of the
   hero frame; the gold baroque would overwhelm at this size). */
.mode-thumb {
  padding: 6px;
  background: #f7f2e8;
  border: 1px solid rgba(20, 19, 15, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 14px 28px rgba(20, 19, 15, 0.12);
}
.mode-thumb img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--wall-cool);
  border: 1px solid rgba(20, 19, 15, 0.18);
}
.mode-card figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mode-name { color: var(--ink-soft); }
.mode-dl {
  color: var(--ink-soft);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  border-bottom: 1px solid var(--ink-rule);
  cursor: pointer;
}
.mode-dl:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ----- ASCII idle loader ----- */
.ascii-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  opacity: 1;
  transition: opacity 600ms ease;
}
.ascii-layer.is-cleared { opacity: 0; }

.ascii-static-prompt {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f2e8;
  color: var(--ink);
  font: 700 13px/1 "Courier New", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 500ms ease;
}
.ascii-static-prompt.is-cleared { opacity: 0; }

/* "Not yet revealed": shown in the picture when the token's art doesn't exist
   yet (endpoint 404). Quiet text on the paper ground; no canvas content. */
.not-revealed {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f2e8;
  color: var(--ink-faint);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: 0.01em;
}
.not-revealed[hidden] { display: none; }

/* ----- Reveal spotlight: lights-down drama ----- */
.dim-veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  /* On reveal the page becomes a gallery room: the whiteroom photo, with a soft
     vignette over it pooling light at center (where the spotlit frame travels). */
  background:
    radial-gradient(60% 80% at 50% 46%, rgba(20, 16, 12, 0.10), rgba(12, 10, 7, 0.55) 78%),
    url("./assets/whiteroom.webp") center / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1500ms cubic-bezier(.4, 0, .2, 1);
}
.dim-veil.is-on { opacity: 1; }

/* Go back prompt on the basking stage. */
.tweet-btn {
  position: fixed;
  left: 50%; /* left EDGE; overwritten by JS to center under the frame */
  top: 50%;  /* overwritten by JS to sit just below the centered frame */
  z-index: 70;
  appearance: none;
  background: var(--ink);
  color: var(--wall);
  border: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 999px;
  cursor: pointer;
  animation: fadeUp 500ms ease both;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.tweet-btn[hidden] { display: none; }
.tweet-btn:hover { background: #2a2620; }

/* While dimmed, lift only the framed square above the veil, spotlit. A slow
   lift + a warm glow makes the "lights down" feel theatrical. The breathing
   animation is paused during the spotlight so the lift reads cleanly. */
.main-work.spotlit {
  position: relative;
  z-index: 60;
  animation: none;
  /* Lift to screen center (--cx/--cy from JS) and grow under the spotlight.
     The transition animates the move + scale (no teleport). */
  transform: translate(var(--cx, 0px), var(--cy, 0px)) scale(0.92);
  transition: transform 1500ms cubic-bezier(.2,.7,.3,1),
              box-shadow 1500ms ease;
  box-shadow:
    0 60px 120px rgba(0, 0, 0, 0.6),
    0 0 160px 50px rgba(243, 219, 150, 0.16),
    0 0 60px 6px rgba(243, 219, 150, 0.12);
}

/* Transition start state: at the frame's resting position, normal scale. The
   .spotlit transition animates from here to the centered+1.5x end state. */
.main-work.spotlit.spotlit-start {
  transform: translate(0px, 0px) scale(1);
}

/* Return: keep the transition and pause the breathing so the frame eases from
   the centered transform back to resting (when .spotlit is dropped) instead of
   snapping. While .spotlit is still present it stays centered; once removed this
   resting transform takes over and animates. */
.main-work.returning {
  position: relative;
  z-index: 60;
  animation: none;
  transform: translate(var(--cx, 0px), var(--cy, 0px)) scale(1);
  transition: transform 1500ms cubic-bezier(.2,.7,.3,1),
              box-shadow 1500ms ease;
}

/* ----- Responsive ----- */
@media (max-width: 820px) {
  .reveal-page { grid-template-columns: 1fr; }
  .reveal-left { position: static; align-items: center; text-align: center; }
  .owned-picker { margin-left: auto; margin-right: auto; }
  .ghost-btn { align-self: center; }
  .reveal-copy { max-width: none; }
}