/* ============================================================
   CANOPY — SOFT AFFICHE ATMOSPHERE
   ------------------------------------------------------------
   Bauhaus structure on warm paper: shared ground, soft radii,
   café washes, and a quiet grain so home and options share
   one continuous room.
   Loads after theme-affiche.css.
   ============================================================ */

:root {
  --ground: #fdf0e8;
  --surface: #fff8f2;
  --surface-deep: #fbf2dd;
  --radius-ui: 0.75rem;
  --radius-card: 0.9rem;
  --radius-chip: 0.65rem;
  --shadow-soft: 0 1px 10px rgba(84, 41, 22, 0.06);
  --line-soft: 1.5px solid color-mix(in srgb, var(--espresso) 22%, transparent);
  --ease-alive: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Warm paper — one room for home and options */
body {
  background: var(--ground);
  background-attachment: fixed;
  color: var(--espresso);
  transition: background-color 0.45s var(--ease-alive);
}

/* Quiet paper grain — extends the blob-canvas texture to the whole app */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
  mix-blend-mode: multiply;
}

.canopy-top,
.ground,
.focus-bar {
  background: transparent;
}

/* Crisis is its own opaque room — never let the app bleed through */
.crisis {
  background: #fdf0e8 !important;
  background-image: none !important;
}
body.has-crisis .sos {
  display: none !important;
}

/* Full-screen takeovers share the warm paper (opaque so home doesn't bleed) */
.themes-overlay {
  background: var(--ground);
}

/* Shared soft-geometric card language */
.ui-card,
.res-card,
.cat-sticker,
.refine-opt,
.tree-choice,
.assist-choice,
.assist-card,
.line-card,
.confirm-box,
.about-box:not(.menu-box),
.also-chip,
.act,
.expect,
.crisis-gentle {
  border-radius: var(--radius-card);
}

.pill-btn:not(.menu-toggle),
.guided-btn,
.focus-query,
.focus-back,
.blob-label,
.blob-chip,
.also-chip,
.blob-ai-btn,
.deck-nav-btn,
.living-home,
.enter-hint {
  border-radius: var(--radius-ui);
}

/* Continuity: browsing never swaps paper color */
body.is-browsing .ground,
body.has-blobs .blob-results,
body.has-deck .deck-root,
body.has-strip .assist-strip {
  background-color: transparent;
}

/* Soft settle for options appearing */
@keyframes softSettle {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}
/* Alias older leafSettle name used across fluide */
@keyframes leafSettle {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
  body::before {
    opacity: 0.04;
  }
  @keyframes softSettle {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes leafSettle {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}