/* monet-alive/reveal.css */
/* Reveal page, skinned to match artx.house/mint. Layers on gallery.css (tokens:
   wall palette, Instrument Serif, brass/crimson). Two columns: copy left, framed
   square reveal right, with a post-reveal panel of pre-generated derivatives.
   The ASCII idle loader + the dramatic lights-down spotlight live here too. */

* { 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 (matches mint) ----- */
.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; }
.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 (kicker-styled pills), match the mint's connect-btn family. */
.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 in its gold gallery frame (verbatim from the original
   styles.css: gold frame + maría luisa mat + inner picture). .main-work only
   adds the on-wall width and the breathing animation. */
.frame {
  position: relative;
  width: min(572px, 100%);
  aspect-ratio: 1;
  padding: clamp(18px, 2.8vw, 28px);
  border: 1px solid rgba(80, 60, 24, 0.45);
  border-radius: 3px;
  background:
    linear-gradient(135deg,
      #c8a448 0%,
      #b48928 18%,
      #9a721c 38%,
      #ad8528 58%,
      #c19a3e 80%,
      #927018 100%);
  margin: 0 auto;
  box-shadow:
    0 48px 86px rgba(45, 40, 32, 0.30),
    0 16px 32px rgba(45, 40, 32, 0.16),
    inset 0 0 0 1px rgba(240, 215, 150, 0.30),
    inset 0 -2px 6px rgba(60, 40, 8, 0.40);
}

/* María luisa (the cream passe-partout between frame and artwork). Lifted to a
   warm white so it reads bright against the mint wall (the original #e8e2d0
   looked duller here than it did on the old brighter-cream page background). */
.mat {
  width: 100%;
  height: 100%;
  padding: clamp(17px, 2.4vw, 28px);
  background:
    linear-gradient(145deg, rgba(255, 252, 246, 0.6), transparent 40%),
    #f4f0e8;
  box-shadow:
    inset 0 0 0 1px rgba(80, 60, 24, 0.18),
    inset 0 2px 6px rgba(80, 60, 24, 0.18);
}

.picture {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 18px 34px rgba(55, 48, 38, 0.18),
    inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.picture canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.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 (ported from the mint page) ----- */
.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; }

/* Tweet prompt on the basking stage: sits below the centered frame, above the
   veil. Fixed; its top is set from JS to track the frame's centered bottom. */
.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; }
}