/* melloThought's own world: its ground, its amber, its face.
   Ported from the app's source by way of the 040 board —
   woven_background.dart (the weave), cat.dart (Des), breathing_dot.dart,
   deposit_sequence.dart (emerge, hold, ripple). Values noted where they
   came from; anything invented for the web is marked WEB. */

.mt {
  --ground: var(--mt-ground);
  font-family: var(--serif-app);
  color: var(--mt-ink);
  /* the weave: a 4px cell, five crossings (weaveTile, cell 4) */
  background-color: var(--mt-ground);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect width='2' height='1' fill='%23fff' fill-opacity='.11'/%3E%3Crect x='2' y='2' width='1' height='2' fill='%23fff' fill-opacity='.08'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23b4b4b4' fill-opacity='.05'/%3E%3Crect x='2' width='1' height='2' fill='%23fff' fill-opacity='.045'/%3E%3Crect y='2' width='2' height='1' fill='%23fff' fill-opacity='.035'/%3E%3C/svg%3E");
  background-size: 4px 4px;
  font-size-adjust: from-font;

  /* motion splits (040): what moves, and what speaks */
  --moves: 1;
  --speaks: 1;
}
@media (prefers-reduced-motion: reduce) {
  /* the app's first test values, 040: moves 10%, speaks 70% */
  .mt { --moves: .1; --speaks: .7; }
}
.mt ::selection { background: rgba(200, 130, 10, .45); color: #fff8ee; }
.mt :focus-visible { outline-color: var(--mt-amber); }

/* the way home, from anywhere: sticky, over a fade of the ground */
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: env(safe-area-inset-top, 0px) 16px 16px; margin-bottom: -16px;
  background: linear-gradient(var(--mt-ground) 62%, rgba(11, 11, 11, 0));
}
.home, .top-link {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px;
  font-family: var(--serif-studio); font-size: 1rem; letter-spacing: .1em;
  color: var(--mt-faint); text-decoration: none; transition: color .5s ease;
}
.home { margin-left: -4px; }
.top-link { margin-right: -4px; font-size: .95rem; }
.home:hover, .home:focus-visible, .top-link:hover, .top-link:focus-visible { color: var(--mt-ink); }

/* ── the surface ──────────────────────────────────────────────────── */
.surface {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  justify-items: center;
  margin-top: -48px;
  padding: 64px 16px 0;
}
.mt-name {
  margin: 0; font-weight: 400; font-size: .9rem; letter-spacing: .22em;
  color: var(--mt-faint);
  animation: mt-fade 1.4s ease-out 1s both;
}

.mt-head { text-align: center; }
.mt-line {
  margin: 1.1rem 0 0; font-size: clamp(1.05rem, 3.6vw, 1.25rem); line-height: 1.55;
  color: var(--mt-mute); text-wrap: balance;
  animation: mt-fade 1.6s ease-out 1.5s both;
}
.stage {
  position: relative; align-self: center;
  width: min(100%, 26rem); min-height: 13rem;
  display: grid; place-items: center;
}
/* the draft: centred, 24 when short and 19 when long (words(): 60 chars) */
.thought {
  grid-area: 1 / 1;
  width: 100%; max-height: 50svh; resize: none; overflow-y: auto; scrollbar-width: none;
  border: 0; outline: 0; background: transparent; padding: 0;
  font: 400 24px/1.45 var(--serif-app);
  color: rgba(232, 223, 209, .88); caret-color: var(--mt-amber);
  text-align: center; field-sizing: content;
  transition: opacity .3s ease;
}
.thought.long { font-size: 19px; }
.thought:focus-visible { outline: 0; }

/* a surfaced thought, with its date (dateBlock) */
.shown {
  grid-area: 1 / 1; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .6s ease;
}
.stage[data-state="shown"] .shown { opacity: 1; }
.shown-words { margin: 0; text-align: center; font-size: 24px; line-height: 1.45; color: rgba(232, 223, 209, .88); text-wrap: pretty; overflow-wrap: anywhere; }
.shown-words.long { font-size: 19px; }
.shown-date { display: flex; flex-direction: column; align-items: center; margin-top: 16px; font-size: 14px; }
.rule { width: 40%; height: 1px; background: rgba(200, 130, 10, .2); margin-bottom: 20px; min-width: 7rem; }
.dm .d, .y { color: rgba(255, 255, 255, .35); }
.dm .m { color: rgba(232, 223, 209, .62); }
.y { margin-top: 4px; }

/* the hint dot: 14px, breathing over 6.4s between .42 and .78, up to 1.2× */
.dot {
  grid-area: 1 / 1; position: relative;
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .4s ease, translate .5s var(--ease-kb);
}
/* WEB: when the caret arrives, the dot steps down to make room for it */
.stage[data-state="empty"]:has(.thought:focus) .dot { translate: 0 52px; }
.dot-core {
  width: 14px; height: 14px; border-radius: 50%; background: var(--mt-amber);
  animation: hint 6.4s var(--ease-io) infinite;
}
@keyframes hint {
  0%, 100% { opacity: .42; transform: scale(1); }
  50%      { opacity: .78; transform: scale(1.2); }
}
.stage:not([data-state="empty"]) .dot { opacity: 0; pointer-events: none; }
.stage[data-state="empty"] .thought { caret-color: transparent; }
.stage[data-state="empty"] .thought:focus { caret-color: var(--mt-amber); }
/* a returned thought is read, not written into: no caret over it */
.stage[data-state="shown"] .thought, .stage[data-state="shown"] .thought:focus,
.stage.hinting .thought, .stage.hinting .thought:focus { caret-color: transparent; }

/* the hint (WEB — the site may speak where the app may not): typed out in
   ghost ink, held, erased back to the breathing dot */
.ghost {
  grid-area: 1 / 1; margin: 0; pointer-events: none;
  font-size: 22px; line-height: 1.45; text-align: center;
  color: rgba(232, 223, 209, .46); font-style: normal;
}
.ghost-caret {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.16em;
  background: var(--mt-amber); opacity: 0;
}
.stage.hinting .ghost-caret { opacity: .8; }
.stage.hinting .dot { opacity: 0; }

.ripple {
  grid-area: 1 / 1; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--mt-amber); opacity: 0; pointer-events: none;
}

.more {
  /* there is more below: a thread of amber that drips once in a while */
  width: 1px; height: 30px; margin: -8px 0 10px;
  background: linear-gradient(rgba(200, 130, 10, 0), rgba(200, 130, 10, .7));
  transform-origin: top; animation: drip 3.2s var(--ease-io) 2.6s infinite both;
}
@keyframes drip {
  0%   { transform: scaleY(0); opacity: 1; }
  55%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(10px); opacity: 0; }
}
@supports (animation-timeline: scroll()) {
  .more { animation: drip 3.2s var(--ease-io) 2.6s infinite both, gone linear both; animation-timeline: auto, scroll(); animation-range: normal, 0 120px; }
  @keyframes gone { to { visibility: hidden; opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .more { animation: none; transform: none; } }

.keep-note {
  margin: 0 0 18px; font-size: .8rem; letter-spacing: .02em; color: var(--mt-faint);
  text-align: center; max-width: 22rem;
  transition: opacity .6s ease;
}

/* Des — 58px (CAT), bottom-centred like the app; breathing 3.9s, ±3.5%, .91 ± .09 */
.des-wrap { position: relative; width: 58px; height: 58px; margin: 6px 0 14px; }
.des { view-transition-name: mark; width: 58px; height: 58px; overflow: visible; }
.des-body { transform-origin: 30px 30px; animation: des-breath 3.9s ease-in-out infinite; }
@keyframes des-breath {
  0%, 100% { transform: scale(1);     opacity: .91; }
  25%      { transform: scale(1.035); opacity: 1; }
  75%      { transform: scale(.965);  opacity: .82; }
}
.halo {
  position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px 0 0 -65px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(200, 130, 10, .30) 0%, rgba(200, 130, 10, 0) 64%);
}

/* ── the notes ─────────────────────────────────────────────────────── */
.notes {
  width: min(100%, 36rem); margin: 0 auto;
  padding: 18vh 16px 12vh;
  display: grid; gap: clamp(4.5rem, 16vh, 9rem);
}
.note h2 {
  margin: 0 0 .9rem; font-weight: 400; font-size: 1.05rem; letter-spacing: .08em;
  color: var(--mt-amber);
}
.note p { margin: 0; font-size: 1.2rem; line-height: 1.6; color: rgba(232, 223, 209, .86); text-wrap: pretty; }
.note p + p { margin-top: 1.1rem; }
.inline {
  color: var(--mt-ink); text-decoration: none; font-size: 1rem; letter-spacing: .04em;
  border-bottom: 1px solid rgba(200, 130, 10, .55); padding-bottom: 2px;
  transition: border-color .4s ease, color .4s ease;
}
.inline:hover, .inline:focus-visible { color: #fff8ee; border-color: var(--mt-amber); }

.status {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: .55rem;
  font-size: .9rem; letter-spacing: .14em; color: var(--mt-mute);
}
.join::after { content: " ↗"; font-size: .85em; color: var(--mt-amber); }
.status span + span::before {
  content: ""; display: block; width: 4px; height: 4px; margin: 0 auto .55rem;
  border-radius: 50%; background: rgba(200, 130, 10, .6);
}

/* each note arrives as you reach it (WEB: the page's version of arrival) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .note, .status {
      animation: note-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 32%;
    }
  }
}
@keyframes note-in { from { opacity: 0; transform: translateY(28px); } }

.foot {
  display: flex; justify-content: center; gap: .9rem;
  padding: 0 16px max(28px, env(safe-area-inset-bottom));
  font-family: var(--serif-studio); font-size: .9rem; letter-spacing: .12em; color: var(--mt-faint);
}
.foot a { text-decoration: none; padding: 6px 2px; transition: color .4s ease; }
.foot a:hover, .foot a:focus-visible { color: var(--mt-ink); }

@keyframes mt-fade { from { opacity: 0; } }

/* ── the policy page ───────────────────────────────────────────────── */
.policy {
  width: min(100%, 38rem); margin: 0 auto;
  padding: 40px 16px 5rem;
}
.policy-head { display: flex; align-items: center; gap: 14px; margin-bottom: 2.6rem; }
.policy-head .des { width: 40px; height: 40px; flex: none; }
.policy h1 { margin: 0; font-weight: 400; font-size: 1.9rem; letter-spacing: .01em; line-height: 1.2; }
.policy h1 small { display: block; font-size: .8rem; letter-spacing: .22em; color: var(--mt-faint); margin-bottom: .35rem; }
.policy .meta { font-size: .85rem; letter-spacing: .06em; color: var(--mt-faint); margin: -1.6rem 0 2.6rem 54px; }
.lede {
  font-size: 1.35rem; line-height: 1.55; margin: 0 0 3rem; color: var(--mt-ink);
  padding-left: 1rem; border-left: 1px solid rgba(200, 130, 10, .55);
}
.policy h2 { margin: 2.8rem 0 .8rem; font-weight: 400; font-size: 1.02rem; letter-spacing: .08em; color: var(--mt-amber); }
.policy p, .policy li { font-size: 1.08rem; line-height: 1.65; color: rgba(232, 223, 209, .86); text-wrap: pretty; }
.policy p { margin: 0 0 1rem; }
.policy ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.policy li { margin-bottom: .55rem; }
.policy li::marker { color: rgba(200, 130, 10, .7); }
.policy strong { font-weight: 400; color: var(--mt-ink); }
.policy a:not(.home) { color: var(--mt-ink); text-decoration-color: rgba(200, 130, 10, .6); text-underline-offset: 3px; }
.policy a:not(.home):hover { text-decoration-color: var(--mt-amber); }
.policy .aside { font-size: .95rem; color: var(--mt-mute); }
.policy .end { margin-top: 3.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .9rem; color: var(--mt-faint); }

.policy .join { font-size: 1.1rem; }