/* Entry 019 — Money, undressed
   Series: Soulware.
   Scene art direction: a single great dune at the last warm hour — sunlit ridge
   falling to a face of deep shadow, cooling dusk sky behind, the foreground gone
   almost to dark. A monument made of countless small grains. The statement panel
   floats crisp in the near-dark foreground. One accent: an iris-blue, clerical and
   cool, the only cold note — used solely for the feeling under each charge.
   Display voices: Bodoni Moda (the soul) + Hanken Grotesk (the machine).
   Radii are kept fairly sharp — a ledger, a receipt — not pillowy. */

.money-scene {
  --iris: #8b8fe6;
  --iris-glow: #b6b8f4;
  --paper: #f3ecdf;        /* warm off-white, never #fff */
  --paper-soft: rgba(243, 236, 223, 0.62);
  --paper-faint: rgba(243, 236, 223, 0.40);

  display: grid;
  place-items: center;
  min-height: 780px;
  padding: 120px 32px;
  border-color: rgba(22, 16, 8, 0.7);
  /* background-first: a real photograph (warm dune at dusk) carries the scene;
     a warm scrim, darker toward the foreground, keeps the panel legible. */
  background-image:
    linear-gradient(184deg, rgba(20, 16, 9, 0.30) 0%, rgba(18, 13, 7, 0.34) 42%, rgba(12, 9, 5, 0.74) 100%),
    url("../../public/media/backgrounds/dark-warm-17-nir.jpg");
  background-size: cover, cover;
  background-position: center, center 38%;
  background-repeat: no-repeat, no-repeat;
}

/* mid layer — the warm bloom of the sun still on the ridge, spilled into the dark */
.glow {
  position: absolute;
  z-index: 0;
  left: 62%;
  top: 40%;
  width: min(820px, 92%);
  height: 520px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(58% 58% at 50% 50%, rgba(196, 120, 52, 0.20), transparent 72%);
  filter: blur(64px);
  pointer-events: none;
  transition: opacity 900ms ease;
}

/* ------------------------------------------------------------------ */
/* THE COMPONENT — one frosted-glass bank statement                    */
/* ------------------------------------------------------------------ */

.statement {
  position: relative;
  z-index: 2;
  width: min(640px, 100%);
  display: grid;
  gap: 0;
  padding: 30px 34px 24px;
  border-radius: 16px;
  font-family: var(--ui-sans), "Hanken Grotesk", system-ui, sans-serif;
  /* warm-dark frosted glass: a thin film of light over the photograph */
  background:
    linear-gradient(168deg, rgba(60, 48, 34, 0.30), rgba(18, 13, 8, 0.46));
  border: 1px solid rgba(243, 236, 223, 0.16);
  box-shadow:
    0 1px 0 rgba(243, 236, 223, 0.18) inset,
    0 0 0 1px rgba(8, 6, 3, 0.24),
    0 60px 130px rgba(8, 6, 3, 0.66),
    0 16px 50px rgba(120, 78, 36, 0.22);
  backdrop-filter: blur(28px) saturate(1.25);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
  color: var(--paper);
}

/* ---- header: month + the reading toggle ---- */
.st-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(243, 236, 223, 0.12);
}

.st-kicker {
  margin: 0 0 4px;
  font-family: "Hanken Grotesk", var(--ui-sans), sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.st-month {
  margin: 0;
  font-family: "Bodoni Moda", "Newsreader", Georgia, serif;
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 0.98;
  letter-spacing: 0.005em;
  color: var(--paper);
}

/* segmented control — the machine's voice */
.st-toggle {
  flex: none;
  display: inline-flex;
  padding: 4px;
  border-radius: 10px;
  background: rgba(10, 8, 5, 0.34);
  border: 1px solid rgba(243, 236, 223, 0.12);
}

.seg {
  font-family: "Hanken Grotesk", var(--ui-sans), sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--paper-soft);
  padding: 8px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

.seg[aria-pressed="true"] {
  color: #16131c;
  background: linear-gradient(180deg, #eceaf9, #c9caf2);
  box-shadow: 0 6px 18px rgba(139, 143, 230, 0.34);
}

.seg:not([aria-pressed="true"]):hover { color: var(--paper); }

/* ---- the rows ---- */
.st-rows {
  list-style: none;
  margin: 0;
  padding: 6px 0 2px;
  display: grid;
}

.st-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label amount"
    "reason amount";
  align-items: baseline;
  column-gap: 18px;
  padding: 16px 12px;
  margin: 0 -12px;
  border-radius: 11px;
  border-bottom: 1px solid rgba(243, 236, 223, 0.08);
  cursor: pointer;
  transition: background 240ms ease, opacity 320ms ease, transform 320ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.st-row:last-child { border-bottom: 0; }

.row-label {
  grid-area: label;
  font-family: "Hanken Grotesk", var(--ui-sans), sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--paper);
  transition: color 320ms ease, opacity 320ms ease;
}

.row-amount {
  grid-area: amount;
  align-self: center;
  font-family: "Hanken Grotesk", var(--ui-sans), sans-serif;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--paper);
  white-space: nowrap;
}

/* the soul voice — hidden until undressed. serif, iris, the feeling itself */
.row-reason {
  grid-area: reason;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-family: "Bodoni Moda", "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.34;
  letter-spacing: 0.004em;
  color: var(--iris-glow);
  text-wrap: pretty;
  transition: max-height 420ms cubic-bezier(0.2, 0.6, 0.2, 1), opacity 360ms ease, margin 360ms ease;
}

/* the verdict — appears only when a row is focused, under the reason */
.row-verdict {
  grid-area: reason;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-family: "Hanken Grotesk", var(--ui-sans), sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper-soft);
  transition: max-height 380ms ease, opacity 320ms ease, margin 320ms ease;
}

/* ===== UNDRESSED MODE — the reasons rise, the merchant softens ===== */
.statement[data-mode="bare"] .row-label {
  color: var(--paper-faint);
  font-weight: 500;
}
.statement[data-mode="bare"] .row-reason {
  max-height: 96px;
  opacity: 1;
  margin-top: 7px;
}

/* focusing one row: it lifts, the verdict shows, the rest recede */
.statement[data-mode="bare"] .st-row.is-focused {
  background: rgba(139, 143, 230, 0.10);
  transform: translateY(-1px);
}
.statement[data-mode="bare"] .st-row.is-focused .row-verdict {
  max-height: 40px;
  opacity: 1;
  margin-top: 9px;
}
.statement[data-mode="bare"].has-focus .st-row:not(.is-focused) {
  opacity: 0.4;
}

/* hover reward (still complete as a still image) */
.statement[data-mode="bare"] .st-row:hover {
  background: rgba(139, 143, 230, 0.07);
}

/* ===== THE BANK'S VIEW — even undressed, the why is redacted ===== */
.statement[data-viewer="bank"][data-mode="bare"] .row-reason {
  color: transparent;
  position: relative;
}
.statement[data-viewer="bank"][data-mode="bare"] .row-reason::after {
  content: "the bank can't see this";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  font-family: "Hanken Grotesk", var(--ui-sans), sans-serif;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-faint);
  background: repeating-linear-gradient(
    -45deg,
    rgba(243, 236, 223, 0.06) 0 9px,
    rgba(243, 236, 223, 0.02) 9px 18px
  );
  border-radius: 6px;
  padding-left: 12px;
}

/* ---- footer ---- */
.st-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(243, 236, 223, 0.12);
}

.foot-total {
  margin: 0;
  font-family: "Bodoni Moda", "Newsreader", Georgia, serif;
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--paper);
  max-width: 40ch;
}
.foot-total .foot-sub {
  display: inline-block;
  margin-left: 8px;
  font-family: "Hanken Grotesk", var(--ui-sans), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-faint);
  vertical-align: middle;
}
/* the emotional tally line that appears under the total when undressed */
.foot-tally {
  display: block;
  margin-top: 8px;
  font-family: "Hanken Grotesk", var(--ui-sans), sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--iris-glow);
}

.whose {
  flex: none;
  font-family: "Hanken Grotesk", var(--ui-sans), sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-faint);
  text-align: right;
  cursor: pointer;
  line-height: 1.5;
  transition: color 200ms ease;
}
.whose:hover { color: var(--paper-soft); }
.whose-state {
  display: block;
  margin-top: 3px;
  color: var(--iris);
  letter-spacing: 0.04em;
}
.statement[data-viewer="bank"] .whose-state { color: #d68a4e; }

/* unobtrusive photo attribution, bottom-right of the scene */
.scene-credit {
  position: absolute;
  right: 16px;
  bottom: 13px;
  z-index: 3;
  font-family: var(--ui-sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(243, 236, 223, 0.34);
  pointer-events: none;
}

/* the warm bloom steadies slightly when undressed — motion as meaning */
.money-scene:has(.statement[data-mode="bare"]) .glow { opacity: 0.78; }

@media (prefers-reduced-motion: reduce) {
  .row-reason, .row-verdict, .st-row { transition: none; }
}

/* ---- small screens ---- */
@media (max-width: 720px) {
  .money-scene { padding: 64px 14px; min-height: 0; }
  .statement { padding: 24px 20px 18px; border-radius: 14px; }
  .st-head { flex-direction: column; gap: 14px; }
  .st-toggle { align-self: stretch; }
  .seg { flex: 1; text-align: center; }
  .st-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .whose { text-align: left; }
}