@font-face { font-family: 'Fraunces'; src: url('assets/fonts/fraunces-normal.woff2') format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('assets/fonts/fraunces-italic.woff2') format('woff2'); font-weight: 300 600; font-style: italic; font-display: swap; }

:root {
  --paper: #f3ece0;
  --ink: #3b3a33;
  --ink-soft: #5d5a4e;
  --cream: #fbf6ec;
  --terracotta: #b8674a;
  --night: #1d2440;
  --shadow: 0 1px 2px rgba(40, 30, 15, .28), 0 0 18px rgba(40, 30, 15, .18);
  --lift: 0 1px 1px rgba(255, 250, 240, .5);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); overflow: hidden; overscroll-behavior: none; }
body { font-family: 'Fraunces', Georgia, serif; color: var(--ink); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none; -webkit-user-select: none; }
.stage { position: fixed; inset: 0; overflow: hidden; }
/* Made for a phone held upright: on wider screens the story keeps its portrait column. */
@media (min-aspect-ratio: 3/4) { html, body { background: #e9e0d0; } .stage { left: 50%; right: auto; width: min(100vw, 62.5vh); transform: translateX(-50%); box-shadow: 0 0 60px rgba(60, 40, 20, .18); } }
.paper { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Opening: names and date on the envelope, a swallow to touch. */
.opening { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.opening-copy { position: absolute; left: 0; right: 0; top: 13.5%; text-align: center; transition: opacity .9s ease, transform 1.2s ease; }
.kicker { margin: 0 0 .7em; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; font-weight: 400; color: var(--ink-soft); }
.names { margin: 0; font-weight: 300; font-size: clamp(34px, 10.4vw, 52px); line-height: 1.05; letter-spacing: -.01em; font-variation-settings: 'opsz' 96, 'SOFT' 100; }
.names em, .copy-names em, .card-names em { font-style: italic; font-weight: 300; color: var(--terracotta); padding: 0 .08em; }
.date { margin: .6em 0 0; font-style: italic; font-size: 17px; font-weight: 350; color: var(--ink-soft); }
.seal-button { pointer-events: auto; position: absolute; left: 50%; top: 66%; width: 40vw; max-width: 190px; aspect-ratio: 1; transform: translate(-50%, -50%); border: 0; background: transparent; cursor: pointer; border-radius: 50%; }
.seal-button:focus-visible { outline: 1px solid rgba(60, 50, 40, .5); outline-offset: 6px; }
.seal-label { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; } }
body:not([data-state="sealed"]) .seal-button { pointer-events: none; }
body:not([data-state="sealed"]) .seal-label { opacity: 0; transition: opacity .4s; animation: none; }
body[data-state="opening"] .opening-copy, body[data-state="journey"] .opening-copy, body[data-state="card"] .opening-copy { opacity: 0; transform: translateY(-3vh); pointer-events: none; }
body[data-state="journey"] .opening, body[data-state="card"] .opening { visibility: hidden; }
body[data-state="loading"] .opening-copy { opacity: 0; }

/* Copy written by the scroll: each word's --w is set by main.js (0..1). */
.copy-layer { position: absolute; inset: 0; pointer-events: none; }
.copy { position: absolute; left: 0; right: 0; text-align: center; padding: 0 28px; visibility: hidden; }
.copy.on { visibility: visible; }
.copy .w { display: inline-block; opacity: var(--w, 0); transform: translateY(calc((1 - var(--w, 0)) * 9px)); filter: blur(calc((1 - var(--w, 0)) * 3px)); }
.copy p, .copy h2 { margin: 0; }
.copy { color: #2f2d27; text-shadow: 0 0 12px rgba(255, 249, 236, .9), 0 0 2px rgba(255, 249, 236, .8); isolation: isolate; }
/* A soft daylight behind the words, so they read on any paper. */
.copy::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(118vw, 520px); height: calc(100% + 120px); transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 249, 236, .62), rgba(255, 249, 236, .3) 55%, rgba(255, 249, 236, 0)); z-index: -1; opacity: var(--halo, 0); }
.copy[data-reading="nomi"] { top: 17%; }
.copy[data-reading="chiesa"] { top: 7%; }
.copy[data-reading="data"] { top: 40%; }
.copy[data-reading="foce"] { top: 12%; }
.copy[data-reading="tramonto"] { top: 13%; }
.copy[data-reading="cena"] { top: 12%; }
.copy[data-reading="festa"] { top: 14%; }
.copy-names { font-weight: 300; font-size: clamp(36px, 11vw, 56px); line-height: 1.04; font-variation-settings: 'opsz' 110, 'SOFT' 100; }
.copy-date { margin-top: .55em !important; font-style: italic; font-size: 18px; font-weight: 350; }
.copy-title { font-weight: 300; font-size: clamp(30px, 9vw, 44px); line-height: 1.08; font-variation-settings: 'opsz' 90, 'SOFT' 100; }
.copy-place { margin-top: .7em !important; font-style: italic; font-size: 18px; line-height: 1.35; font-weight: 350; }
.copy-place span { font-style: normal; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }
.copy-small { font-style: italic; font-size: 17px; font-weight: 350; }
.copy-big { margin-top: .25em !important; font-size: clamp(40px, 13vw, 64px); font-weight: 300; letter-spacing: .02em; font-variation-settings: 'opsz' 144, 'SOFT' 50; }

/* The final card. */
.card { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
body[data-card-ready="true"] .card { opacity: 1; pointer-events: auto; }
.card-copy { width: min(76vw, 340px); text-align: center; padding: 92px 22px 26px; color: var(--ink); }
.card-names { margin: 0; font-weight: 300; font-size: clamp(34px, 10vw, 46px); line-height: 1.05; font-variation-settings: 'opsz' 96, 'SOFT' 100; }
.card-date { margin: .55em 0 1.2em; font-style: italic; font-size: 18px; }
.card-places { margin: 0; display: grid; gap: 14px; }
.card-places dt { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px; }
.card-places dd { margin: 0; font-size: 16px; line-height: 1.35; }
.card-note { margin: 1.4em 0 1.2em; font-style: italic; font-size: 14px; color: var(--ink-soft); }
.card-actions { display: grid; gap: 10px; justify-items: center; }
.card-button { display: inline-block; padding: 11px 20px; border: 1px solid rgba(59, 58, 51, .5); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; background: rgba(251, 246, 236, .55); }
.card-again { border: 0; background: none; font: inherit; font-style: italic; font-size: 14px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Scroll hint: a thread that draws itself upward, and a word. */
.scroll-hint { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 8px; opacity: 0; transition: opacity .6s ease; pointer-events: none; color: #2f2d27; text-shadow: 0 0 10px rgba(255, 249, 236, .95), 0 0 2px rgba(255, 249, 236, .9); }
body[data-cue] .scroll-hint { opacity: 0; }
body[data-cue="start"] .scroll-hint, body[data-cue="continue"] .scroll-hint { opacity: 1; }
.scroll-thread { width: 1px; height: 38px; background: linear-gradient(to top, transparent, currentColor); transform-origin: bottom; animation: thread 2.6s ease-in-out infinite; }
@keyframes thread { 0% { transform: scaleY(0); opacity: 0; } 40% { opacity: 1; } 70% { transform: scaleY(1); opacity: .9; } 100% { transform: scaleY(1) translateY(-10px); opacity: 0; } }
.scroll-label { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }

.sound-toggle { position: absolute; right: calc(14px + env(safe-area-inset-right)); top: calc(14px + env(safe-area-inset-top)); width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(251, 246, 236, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; gap: 3px; opacity: 0; transition: opacity .6s; cursor: pointer; }
body[data-state="journey"] .sound-toggle, body[data-state="card"] .sound-toggle { opacity: 1; }
.sound-toggle span { width: 2px; height: 12px; background: var(--ink); border-radius: 1px; animation: eq 1.4s ease-in-out infinite; }
.sound-toggle span:nth-child(2) { animation-delay: -.4s; } .sound-toggle span:nth-child(3) { animation-delay: -.8s; }
.sound-toggle[aria-pressed="false"] span { animation: none; height: 3px; }
@keyframes eq { 50% { transform: scaleY(.4); } }
body[data-night="true"] .sound-toggle span { background: var(--cream); }

.fallback { position: absolute; inset: auto 24px 40% 24px; text-align: center; font-style: italic; }
@media (prefers-reduced-motion: reduce) { .copy .w { transform: none; filter: none; } .seal-label { animation: none; } }