/* La scena della home: foto, busta, letterina */
@font-face { font-family: "Playwrite IT"; src: url("fonts/playwrite-it-moderna.woff2") format("woff2"); font-weight: 100 400; font-display: swap; }

:root {
  --hand: "Playwrite IT", "Segoe Script", cursive;
  --pen: #1f3a7a;
  --pen-soft: #5a6a90;
  --rule: rgba(62, 96, 170, .34);
  --margin: rgba(196, 52, 60, .5);
  --cream: #f7f1e2;
  --env: #f6edd9;
  --gold: #f3c969;
  --line: 34px;
  --margin-x: 26px;
  --tip: 49%;
  --post-w: min(84vw, 400px, calc((var(--app-h, 100dvh) - 322px) * .68));
  --post-ratio: 5 / 7.2;
  --lw: min(100vw - 12px, 560px);
  --turn: 0;
  --drop: 0px;
  --rise: 0px;
}

html, body.scene-page { height: 100%; background: #0d130f; }
.js body.scene-page { overflow: hidden; overscroll-behavior: none; }

.scene { color: var(--cream); }
.js .scene { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; overflow: hidden; }

/* La foto: lenta, viva, e fuori fuoco quando si apre la busta */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.sky img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.sky-sharp { transform: scale(1.08) translate3d(var(--sky-x, 0), var(--sky-y, 0), 0); transition: transform 2.4s var(--ease); animation: drift 26s ease-in-out infinite alternate; }
.sky-soft { opacity: 0; transform: scale(1.14); transition: opacity 1.3s ease; }
.sky-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 14, 10, .78) 0, rgba(8, 14, 10, .3) 34%, rgba(8, 14, 10, .12) 60%, rgba(8, 14, 10, .76) 100%); transition: background-color 1.3s ease; }
@keyframes drift { from { object-position: 44% 50%; } to { object-position: 56% 50%; } }
.s-flap .sky-soft { opacity: 1; }
.s-flap .sky-shade { background-color: rgba(8, 14, 10, .4); }
.dust { position: fixed; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }

/* Titolo */
.intro { position: relative; z-index: 2; flex: none; width: 100%; max-width: 760px; padding: max(20px, env(safe-area-inset-top)) 22px 6px; text-align: center; transition: opacity .5s ease, transform .7s var(--ease); text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
.intro h1 { font-size: clamp(2.5rem, 12vw, 5.25rem); font-style: italic; font-weight: 500; line-height: .98; letter-spacing: -.03em; }
.intro p { margin-top: 8px; font-size: 1rem; line-height: 1.35; text-wrap: balance; }
.intro .details { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 18px; margin-top: 6px; font-size: .9375rem; }
.intro .details li + li { margin: 0; }
.intro .details li + li::before { display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px -10px; }
.scene-btn { display: inline-block; margin-top: 14px; padding: 12px 22px; background: var(--wax); color: #fff; font-weight: 600; text-decoration: none; border-radius: 3px; }
.s-flap .intro, .s-flap .invite, .s-flap .pick, .s-flap .scene-foot { opacity: 0; pointer-events: none; }
.s-away .intro, .s-away .invite, .s-away .pick, .s-away .scene-foot { opacity: 0; pointer-events: none; }
.s-away .wax-seal { pointer-events: none; }
.s-write .intro, .s-write .invite, .s-write .pick, .s-write .scene-foot, .s-write .post-place { visibility: hidden; }

/* La busta */
.post-place { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; }
.post-arrive { animation: arrive 1.15s var(--ease) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(-38vh) rotate(-7deg) scale(.86); } to { opacity: 1; transform: none; } }
.post-tilt { transform: perspective(1500px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .5s var(--ease); }
.post { position: relative; width: var(--post-w); aspect-ratio: var(--post-ratio); perspective: 1300px; transform: translateY(var(--drop)); filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)); }
.s-flap .post { filter: none; }
.post.moving { transition: transform 1.05s cubic-bezier(.55, .02, .3, 1); }
.post-inside, .post-fold, .post-fold i, .post-flap-shade, .post-flap-shade i, .flap-out, .flap-in { position: absolute; inset: 0; }
.post-inside { background: #143a30; }
.post-inside::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(243, 201, 105, .34) 1.2px, transparent 1.6px) 0 0 / 15px 15px; }
.post-glow { position: absolute; left: -24%; right: -24%; top: -36%; height: 110%; background: radial-gradient(closest-side, rgba(255, 216, 130, .92), rgba(255, 196, 92, .32) 58%, transparent); opacity: 0; transition: opacity .9s ease; z-index: 1; }
.s-flap .post-glow { opacity: 1; }
.s-drop .post-glow { opacity: 0; }

.post-fold i, .flap-out { background: var(--env) url("img/carta.webp"); background-blend-mode: multiply; }
.post-fold { z-index: 3; }
.post-fold-l { filter: drop-shadow(2px 0 3px rgba(70, 48, 16, .2)); }
.post-fold-l i { clip-path: polygon(0 0, 54% 50%, 0 100%); background-image: linear-gradient(90deg, #eadfc6, #f7efdd), url("img/carta.webp"); }
.post-fold-r { filter: drop-shadow(-2px 0 3px rgba(70, 48, 16, .2)); }
.post-fold-r i { clip-path: polygon(100% 0, 46% 50%, 100% 100%); background-image: linear-gradient(270deg, #e7dbc0, #f5ecd8), url("img/carta.webp"); }
.post-fold-b { filter: drop-shadow(0 -2px 3px rgba(70, 48, 16, .24)); }
.post-fold-b i { clip-path: polygon(0 100%, 49% 44%, 51% 44%, 100% 100%); background-image: linear-gradient(0deg, #ecdfc6, #fbf4e4), url("img/carta.webp"); }
.post-to { position: absolute; z-index: 3; right: 9%; bottom: 6%; font: 400 clamp(.8125rem, 3.4vw, 1.0625rem)/1.75 var(--hand); color: var(--pen); text-align: right; transition: opacity .3s; }

.post-flap-shade { z-index: 4; filter: blur(5px); transition: opacity .3s; transform: translateY(4px); }
.post-flap-shade i { background: rgba(60, 40, 12, .42); clip-path: polygon(0 0, 100% 0, 53% calc(var(--tip) - 2%), 50% var(--tip), 47% calc(var(--tip) - 2%)); }
.post-flap { position: absolute; inset: 0; z-index: 5; transform-origin: 50% 0; transform-style: preserve-3d; transition: transform .85s cubic-bezier(.45, .05, .25, 1); }
.flap-out, .flap-in { clip-path: polygon(0 0, 100% 0, 53% calc(var(--tip) - 2%), 50% var(--tip), 47% calc(var(--tip) - 2%)); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flap-out { background-image: linear-gradient(180deg, #fdf7ea, #efe5ce), url("img/carta.webp"); }
.flap-in { background: #143a30; transform: rotateX(180deg); }
.flap-in::after { content: ""; position: absolute; inset: 7px 7px 0; background: radial-gradient(circle, rgba(243, 201, 105, .34) 1.2px, transparent 1.6px) 0 0 / 15px 15px; }
.s-flap .post-flap { transform: rotateX(180deg); }
.s-flap .post-flap-shade { opacity: 0; }
.s-under .post-flap { z-index: 0; }

.post-slip { position: absolute; z-index: 2; left: 5%; right: 5%; top: 3%; bottom: 4%; padding: 8% 8%; background: linear-gradient(90deg, transparent 7%, var(--margin) 7%, var(--margin) calc(7% + 1px), transparent calc(7% + 1px)), repeating-linear-gradient(180deg, transparent 0, transparent 17px, var(--rule) 17px, var(--rule) 18px), var(--cream); box-shadow: 0 -2px 8px rgba(30, 20, 5, .25); color: var(--pen); font: 400 clamp(.875rem, 4vw, 1.25rem)/1.6 var(--hand); transform: translateY(calc(var(--rise) - var(--drop))); }
.post-slip.moving { transition: transform 1.05s cubic-bezier(.55, .02, .3, 1); }

/* Il sigillo */
.wax-seal { position: absolute; z-index: 6; left: 50%; top: calc(var(--tip) - 1%); width: clamp(104px, 29vw, 136px); aspect-ratio: 1; padding: 0; margin: 0; background: none; border: 0; border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; -webkit-touch-callout: none; filter: drop-shadow(0 5px 6px rgba(50, 14, 8, .5)); }
.wax-img { display: block; width: 100%; height: 100%; }
.wax-half { position: absolute; inset: 0; transition: transform .16s ease-out, opacity .55s; }
.wax-half-a { clip-path: polygon(0 0, 58% 0, 47% 21%, 57% 39%, 44% 58%, 55% 78%, 47% 100%, 0 100%); }
.wax-half-b { clip-path: polygon(58% 0, 100% 0, 100% 100%, 47% 100%, 55% 78%, 44% 58%, 57% 39%, 47% 21%); }
.wax-halo { position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 216, 130, .55), transparent); animation: halo 2.6s ease-in-out infinite; }
@keyframes halo { 0%, 100% { opacity: .15; transform: scale(.92); } 50% { opacity: .9; transform: scale(1.08); } }
.wax-seal:hover .wax-half { transform: scale(1.03); }
.wax-seal:active .wax-half { transform: scale(.95); }
.s-crack .wax-seal { cursor: default; pointer-events: none; }
.s-crack .wax-halo, .stamped .wax-halo { display: none; }
.s-crack .wax-seal { filter: none; }
.s-crack .wax-half-a { transform: translate(-3%, 1%) rotate(-2.5deg); }
.s-crack .wax-half-b { transform: translate(3%, 0) rotate(2deg); }
.s-fall .wax-half { transition: transform .85s cubic-bezier(.5, 0, .9, .55), opacity .35s .5s; opacity: 0; }
.s-fall .wax-half-a { transform: translate(-46%, 260%) rotate(-62deg); }
.s-fall .wax-half-b { transform: translate(48%, 290%) rotate(70deg); }
.stamped .wax-half { transition: none; animation: stamp .42s cubic-bezier(.3, 0, .2, 1) both; opacity: 1; transform: none; }
@keyframes stamp { from { transform: scale(2.1); opacity: 0; } to { transform: none; opacity: 1; } }
.postmark { position: absolute; z-index: 7; right: 8%; top: 6%; width: 27%; transform: rotate(14deg); fill: none; stroke: rgba(31, 58, 122, .68); stroke-width: 2.5; animation: stamp .5s .9s cubic-bezier(.3, 0, .2, 1) both; }
.pm-ring { fill: rgba(31, 58, 122, .72); stroke: none; font: 600 9.8px var(--text); letter-spacing: .05em; }
.pm-day { fill: rgba(31, 58, 122, .72); stroke: none; font: 700 13px var(--text); letter-spacing: .06em; }

/* A chi si scrive */
.pick { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; padding: 0 8px; border: 0; transition: opacity .4s; }
.pick legend { float: left; margin-right: 2px; padding: 0; font: 500 .9375rem var(--text); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.pick label { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick span { display: flex; align-items: center; min-height: 44px; padding: 0 13px; border: 1.5px solid rgba(247, 241, 226, .75); border-radius: 22px; background: rgba(10, 16, 12, .5); color: var(--cream); font: 600 .9375rem var(--text); white-space: nowrap; transition: background-color .2s, color .2s; }
.pick input:checked + span { background: var(--cream); border-color: var(--cream); color: var(--pen); }
.pick input:checked + span::before { content: "✓"; margin-right: 6px; font-weight: 700; }
.pick input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.invite { position: relative; z-index: 2; flex: none; padding: 10px 16px 2px; font: italic 500 1.1875rem var(--display); text-shadow: 0 1px 10px rgba(0, 0, 0, .7); text-align: center; transition: opacity .4s; }
.on-mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .on-touch { display: none; } .on-mouse { display: inline; } }

.scene-foot { position: relative; z-index: 2; flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; padding: 4px 12px max(10px, env(safe-area-inset-bottom)); font-size: .875rem; transition: opacity .4s; }
.scene-foot a, .scene-foot button { display: inline-block; min-height: 40px; padding: 9px 2px; background: none; border: 0; color: var(--cream); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }

/* La letterina */
.js .letter { position: fixed; z-index: 5; left: 50%; top: calc(var(--vv-top, 0px) + max(8px, env(safe-area-inset-top))); width: var(--lw); margin-left: calc(var(--lw) / -2); height: var(--lh, calc(var(--app-h, 100dvh) - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)))); transform-origin: 0 0; visibility: hidden; }
.js .s-letter .letter { visibility: visible; }
.letter.moving { transition: transform .95s var(--ease); }
.letter-inner { position: relative; height: 100%; perspective: 1500px; transform: translateX(calc(var(--turn) * var(--spread, 0px))); }
.js .sheet { position: absolute; inset: 0; }
.sheet { color: var(--pen); font: 400 1.0625rem/var(--line) var(--hand); filter: none; }
.sheet-1 { z-index: 2; transform-origin: 0 50%; transform: rotateY(calc(var(--turn) * -180deg)) rotateZ(calc(var(--turn) * (1 - var(--turn)) * -5deg)); }
.is-turning .sheet-1, .on-2 .sheet-1 { transform-style: preserve-3d; }
/* A riposo niente 3D attorno ai campi: su iOS il cursore finirebbe fuori posto */
.letter:not(.is-turning):not(.on-2) .sheet-1 { transform: none; }
.letter:not(.is-turning) .letter-inner { perspective: none; }
.on-2:not(.is-turning) .sheet-1 { z-index: 1; }
.face { position: absolute; inset: 0; }
.is-turning .face, .on-2 .face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.face-back { display: none; transform: rotateY(180deg); }
.is-turning .face-back, .on-2 .face-back { display: flex; }
.on-2:not(.is-turning) .face-front { visibility: hidden; }
.face-front, .face-back, .sheet-2 { background: var(--cream) url("img/carta.webp"); background-blend-mode: multiply; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); border-radius: 3px; }
.face-shade { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(90deg, rgba(30, 20, 6, .05), rgba(30, 20, 6, .34)); opacity: 0; }
.is-turning .face-front .face-shade { opacity: calc(var(--turn) * 2); }
.face-back .face-shade { opacity: 0; background: linear-gradient(270deg, rgba(30, 20, 6, .16), rgba(30, 20, 6, 0) 22%); }
.is-turning .face-back .face-shade, .on-2 .face-back .face-shade { opacity: 1; }
.sheet-cast { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(90deg, rgba(25, 16, 4, .4), rgba(25, 16, 4, 0) 55%); opacity: 0; }
.is-turning .sheet-cast { opacity: calc(1 - var(--turn)); }
.on-2:not(.is-turning) .sheet-cast { opacity: 1; background: linear-gradient(90deg, rgba(25, 16, 4, .18), rgba(25, 16, 4, 0) 8%); }

.sheet-scroll { position: relative; height: 100%; display: flex; flex-direction: column; touch-action: pan-y; }
.ruled {
  flex: 1 1 0; min-height: 0; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; padding: calc(var(--line) * .5 + 1px) 14px 0 calc(var(--margin-x) + 12px);
  background:
    linear-gradient(90deg, transparent calc(var(--margin-x) - 1px), var(--margin) calc(var(--margin-x) - 1px), var(--margin) calc(var(--margin-x) + 1px), transparent calc(var(--margin-x) + 1px)),
    repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px), var(--rule) var(--line));
  background-position: 0 0, 0 calc(var(--line) * .5 + 1px);
  background-attachment: local;
}
.ruled > .fade-in:first-child { flex: none; }
.js .fade-in { opacity: 0; transition: opacity .55s ease; }
.js .s-filled .fade-in { opacity: 1; }

.letter-date { text-align: right; font-size: .9375rem; }
.letter-h { font: 400 1.4375rem/var(--line) var(--hand); letter-spacing: 0; }
.letter-p { min-height: var(--line); }
.sheet .w label { display: block; height: var(--line); line-height: var(--line); font-weight: 400; font-size: 1.125rem; white-space: nowrap; }
.sheet .oops { flex-basis: 100%; }
.letter input:not([type=hidden]), .letter textarea {
  display: block; width: 100%; min-height: 0; height: calc(var(--line) * 2 - 8px); margin-bottom: 8px; padding: 6px 12px; font: 400 1.0625rem/1.6 var(--hand); color: #0f2a6b; background: #fff; border: 2px solid var(--pen); border-radius: 8px; caret-color: var(--wax); transition: background-color .2s, box-shadow .2s;
}
.letter textarea { resize: none; overflow-y: auto; }
.letter textarea[rows="3"] { height: calc(var(--line) * 3 - 8px); }
.letter ::placeholder { color: #55617d; opacity: 1; font-size: .8125rem; }
.letter input:focus, .letter textarea:focus { outline: 0; background: #fff8dc; box-shadow: 0 0 0 3px rgba(243, 180, 40, .75); }
.letter-help { min-height: var(--line); font: 600 .9375rem/var(--line) var(--text); color: #14213f; }
.sheet .letter-h label { height: auto; font: inherit; }
.oops { height: var(--line); line-height: var(--line); padding-left: 4px; font: 700 .9375rem/var(--line) var(--text); color: var(--wax-deep); }
.letter .has-error input:not([type=hidden]) { border-color: var(--wax); box-shadow: 0 0 0 2px var(--wax); }
.signoff { min-height: var(--line); text-align: right; }
.letter-doodle { display: block; flex: 1 1 0; min-height: 0; width: 100%; max-height: 300px; margin: auto 0 0; padding: 8px 0 0; object-fit: contain; object-position: 80% 100%; opacity: .92; }
.js .s-filled .letter-doodle { opacity: .92; }

.sheet-end { position: relative; flex: none; padding: 10px 14px max(12px, env(safe-area-inset-bottom)); background: var(--cream) url("img/carta.webp"); background-blend-mode: multiply; border-top: 1px solid var(--rule); }
.sheet-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-no { font-size: .875rem; color: var(--pen-soft); }
.letter-btn { min-height: 52px; min-width: 132px; padding: 10px 24px; border: 0; border-radius: 26px 22px 28px 24px; background: var(--wax); color: #fff; font: 600 1.125rem var(--text); cursor: pointer; box-shadow: 0 3px 0 var(--wax-deep), 0 6px 14px rgba(90, 10, 16, .35); transition: transform .12s var(--ease), box-shadow .12s; }
.letter-btn:hover { background: var(--wax-deep); }
.letter-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--wax-deep); }
.turn-back { min-height: 48px; padding: 8px 4px; background: none; border: 0; color: var(--pen); font: 500 1rem var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sheet-top { flex: none; padding: 2px 14px 0; }
.go-home { min-height: 44px; padding: 8px 4px; background: none; border: 0; color: var(--pen); font: 500 1rem var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.small-print { margin-top: 8px; font: 400 .8125rem/1.35 var(--text); color: #3d4b70; }

.face-back { flex-direction: column; align-items: center; justify-content: space-between; padding: 26px 22px; font-size: 1rem; }
.face-back img { flex: 1 1 0; min-height: 0; width: 100%; padding: 12px 0; object-fit: contain; }
.back-from { align-self: flex-start; }
.back-for { align-self: flex-end; }
.shake { animation: shake .4s ease; }
@keyframes shake { 25% { transform: translateX(-7px); } 60% { transform: translateX(5px); } }

/* Come funziona */
.how { width: min(100vw - 24px, 520px); max-height: calc(100dvh - 32px); padding: 26px 24px 22px; border: 0; border-radius: 3px; background: var(--cream) url("img/carta.webp"); background-blend-mode: multiply; color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.how::backdrop { background: rgba(8, 14, 10, .62); }
.how h2 { font: 400 1.5rem/1.3 var(--hand); color: var(--pen); margin-bottom: 14px; }
.how li + li { margin-top: 12px; }
.how strong { display: block; font: italic 600 1.1875rem var(--display); color: var(--wax-deep); }
.how .letter-btn { display: block; margin: 20px 0 0 auto; }

/* Sotto la lettera aperta a libro: la pagina girata esce di scena */
@media (max-width: 999px) {
  .on-2:not(.is-turning) .sheet-1 { visibility: hidden; }
}
@media (max-height: 520px) {
  .letter-doodle { display: none; }
}
@media (max-width: 359px) {
  .pick { gap: 4px; padding: 0 4px; }
  .pick legend { font-size: .8125rem; }
  .pick span { padding: 0 8px; font-size: .8125rem; }
  .pick input:checked + span::before { margin-right: 3px; }
}
/* Telefoni piccoli: meno testo, la busta resta grande */
@media (max-height: 620px) {
  :root { --post-w: min(84vw, 400px, calc((var(--app-h, 100dvh) - 222px) * .68)); }
  .intro p, .intro .details { display: none; }
  .intro { padding-top: max(10px, env(safe-area-inset-top)); }
  .intro h1 { font-size: 2.25rem; }
  .invite { padding-top: 4px; font-size: 1.0625rem; }
  .scene-foot a, .scene-foot button { min-height: 36px; padding: 7px 2px; font-size: .8125rem; }
  .wax-seal { width: clamp(84px, 24vw, 104px); }
}
/* Telefono in orizzontale: busta orizzontale */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --tip: 58%; --post-ratio: 7 / 5; --post-w: min(60vw, calc((var(--app-h, 100dvh) - 112px) * 1.4)); }
  .intro { padding-top: 4px; }
  .intro h1 { font-size: 1.5rem; }
  .invite { position: absolute; left: 12px; bottom: 44px; width: 19vw; padding: 0; }
  .pick { position: absolute; right: 12px; bottom: 44px; flex-direction: column; align-items: stretch; margin: 0; padding: 0; }
  .pick legend { float: none; margin: 0 0 2px; text-align: center; }
  .pick label + label { margin-top: 2px; }
  .wax-seal { width: 72px; }
  .post-to { font-size: .75rem; line-height: 1.5; }
}

/* Schermi larghi: la busta orizzontale, la lettera aperta a libro */
@media (min-width: 1000px) {
  :root {
    --line: 36px;
    --margin-x: 40px;
    --tip: 58%;
    --post-ratio: 7 / 5;
    --post-w: min(50vw, 680px, calc((var(--app-h, 100dvh) - 342px) * 1.4));
    --lw: min(460px, 42vw);
    --lh: min(720px, calc(var(--app-h, 100dvh) - 48px));
    --spread: calc(var(--lw) / 2);
  }
  .intro { padding-top: 26px; }
  .intro p { font-size: 1.125rem; }
  .js .letter { top: calc((var(--app-h, 100dvh) - var(--lh)) / 2); }
  .letter-inner { perspective: 2200px; }
  .ruled { padding-left: calc(var(--margin-x) + 14px); padding-right: 20px; }
  .sheet-end { padding: 12px 20px 14px; }
  .wax-seal { width: clamp(112px, 10vw, 148px); }
  .post-to { font-size: 1.0625rem; }
  .sheet { font-size: 1.0625rem; }
}

/* La risposta dopo la conferma: un biglietto d'auguri aperto */
.scene-reply { justify-content: center; }
.reply { position: relative; z-index: 2; width: min(100vw - 16px, 560px); max-height: 100%; padding: max(8px, env(safe-area-inset-top)) 0 max(8px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; animation: reply-in .9s var(--ease) both; }
@keyframes reply-in { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }
.reply-card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 30px 30px 26px; text-align: center; color: var(--cream); background: #143a30 radial-gradient(circle, rgba(243, 201, 105, .17) 1.2px, transparent 1.6px) 0 0 / 15px 15px; border-radius: 3px 3px 0 0; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.reply-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(243, 201, 105, .65); outline: 1px solid rgba(243, 201, 105, .3); outline-offset: 3px; pointer-events: none; }
.reply-seal { position: relative; width: 104px; height: 104px; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .45)); animation: stamp .55s .35s cubic-bezier(.3, 0, .2, 1) both; }
.reply-card h1 { position: relative; margin-top: 8px; font: italic 500 clamp(2.25rem, 9vw, 3.25rem)/1.04 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; color: var(--cream); }
.reply-card h1 span { color: var(--gold); }
.reply-lead { position: relative; margin-top: 12px; font-size: 1.0625rem; line-height: 1.45; text-wrap: balance; }
.reply-card .details { position: relative; display: block; margin-top: 16px; padding: 0; list-style: none; font-size: .9375rem; line-height: 1.4; color: var(--cream); }
.reply-card .details li { margin: 0; padding: 7px 4px; border-top: 1px solid rgba(243, 201, 105, .35); }
.reply-card .details li::before { content: none; }
.reply-card .details li:last-child { border-bottom: 1px solid rgba(243, 201, 105, .35); }
.reply-home { position: relative; display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; color: var(--cream); font-size: .9375rem; text-decoration: underline; text-underline-offset: 3px; }
.reply-page { position: relative; color: var(--pen); font: 400 1.0625rem/var(--line) var(--hand); background: var(--cream) url("img/carta.webp"); background-blend-mode: multiply; border-radius: 0 0 3px 3px; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.reply-page .postmark { z-index: 2; right: 12px; top: 10px; width: 74px; pointer-events: none; animation-delay: .7s; }
.reply-form .ruled { overflow: visible; }
.reply-page h2 { font: 400 1.4375rem/var(--line) var(--hand); letter-spacing: 0; color: var(--pen); padding-right: 74px; }
.reply-help { min-height: var(--line); padding-right: 74px; font: 600 .875rem/1.25 var(--text); color: #14213f; }
.reply-w label { display: block; height: var(--line); font-size: 1.125rem; line-height: var(--line); font-weight: 400; white-space: nowrap; }
.reply textarea { display: block; width: 100%; height: calc(var(--line) * 2 - 8px); min-height: 0; margin-bottom: 8px; padding: 6px 12px; resize: none; overflow-y: auto; color: #0f2a6b; background: #fff; border: 2px solid var(--pen); border-radius: 8px; caret-color: var(--wax); font: 400 1.0625rem/1.6 var(--hand); transition: background-color .2s, box-shadow .2s; }
.reply .reply-wishlist textarea { height: calc(var(--line) * 3 - 8px); }
.reply ::placeholder { color: #55617d; opacity: 1; font-size: .8125rem; }
.reply textarea:focus { outline: 0; background: #fff8dc; box-shadow: 0 0 0 3px rgba(243, 180, 40, .75); }
.reply-saved { font: 700 1rem var(--text); color: #17613f; }
.reply-form .sheet-end { padding-bottom: 12px; border-radius: 0 0 3px 3px; }
@media (min-width: 1000px) {
  .reply { display: grid; grid-template-columns: 1fr 1fr; width: min(100vw - 64px, 1000px); height: min(720px, calc(var(--app-h, 100dvh) - 40px)); max-height: none; padding: 0; overflow: visible; }
  .reply-card { justify-content: center; min-height: 0; padding: 26px 46px; border-radius: 3px 0 0 3px; }
  .reply-card::before { inset: 14px; }
  .reply-card h1 { font-size: clamp(2.5rem, 4.4vw, 3.75rem); }
  .reply-lead { font-size: 1.125rem; }
  .reply-page { min-height: 0; border-radius: 0 3px 3px 0; box-shadow: 0 18px 44px rgba(0, 0, 0, .5), inset 14px 0 18px -12px rgba(25, 16, 4, .4); }
  .reply-form { display: flex; flex-direction: column; height: 100%; }
  .reply-form .ruled { flex: 1 1 0; overflow-y: auto; }
  .reply-form .sheet-end { padding-bottom: 12px; }
}
@media (min-width: 1000px) and (max-height: 760px) {
  .reply { --line: 30px; }
  .reply-seal { width: 84px; height: 84px; }
  .reply-card { padding-top: 22px; padding-bottom: 20px; }
  .reply-card .details li { padding: 5px 4px; }
  .reply textarea { padding: 3px 12px; }
  .reply-form .letter-btn { min-height: 44px; }
}
.reply-home-2 { margin-top: 0; }
/* L'account: stessa carta, sul biglietto verde i dati */
.account-card { align-items: stretch; text-align: left; }
.account-card h1 { text-align: center; margin-top: 0; }
.account-card .reply-home { align-self: center; }
.account-note { position: relative; margin-top: 10px; padding: 8px 12px; background: rgba(243, 201, 105, .16); border-left: 3px solid var(--gold); font-size: .9375rem; line-height: 1.35; }
.account-form { position: relative; margin-top: 12px; }
.account-form + .account-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(243, 201, 105, .35); }
.account-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.account-form label { display: block; margin-bottom: 3px; font-size: .875rem; font-weight: 600; }
.account-form input:not([type=hidden]) { display: block; width: 100%; min-height: 44px; padding: 7px 11px; color: var(--pen); background: var(--cream); border: 1px solid var(--gold); border-radius: 6px; font: 500 1rem var(--text); }
.account-form input:read-only { background: rgba(247, 241, 226, .72); }
.account-form input:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.account-btn { min-height: 44px; margin-top: 8px; padding: 8px 18px; background: var(--gold); color: #14382f; border: 0; border-radius: 22px; font: 700 .9375rem var(--text); cursor: pointer; }
.account-btn:hover { background: #ffe6a6; }
.account-help { margin-top: 6px; font-size: .8125rem; line-height: 1.3; }
.account-delete { min-height: 44px; padding: 8px 0; background: none; border: 0; color: var(--cream); font: 500 .875rem var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .reply, .reply-seal, .reply-page .postmark { animation: none; }
}

/* Senza script: tutto in colonna, modulo normale */
html:not(.js) .scene { position: relative; min-height: 100%; padding-bottom: 24px; }
html:not(.js) .post-place, html:not(.js) .invite, html:not(.js) .face-back, html:not(.js) .letter-doodle { display: none; }
html:not(.js) .intro, html:not(.js) .letter, html:not(.js) .scene-foot { position: relative; z-index: 2; }
html:not(.js) .letter { max-width: 560px; margin: 16px auto; }
html:not(.js) .sheet-1 { transform: none; }
html:not(.js) .ruled { overflow: visible; flex: none; }
html:not(.js) .sheet { background: var(--cream); margin-bottom: 12px; }
html:not(.js) [data-next], html:not(.js) [data-back], html:not(.js) .page-no, html:not(.js) .sheet-top { display: none; }
html:not(.js) .how { display: block; position: static; margin: 16px auto; box-shadow: none; }
html:not(.js) [data-how-open], html:not(.js) [data-how-close] { display: none; }
html:not(.js) .sky { position: fixed; }

@media (prefers-reduced-motion: reduce) {
  .post-arrive, .sky-sharp, .wax-halo, .postmark { animation: none !important; }
  .dust { display: none; }
}