/* ============================================================
   THEME 1 — "atelier"
   Aquarela atelier: warm handmade-paper art-book chrome.
   Scope: everything under body[data-theme="atelier"].
   Strategy: never touch fragment geometry/colors; lay a single
   multiply-blended paper overlay above each card (pointer-events
   none) that warms flat whites toward ivory, adds faint grain,
   fiber, and a soft page vignette; saturated full-color sheets keep
   only grain/fiber. Type rhythm relaxed; nav glass warmed.
   ============================================================ */

body[data-theme="atelier"] {
  background: #f3ecdd;
}

/* --- slower, printier page turn --- */
body[data-theme="atelier"] .card {
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
body[data-theme="atelier"] .card.on {
  transition: opacity 0.7s ease;
}

/* --- the paper: one overlay, multiplied over the whole card ---
   Layers (top to bottom):
   1. fiber threads      — two barely-there long linear weaves
   2. grain speckle      — tight repeating radial dots
   3. wet-edge band wash — a whisper of pigment pooling 2–3% under
                           the 22cqh band line, like a watercolor
                           edge that dried unevenly
   4. ivory field        — the warm #faf6ee cast that replaces
                           flat white via multiply
   5. page vignette      — soft warm darkening at the sheet edges */
body[data-theme="atelier"] .card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: multiply;
  background:
    /* 1 — fiber, slight diagonal weave */
    repeating-linear-gradient(93deg,
      rgba(120, 96, 62, 0.028) 0px, rgba(120, 96, 62, 0) 2px,
      rgba(120, 96, 62, 0) 5px, rgba(120, 96, 62, 0.02) 7px,
      rgba(120, 96, 62, 0) 9px),
    repeating-linear-gradient(2deg,
      rgba(140, 112, 76, 0.022) 0px, rgba(140, 112, 76, 0) 3px,
      rgba(140, 112, 76, 0) 8px, rgba(140, 112, 76, 0.016) 10px,
      rgba(140, 112, 76, 0) 13px),
    /* 2 — grain speckle */
    repeating-radial-gradient(circle at 17% 31%,
      rgba(105, 84, 56, 0.035) 0px, rgba(105, 84, 56, 0) 1.5px,
      rgba(105, 84, 56, 0) 4px),
    repeating-radial-gradient(circle at 73% 64%,
      rgba(105, 84, 56, 0.03) 0px, rgba(105, 84, 56, 0) 1px,
      rgba(105, 84, 56, 0) 3px),
    /* 3 — warm ivory cast over the whole sheet */
    linear-gradient(160deg,
      rgba(250, 246, 238, 1) 0%,
      rgba(248, 242, 230, 1) 55%,
      rgba(245, 237, 222, 1) 100%),
    /* 4 — vignette (painted into the multiply stack as a slightly
       deeper ivory toward the edges) */
    radial-gradient(ellipse 120% 105% at 50% 42%,
      rgba(255, 255, 255, 0) 62%,
      rgba(163, 133, 92, 0.07) 92%,
      rgba(140, 110, 72, 0.11) 100%);
}

/* On the saturated full-color sheets (blue cover, blue/teal/pink
   fields, red back) the ivory multiply cast only dulls the pigment
   without reading as paper. There the overlay keeps just fiber and
   grain — texture, no color tax. */
body[data-theme="atelier"] .card:has(.c02)::after,
body[data-theme="atelier"] .card:has(.c03)::after,
body[data-theme="atelier"] .card:has(.c04)::after,
body[data-theme="atelier"] .card:has(.c05)::after,
body[data-theme="atelier"] .card:has(.c14)::after,
body[data-theme="atelier"] .card:has(.c24)::after {
  background:
    repeating-linear-gradient(93deg,
      rgba(120, 96, 62, 0.028) 0px, rgba(120, 96, 62, 0) 2px,
      rgba(120, 96, 62, 0) 5px, rgba(120, 96, 62, 0.02) 7px,
      rgba(120, 96, 62, 0) 9px),
    repeating-linear-gradient(2deg,
      rgba(140, 112, 76, 0.022) 0px, rgba(140, 112, 76, 0) 3px,
      rgba(140, 112, 76, 0) 8px, rgba(140, 112, 76, 0.016) 10px,
      rgba(140, 112, 76, 0) 13px),
    repeating-radial-gradient(circle at 17% 31%,
      rgba(105, 84, 56, 0.035) 0px, rgba(105, 84, 56, 0) 1.5px,
      rgba(105, 84, 56, 0) 4px),
    repeating-radial-gradient(circle at 73% 64%,
      rgba(105, 84, 56, 0.03) 0px, rgba(105, 84, 56, 0) 1px,
      rgba(105, 84, 56, 0) 3px);
}

/* diffuse top-light sheen — soft-light blend, lifts the page like
   a softly lit print; extremely quiet */
body[data-theme="atelier"] .card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(ellipse 90% 60% at 50% 8%,
      rgba(255, 252, 244, 0.5) 0%,
      rgba(255, 252, 244, 0) 60%);
}

/* --- typographic rhythm: relaxed, editorial --- */
body[data-theme="atelier"] .card-inner p {
  line-height: 1.62;
  letter-spacing: 0.012em;
}
body[data-theme="atelier"] .card-inner li {
  line-height: 1.58;
  letter-spacing: 0.01em;
}

/* --- ink flip on saturated grounds ---
   The cover (.c02, mid blue) and the "O que é" sheet (.c04, blue)
   set dark navy ink that goes muddy on their pigment. On those
   grounds the atelier ink flips to the light cream variant. */
body[data-theme="atelier"] .c02 .c02-tagline,
body[data-theme="atelier"] .c02 .c02-version {
  color: #f7f2e4;
}
body[data-theme="atelier"] .c04 .c04-body {
  color: #f5f1e6;
}
body[data-theme="atelier"] .c04 .c04-credit {
  color: rgba(255, 251, 240, 0.88);
}

/* --- outline capsule: quiet warm glass ---
   Ghosted rather than opaque cream, so it belongs equally to the
   paper sheets and the blue/teal/pink pigment cards; the warmth
   lives in the border, shadow and ink, not in a beige slab. */
body[data-theme="atelier"] #outline {
  background: linear-gradient(135deg,
    rgba(253, 249, 240, 0.5),
    rgba(251, 246, 234, 0.28) 40%,
    rgba(249, 243, 229, 0.18) 60%,
    rgba(253, 249, 240, 0.38));
  -webkit-backdrop-filter: blur(14px) saturate(0.9) brightness(1.08);
  backdrop-filter: blur(14px) saturate(0.9) brightness(1.08);
  border: 1px solid rgba(236, 222, 196, 0.55);
  box-shadow:
    0 14px 44px -12px rgba(92, 68, 36, 0.3),
    inset 0 1.5px 1px rgba(255, 252, 244, 0.8),
    inset 0 -1px 1px rgba(255, 250, 238, 0.35),
    inset 1.5px 0 1px rgba(255, 250, 238, 0.45),
    inset -1.5px 0 1px rgba(255, 250, 238, 0.45);
}
/* fade the scrolled list at the capsule's top and bottom edges so
   no item is ever hard-cut mid-glyph */
body[data-theme="atelier"] #outline {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 16px, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0, #000 16px, #000 calc(100% - 20px), transparent 100%);
}
body[data-theme="atelier"] #outline a {
  color: #33291d;
  text-shadow: 0 1px 2px rgba(255, 252, 244, 0.45);
}
body[data-theme="atelier"] #outline .sec {
  color: #4d3e2a;
}

/* --- mute button: docked bottom-right, clear of the capsule --- */
body[data-theme="atelier"] #mute, body[data-theme="atelier"] #vmute {
  left: auto;
  right: clamp(14px, 2.2vw, 38px);
  bottom: clamp(14px, 3vh, 34px);
  opacity: 1;
  background: linear-gradient(135deg,
    rgba(253, 249, 240, 0.5),
    rgba(250, 245, 232, 0.26));
  -webkit-backdrop-filter: blur(14px) saturate(0.9) brightness(1.08);
  backdrop-filter: blur(14px) saturate(0.9) brightness(1.08);
  border: 1px solid rgba(236, 222, 196, 0.55);
  border-radius: 12px;
  box-shadow:
    0 8px 26px -8px rgba(92, 68, 36, 0.3),
    inset 0 1.5px 1px rgba(255, 252, 244, 0.8);
  color: #33291d;
}
body[data-theme="atelier"] #mute:hover, body[data-theme="atelier"] #vmute:hover {
  opacity: 1;
  border-color: rgba(206, 184, 146, 0.9);
  color: #1f170d;
}

/* --- theme tag pill, warmed to match --- */
body[data-theme="atelier"] #themetag {
  background: rgba(250, 245, 234, 0.9);
  color: #5c4a32;
}