/* ==========================================================================
   Examples: four demonstration websites, each shown as the opening screen of
   a real site — its own voice, its own way of moving — and captioned like a
   plate in a book. They stack: the next one slides over the last.

   --enter (0 → 1) and --cover (0 → 1) come from examples.js.
   ========================================================================== */
body.page-examples { background: var(--plaster); }

.ex-head { padding: calc(var(--bar) + clamp(3rem, 12vh, 8rem)) var(--gutter) clamp(2.5rem, 7vh, 5rem); display: grid; gap: 1.4rem; }
.ex-head__title { font-size: var(--step-5); font-weight: 500; letter-spacing: -0.05em; line-height: 0.96; }
.ex-head__title > span:nth-child(2) { color: var(--muted); }
.ex-head__lead { max-width: 40ch; font-size: var(--step-1); line-height: 1.42; color: var(--muted); letter-spacing: -0.01em; }

.ex-stack { position: relative; }
/* Each example is a plate set in the page's margins: Wizo's bar stays on the plaster above it. */
.ex { --enter: 1; --cover: 0; position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: var(--bar) var(--gutter) 0; background: var(--plaster); overflow: hidden; }
.ex__site { position: relative; overflow: hidden; container-type: inline-size; color: #fff; }
.ex__photo { position: absolute; inset: -4% 0; }
.ex__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50%) 50%;
  transform: scale(calc(1.1 - var(--enter) * 0.1 + var(--cover) * 0.05)) translateY(calc(var(--cover) * -3%)); filter: brightness(calc(1 - var(--cover) * 0.35)); will-change: transform; }

/* The plate's caption, in Wizo's own voice. */
.ex__caption { display: flex; align-items: center; gap: 0.4rem 1.6rem; flex-wrap: wrap; min-height: 3.4rem; padding: 0.7rem 0; background: var(--plaster); color: var(--ink); }
.ex__caption b { color: var(--fg); font-weight: 600; }
.ex__caption-name { font-weight: 550; letter-spacing: -0.02em; }
.ex__caption-demo { margin-left: auto; color: var(--accent-text); }

/* What every example site shares: a small navigation, a few words, one action. */
.ex__nav { position: absolute; z-index: 2; inset: clamp(1.1rem, 3.5vh, 2rem) clamp(1.1rem, 3cqw, 2.6rem) auto; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.92rem; }
.ex__links { display: flex; gap: 1.6rem; }
.ex__words { --pad: clamp(1.1rem, 3cqw, 2.6rem); position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(1.4rem, 5.5vh, 3.4rem); display: grid; gap: 1rem; justify-items: start; }
.ex__line { font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; font-size: clamp(2.4rem, 7cqw, 6.4rem); max-width: 14ch; }
.ex__note { font-size: 0.95rem; }
.ex__action { display: inline-flex; gap: 0.7em; align-items: center; min-height: 2.9rem; padding: 0.6rem 1.2rem; font-size: 0.95rem; font-weight: 550; }
.ex__action i { font-style: normal; }
/* Words arrive when the site does. */
.ex__words > * { opacity: 0; transform: translateY(1.6rem); transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out); }
.ex.is-seen .ex__words > * { opacity: 1; transform: none; }
.ex.is-seen .ex__words > :nth-child(2) { transition-delay: 0.08s; }
.ex.is-seen .ex__words > :nth-child(3) { transition-delay: 0.16s; }
.ex.is-seen .ex__words > :nth-child(4) { transition-delay: 0.24s; }

/* 01 — Casa Salina: serene. Centred, airy capitals, light weights. */
.ex--salina .ex__nav { justify-content: center; gap: 3rem; font-stretch: 84%; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.72rem; color: #4a3424; }
.ex--salina .ex__brand { order: 0; font-weight: 600; letter-spacing: 0.34em; }
.ex--salina .ex__site { color: #fffdf8; }
.ex--salina .ex__site::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgb(60 34 18 / 0.5)); pointer-events: none; }
.ex--salina .ex__words { justify-items: center; text-align: center; z-index: 1; }
.ex--salina .ex__line { font-weight: 400; letter-spacing: -0.035em; max-width: 16ch; }
.ex--salina .ex__note { font-stretch: 84%; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem; font-weight: 600; }
.ex--salina .ex__action { border-bottom: 1px solid currentColor; padding-inline: 0.2rem; min-height: 2.4rem; }

/* 02 — Braise: cinematic. Dark, one big warm line, the hearth breathing. */
.ex--braise .ex__site { color: #f6e7d2; }
.ex--braise .ex__site::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(8 5 3 / 0.72), transparent 62%), linear-gradient(0deg, rgb(8 5 3 / 0.6), transparent 45%); pointer-events: none; }
.ex--braise .ex__nav, .ex--braise .ex__words { z-index: 2; }
.ex--braise .ex__brand { font-weight: 700; font-stretch: 78%; text-transform: uppercase; letter-spacing: 0.12em; font-size: 1.15rem; }
.ex--braise .ex__line { font-size: clamp(2.8rem, 9cqw, 8.6rem); letter-spacing: -0.055em; max-width: 9ch; }
.ex--braise .ex__note { color: #e0a569; }
.ex--braise .ex__action { background: #e0782e; color: #1a0d05; }
.ex__ember { position: absolute; z-index: 1; left: calc(var(--focus) - 22%); top: 18%; width: 44%; aspect-ratio: 1; background: radial-gradient(closest-side, rgb(255 140 50 / 0.34), transparent 70%); mix-blend-mode: screen; animation: ember 3.4s var(--ease-in-out) infinite; pointer-events: none; }
@keyframes ember { 0%, 100% { opacity: 0.55; transform: scale(0.96); } 40% { opacity: 1; transform: scale(1.04); } 70% { opacity: 0.7; transform: scale(1); } }

/* 03 — Dahlia: bold. One giant word crossing the wall, colour as punctuation. */
.ex--dahlia .ex__site { color: #fbe9d7; }
.ex--dahlia .ex__brand { font-weight: 700; }
.ex__giant { position: absolute; left: 50%; top: 50%; white-space: nowrap; font-weight: 700; font-stretch: 75%; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.8;
  font-size: clamp(7rem, 31cqw, 38rem); color: #f7d9c4; mix-blend-mode: soft-light; opacity: 0.9;
  transform: translate(calc(-38% - var(--enter) * 12% - var(--cover) * 6%), -62%); will-change: transform; pointer-events: none; }
.ex--dahlia .ex__words { left: auto; width: min(100% - 2 * var(--pad), 26rem); justify-items: start; }
.ex--dahlia .ex__line { font-size: clamp(1.6rem, 3.2cqw, 2.6rem); letter-spacing: -0.035em; line-height: 1.05; max-width: none; }
.ex--dahlia .ex__note { font-stretch: 84%; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 600; }
.ex--dahlia .ex__action { background: #fbe9d7; color: #7c1f1a; }

/* 04 — Studio Alma: clear. Ink on the photograph's own white wall, facts in a grid. */
.ex--alma .ex__site { color: #1d2326; }
.ex--alma .ex__brand { font-weight: 600; letter-spacing: -0.02em; font-size: 1.05rem; }
.ex--alma .ex__words { bottom: auto; top: 50%; transform: translateY(-46%); width: min(100% - 2 * var(--pad), 30rem); }
.ex--alma .ex__line { font-size: clamp(2.6rem, 6cqw, 5.2rem); letter-spacing: -0.05em; }
.ex--alma .ex__note { color: #55646b; }
.ex__facts { display: grid; width: 100%; border-top: 1px solid rgb(29 35 38 / 0.3); font-size: 0.92rem; }
.ex__facts li { padding: 0.6rem 0; border-bottom: 1px solid rgb(29 35 38 / 0.16); }
.ex--alma .ex__action { background: #1d2326; color: #fff; }

/* The end of the page */
.ex-next { position: relative; z-index: 1; display: grid; gap: 2rem; justify-items: start; padding: clamp(5rem, 16vh, 10rem) var(--gutter); background: var(--plaster); }
.ex-next__title { font-size: var(--step-5); font-weight: 500; letter-spacing: -0.05em; line-height: 0.96; }

/* The top bar reads on every example: light on the dark ones, ink on the pale one. */
body.page-examples .topbar { mix-blend-mode: normal; }

@media (max-width: 700px) {
  .ex__links { display: none; }
  .ex--salina .ex__nav { justify-content: flex-start; }
  .ex__caption { gap: 0.2rem 1rem; padding-block: 0.6rem; }
  .ex__caption-by { display: none; }
  .ex { padding-inline: 0.75rem; }
  .ex--alma .ex__words { top: auto; bottom: 1rem; transform: none; padding: 1.1rem; background: rgb(255 255 255 / 0.93); left: 0.8rem; right: 0.8rem; width: auto; }
  .ex--dahlia .ex__words { left: var(--pad); }
  .ex__giant { top: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .ex__words > * { opacity: 1; transform: none; }
  .ex__ember { animation: none; }
}