/* Page-specific margin notes for logged-out utility pages. The illustrations
   are decorative, finite, and deliberately inherit no page behavior. */
.public-moment {
  --pm-ink: #122821;
  --pm-dim: #62706b;
  --pm-green: #07835f;
  --pm-deep: #076347;
  --pm-sage: #f6f8f6;
  --pm-mint: #dcefe6;
  --pm-lime: #e8f3c4;
  --pm-lavender: #e9e6f6;
  display: block;
  width: 180px;
  max-width: 100%;
  color: var(--pm-ink);
  line-height: 0;
  pointer-events: none;
  user-select: none;
}

.public-moment svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  animation: pm-scene-in 0.55s cubic-bezier(.2, .75, .25, 1) both;
}

.public-moment :is(path, circle, rect) {
  vector-effect: non-scaling-stroke;
}

.public-moment path,
.public-moment circle,
.public-moment rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.public-moment .pm-surface { fill: var(--pm-sage); }
.public-moment .pm-mint { fill: var(--pm-mint); }
.public-moment .pm-lime { fill: var(--pm-lime); }
.public-moment .pm-lavender { fill: var(--pm-lavender); }
.public-moment .pm-dot { fill: var(--pm-green); stroke: none; }
.public-moment .pm-perf { stroke: var(--pm-dim); stroke-dasharray: 2 4; }

/* Beat the AI: two contenders meet at the decision seam of one ticket. */
#pageroot[data-page="play"] .public-moment {
  --pm-ink: #f6f8f6;
  --pm-dim: #91a39d;
  --pm-green: #d8ef8c;
  --pm-sage: rgba(246, 248, 246, 0.05);
  --pm-mint: rgba(7, 131, 95, 0.34);
  --pm-lime: rgba(216, 239, 140, 0.18);
  --pm-lavender: rgba(233, 230, 246, 0.16);
  float: right;
  width: 196px;
  margin: -4px 0 8px 24px;
}

.pm-play .pm-contender-human {
  transform-origin: center;
  animation: pm-enter-left 0.75s cubic-bezier(.2, .8, .2, 1) 0.15s both;
}

.pm-play .pm-contender-ai {
  transform-origin: center;
  animation: pm-enter-right 0.75s cubic-bezier(.2, .8, .2, 1) 0.15s both;
}

.pm-play .pm-decision {
  transform-box: fill-box;
  transform-origin: center;
  animation: pm-stamp 0.55s cubic-bezier(.2, .9, .3, 1.25) 0.72s both;
}

/* Sign in: an identity card arrives at a small agent desk. */
body[data-public-page="login"] .public-moment {
  width: 156px;
  margin: -4px 0 14px auto;
}

.pm-login .pm-entry-card {
  animation: pm-card-in 1.05s cubic-bezier(.2, .8, .2, 1) 0.2s both;
}

.pm-login .pm-arrow {
  stroke: var(--pm-green);
  animation: pm-nudge 0.65s ease-out 1.25s both;
}

/* About: raw signals converge, pass through a model, then become a page. */
#pageroot[data-page="about"] .public-moment {
  float: right;
  width: 218px;
  margin: -8px 0 10px 30px;
}

.pm-about .pm-route {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pm-draw 1.15s ease-out 0.15s both;
}

.pm-about .pm-publish-route { animation-delay: 0.9s; }
.pm-about .pm-model {
  transform-box: fill-box;
  transform-origin: center;
  animation: pm-model-arrive 0.7s cubic-bezier(.2, .8, .2, 1) 0.6s both;
}
.pm-about .pm-published {
  animation: pm-enter-right 0.65s ease-out 1.25s both;
}

/* Legal pages: a restrained paper edge and one bookmark settle once. */
#pageroot:is([data-page="terms"], [data-page="privacy"]) .public-moment {
  float: right;
  width: 118px;
  margin: -6px 0 2px 18px;
  color: var(--pm-dim);
}

.pm-terms .pm-paper,
.pm-privacy .pm-paper {
  animation: pm-paper-in 0.8s ease-out 0.1s both;
}

.pm-terms .pm-bookmark,
.pm-privacy .pm-bookmark {
  animation: pm-bookmark-in 0.85s cubic-bezier(.2, .8, .2, 1) 0.65s both;
}

.pm-terms .pm-clause {
  stroke: var(--pm-green);
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pm-draw 1.05s ease-out 1.1s both;
}

.pm-privacy .pm-redaction {
  transform-box: fill-box;
  transform-origin: left center;
  animation: pm-cover-line 0.8s ease-out 1.05s both;
}

/* Week: the five-session route draws across a compact calendar. */
#pageroot[data-page="week"] .public-moment {
  float: right;
  width: 190px;
  margin: -6px 0 8px 24px;
}

.pm-week .pm-week-route {
  stroke: var(--pm-green);
  stroke-width: 2.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pm-draw 1.7s cubic-bezier(.3, .7, .2, 1) 0.35s both;
}

.pm-week .pm-week-marker {
  transform-box: fill-box;
  transform-origin: center;
  animation: pm-stamp 0.55s cubic-bezier(.2, .9, .3, 1.2) 1.9s both;
}

/* Brag: a rosette presses into the share ticket, without fake score data. */
#pageroot[data-page="brag"] .public-moment {
  width: 188px;
  margin: 8px auto 2px;
}

.pm-brag .pm-brag-ticket {
  animation: pm-ticket-in 0.8s ease-out 0.1s both;
}

.pm-brag .pm-rosette {
  transform-box: fill-box;
  transform-origin: center;
  animation: pm-stamp 0.7s cubic-bezier(.2, .9, .3, 1.2) 0.75s both;
}

/* Errors: the first path stops; a second route quietly finds another way. */
body[data-public-page="error"] .public-moment {
  width: 176px;
  margin: 16px 0 0;
}

.pm-error .pm-route {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.pm-error .pm-route-first {
  animation: pm-draw 0.9s ease-out 0.15s both;
}

.pm-error .pm-roadblock {
  transform-box: fill-box;
  transform-origin: center;
  animation: pm-stamp 0.5s ease-out 0.95s both;
}

.pm-error .pm-route-second {
  stroke: var(--pm-green);
  animation: pm-draw 1.25s ease-out 1.35s both;
}

.pm-error .pm-destination {
  transform-box: fill-box;
  transform-origin: center;
  animation: pm-stamp 0.5s ease-out 2.45s both;
}

@keyframes pm-scene-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pm-enter-left {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pm-enter-right {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pm-card-in {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pm-nudge {
  0% { transform: translateX(-3px); opacity: 0; }
  60% { transform: translateX(2px); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes pm-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes pm-model-arrive {
  from { opacity: 0; transform: scale(.86) rotate(-4deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes pm-paper-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pm-bookmark-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pm-cover-line {
  from { opacity: 0; transform: scaleX(.15); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes pm-ticket-in {
  from { opacity: 0; transform: rotate(-1.5deg) translateY(3px); }
  to { opacity: 1; transform: rotate(0) translateY(0); }
}

@keyframes pm-stamp {
  from { opacity: 0; transform: scale(.45) rotate(-8deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@media (max-width: 720px) {
  #pageroot[data-page="play"] .public-moment,
  #pageroot[data-page="about"] .public-moment,
  #pageroot[data-page="week"] .public-moment,
  #pageroot:is([data-page="terms"], [data-page="privacy"]) .public-moment {
    float: none;
    width: 146px;
    margin: 8px 0 10px;
  }

  #pageroot:is([data-page="terms"], [data-page="privacy"]) .public-moment {
    width: 98px;
    margin-top: 4px;
  }

  body[data-public-page="login"] .public-moment {
    width: 136px;
    margin: -4px auto 10px;
  }

  body[data-public-page="error"] .public-moment {
    width: 146px;
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-moment *,
  .public-moment svg {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}