/* Scene 5 — the Memora Notebook. Left: eligibility (checklist, ring, lock).
   Right: the physical notebook morphing into the owner's digital notebook. */

.rw .scene-scrim {
  background: radial-gradient(90% 70% at 22% 40%, rgba(228, 193, 105, .16) 0%, transparent 60%),
              linear-gradient(180deg, #0E100C 0%, #0B0C0A 100%);
}

.rw-inner {
  display: grid;
  grid-template-columns: 1fr .92fr;
  gap: clamp(24px, 4vw, 76px);
  align-items: center;
}

.rw-left { max-width: 48ch; }

/* ------------------------------------------------------------- checklist */
.rw-checklist { position: relative; }

.rw-check-body {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 30px);
  margin-top: .3em;
}

.rw-ring-wrap {
  position: relative;
  flex: 0 0 auto;
  width: clamp(72px, 7vw, 118px);
  aspect-ratio: 1;
}
.rw-ring { width: 100%; height: 100%; color: var(--gold); }
.rw-ring-track { stroke: rgba(255, 255, 255, .12); }
.rw-ring-fg {
  stroke: var(--gold);
  filter: drop-shadow(0 0 6px rgba(228, 193, 105, .55));
  transition: stroke-dashoffset 1s var(--t);
}
.rw-ring-pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(13px, 1vw, 19px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--gold-hi);
}

.rw-req-list { flex: 1; display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.rw-req-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  font-size: clamp(13px, .96vw, 18px);
  color: var(--paper-dim);
  transition: color .4s var(--t);
}
.rw-req-row.is-done { color: var(--paper); }
.rw-req-label { min-width: 0; }

.rw-ring-complete {
  position: absolute;
  top: clamp(14px, 1.4vw, 26px);
  right: clamp(14px, 1.4vw, 26px);
}

/* ------------------------------------------------------------------ lock */
.rw-lock-row { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 26px); }

.rw-lock-icon {
  position: relative;
  flex: 0 0 auto;
  width: clamp(46px, 4.2vw, 66px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .04);
}
.rw-lock-icon svg {
  position: absolute;
  transition: opacity .5s var(--t), transform .5s var(--t);
}
.rw-lock-icon .lock-closed { opacity: 1; transform: scale(1) rotate(0); color: var(--paper-faint); }
.rw-lock-icon .lock-open   { opacity: 0; transform: scale(.7) rotate(-10deg); color: var(--gold-hi); }
.rw-lock-icon.is-unlocked .lock-closed { opacity: 0; transform: scale(.7) rotate(10deg); }
.rw-lock-icon.is-unlocked .lock-open   { opacity: 1; transform: scale(1) rotate(0); animation: rwUnlockPop .7s var(--t); }
.rw-lock-icon.is-unlocked {
  border-color: rgba(228, 193, 105, .55);
  background: rgba(228, 193, 105, .12);
  box-shadow: 0 0 0 0 rgba(228, 193, 105, .5);
  animation: rwLockGlow 2.2s var(--t) infinite;
}
@keyframes rwUnlockPop {
  0%   { transform: scale(.45) rotate(-24deg); opacity: 0; }
  55%  { transform: scale(1.22) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
@keyframes rwLockGlow {
  0%   { box-shadow: 0 0 0 0 rgba(228, 193, 105, .45); }
  70%  { box-shadow: 0 0 0 .9em rgba(228, 193, 105, 0); }
  100% { box-shadow: 0 0 0 0 rgba(228, 193, 105, 0); }
}

.rw-lock-state {
  font-size: clamp(13px, 1.05vw, 20px);
  font-weight: 750;
  letter-spacing: .02em;
  color: var(--paper);
}
.rw-lock-icon.is-unlocked ~ .stack .rw-lock-state { color: var(--gold-hi); }
.rw-lock-note { max-width: 40ch; }

.rw-callout { margin-top: .2em; }

/* ------------------------------------------------------------------ right */
.rw-right { align-items: center; text-align: left; }
.rw-right .partner { align-self: flex-start; }

.rw-stage {
  position: relative;
  width: 100%;
  min-height: clamp(240px, 30vh, 400px);
  display: grid;
  place-items: center;
  perspective: 1800px;
}

.rw-notebook-layer,
.rw-digital-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity .9s var(--t), transform .9s var(--t), filter .9s var(--t);
}
.rw-digital-layer { opacity: 0; transform: scale(.88) rotateY(10deg); filter: blur(8px); pointer-events: none; }
.rw-stage.is-open .rw-notebook-layer {
  opacity: 0;
  transform: scale(.8) rotateY(-16deg) translateY(12px);
  filter: blur(9px);
  pointer-events: none;
}
.rw-stage.is-open .rw-digital-layer { opacity: 1; transform: none; filter: none; pointer-events: auto; }

/* --------------------------------------------------------- the notebook */
.rw-notebook {
  position: relative;
  width: clamp(170px, 16vw, 250px);
  aspect-ratio: .74;
  animation: rwFloat 7s ease-in-out infinite alternate;
}
@keyframes rwFloat {
  from { translate: 0 -6px; }
  to   { translate: 0 6px; }
}

.rw-nb-pages {
  position: absolute;
  inset: 4% -3% 4% auto;
  right: -3%;
  width: 10%;
  border-radius: 0 6px 6px 0;
  background: repeating-linear-gradient(180deg, #EFE9D6 0 2px, #DED5B8 2px 4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.rw-nb-spine {
  position: absolute;
  inset: 0 auto 0 0;
  width: 9%;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(180deg, #1B2312 0%, #0E1309 100%);
  box-shadow: inset -3px 0 6px rgba(0, 0, 0, .5);
}

.rw-nb-cover {
  position: absolute;
  inset: 0 4% 0 8%;
  border-radius: 6px 12px 12px 6px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .08), transparent 40%),
    linear-gradient(165deg, #2A3420 0%, #131A0C 60%, #0C0F08 100%);
  border: 1px solid rgba(228, 193, 105, .22);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.rw-nb-band {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 16%;
  width: clamp(10px, 1.1vw, 18px);
  background: linear-gradient(90deg, #7A2E2A, #A8433C);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
}

.rw-nb-logo {
  width: 56%;
  max-width: 130px;
  height: auto;
  object-fit: contain;
  opacity: .95;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4));
}

.rw-nb-marks {
  position: absolute;
  left: 10%;
  bottom: 8%;
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 1vw, 16px);
}
.rw-nb-nfc {
  display: flex;
  align-items: center;
  gap: .35em;
  color: var(--gold);
  font-size: clamp(13px, .64vw, 17px);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.rw-nb-qr .qr { width: clamp(34px, 3.2vw, 56px); border-radius: 5px; padding: 8%; }

.rw-nb-stamp {
  position: absolute;
  top: 14%;
  left: 50%;
  translate: -50% 0;
  padding: .3em .9em;
  border: 2px solid var(--gold-hi);
  border-radius: 6px;
  color: var(--gold-hi);
  font-size: clamp(13px, .9vw, 16px);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: rotate(-8deg);
  background: rgba(11, 12, 10, .55);
}

/* ------------------------------------------------------------- digital */
.rw-digital {
  width: clamp(260px, 26vw, 440px);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
}

.rw-digital-bar {
  display: flex;
  align-items: center;
  gap: .8em;
  padding: .7em 1em;
  background: rgba(255, 255, 255, .05);
  border-bottom: 1px solid var(--line);
}
.rw-digital-dots { display: flex; gap: .35em; }
.rw-digital-dots i {
  width: .55em; height: .55em; border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  display: block;
}
.rw-digital-title {
  font-size: clamp(13px, .88vw, 16px);
  font-weight: 700;
  color: var(--paper-dim);
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rw-digital-body {
  padding: clamp(14px, 1.5vw, 28px);
  display: grid;
  gap: 1em;
}

.rw-pages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, .9vw, 16px);
}
.rw-page {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  padding: .6em .6em .7em;
  display: grid;
  gap: .5em;
}
.rw-page-lines {
  aspect-ratio: 1.3;
  border-radius: 6px;
  background: #EFE9D6;
  background-image: repeating-linear-gradient(180deg, transparent 0 22%, rgba(20, 22, 15, .18) 22% 25%);
  position: relative;
}
.rw-page-lines::after {
  content: '';
  position: absolute;
  inset: 12% 55% 12% 12%;
  border-left: 2px solid rgba(196, 97, 75, .5);
}
.rw-page-cap {
  font-size: clamp(13px, .72vw, 17px);
  color: var(--paper-faint);
  line-height: 1.3;
}

.rw-safety { max-width: 46ch; }

/* ------------------------------------------------------------------ actions */
.rw-actions { align-items: center; justify-content: flex-start; }

.rw-redeemed { min-width: clamp(200px, 18vw, 300px); }
.rw-redeemed-title { font-size: clamp(14px, 1.1vw, 21px); font-weight: 750; margin-top: .5em; }
.rw-redeemed-ref {
  font-size: clamp(13px, .9vw, 16px);
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
  margin-top: .2em;
}
.rw-redeemed-note { margin-top: .4em; max-width: 34ch; }

@media (max-width: 1150px) {
  .rw-inner { grid-template-columns: 1fr; }
  .rw-right { order: -1; }
  .rw-left { max-width: none; }
}