/* letterOpen screen (source/build_open.py) */

/* the night sky behind the jar */
.lo-night { position: absolute; inset: 0; background: linear-gradient(#2E3950, #4A4868); }
.lo-night span { position: absolute; border-radius: 50%; background: #FFFBF2; }
.lo-back { position: absolute; left: 48px; top: 10px; box-shadow: none; }
.lo-jar { position: absolute; left: 110px; top: 70px; width: 260px; height: 290px; display: flex; align-items: flex-end; justify-content: center; }
.lo-env { position: absolute; left: 164px; top: 40px; padding: 0; border: none; background: none; }
.lo-floaty { animation: loFloaty 2.4s ease-in-out infinite; }
@keyframes loFloaty { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
.lo-copy { position: absolute; left: 430px; right: 40px; top: 70px; display: flex; flex-direction: column; gap: 10px; color: #FFFBF2; }
.lo-kicker { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: #F6E08C; text-transform: uppercase; }
.lo-title { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.05; }
.lo-sub { font-size: 14px; font-weight: 700; line-height: 1.35; color: #E8E1F2; }
.lo-ghost { background: transparent; color: #FFFBF2; border-color: #FFFBF2; box-shadow: none; }
.lo-ghost:active:not(:disabled) { box-shadow: none; }
.lo-note { font-size: 13px; font-weight: 800; line-height: 1.3; color: #F6E08C; }
.lo-copy :focus-visible { box-shadow: 0 0 0 2px #2E3950, 0 0 0 4px #FFFBF2 !important; }

/* breaking the seal in one movement (owner, 11 Oct 2026), ~2.8 s: the jar and the words fade as the envelope comes
   forward from where it floated and zooms in (0–.6 s); the wax cracks (.6–1.05), the flap opens (.9–1.5), the letter
   slides out (1.45–2.2); then it grows into the page while the envelope and the night fade (2.2–2.75), and the opened
   letter is there, in its place. The envelope's drawing (200 × 140, its body 192 × 126) is zoomed around its middle. */
.lo-anim {
  position: absolute; left: 322px; top: 97px; width: 200px; height: 200px; transform-origin: 100px 133px;
  animation: loZoom .6s cubic-bezier(.3, .7, .3, 1) both, loAway .4s ease-in 2.2s forwards;
}
/* (from the sealed envelope's place over the jar, 150 × 106 at 164, 40, to the middle of the screen, larger) */
@keyframes loZoom { from { transform: translate(-183px, -131px) scale(.67) rotate(-3deg); } to { transform: scale(1.3); } }
@keyframes loAway { from { opacity: 1; transform: scale(1.3); } to { opacity: 0; transform: scale(1.3) translateY(26px); } }
.lo-anim > * { position: absolute; display: block; }
.lo-inside, .lo-flap, .lo-front { left: 0; top: 60px; }
.lo-inside { z-index: 0; }
.lo-flap { z-index: 4; transform-origin: 100px 10px; animation: loFlap .6s ease-in-out .9s both; }
.lo-sheet {
  left: 24px; top: 70px; width: 152px; height: 110px; z-index: 2; border: 2px solid var(--ink); border-radius: 4px;
  background-color: #FFFDF7; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 13px, #EADFCB 13px, #EADFCB 14px), var(--pp, none); background-size: auto, var(--pps, auto);
  animation: loSheet .75s cubic-bezier(.2, .8, .3, 1) 1.45s both;
}
.lo-front { z-index: 3; }
.lo-wax { left: 82px; top: 120px; width: 36px; height: 36px; border-radius: 18px; border: 2px solid var(--ink); z-index: 5; display: flex; align-items: center; justify-content: center; }
.lo-wax.l { clip-path: inset(-3px 50% -3px -3px); animation: loWaxL .45s ease-in .6s both; }
.lo-wax.r { clip-path: inset(-3px -3px -3px 50%); animation: loWaxR .45s ease-in .6s both; }
@keyframes loWaxL { 0% { transform: none; opacity: 1; } 25% { transform: scale(1.1); opacity: 1; } 100% { transform: translate(-20px, 24px) rotate(-35deg); opacity: 0; } }
@keyframes loWaxR { 0% { transform: none; opacity: 1; } 25% { transform: scale(1.1); opacity: 1; } 100% { transform: translate(20px, 24px) rotate(35deg); opacity: 0; } }
/* the flap swings over the top edge and ends up behind the letter */
@keyframes loFlap { 0% { transform: scaleY(1); z-index: 4; } 50% { transform: scaleY(0); z-index: 4; } 51% { z-index: 1; } 100% { transform: scaleY(-1); z-index: 1; } }
@keyframes loSheet { from { transform: none; } to { transform: translateY(-80px); } }
/* the letter, out of the envelope (where the zoomed sheet ends up), grows into the page: the opened letter's own place */
.lo-grow {
  position: absolute; left: 323px; top: 44px; width: 198px; height: 143px; box-sizing: border-box; opacity: 0; z-index: 6;
  border: 2px solid var(--ink); border-radius: 4px; background-color: #FFFDF7;
  background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 23px, #EADFCB 23px, #EADFCB 24px), var(--pp, none); background-size: auto, var(--pps, auto); background-position: 0 42px;
  animation: loGrow .55s cubic-bezier(.3, .7, .3, 1) 2.2s forwards;
}
@keyframes loGrow { from { opacity: 1; } to { opacity: 1; left: 48px; top: 60px; width: 570px; height: 309px; border-radius: 6px; box-shadow: var(--edge); } }
/* what fades as the envelope comes forward, and the night as the letter grows */
.lo-leave { animation: loLeave .35s ease-in forwards; }
@keyframes loLeave { to { opacity: 0; transform: translateY(10px); } }
.lo-dusk, .lo-opening { animation: loFade .5s ease-in 2.25s forwards; }
@keyframes loFade { to { opacity: 0; } }
.lo-opening { position: absolute; left: 0; right: 0; bottom: 40px; text-align: center; font-size: 16px; font-weight: 800; color: #FFFBF2; }
/* opened straight from the envelope: the page is already in place; its words and the rest of the screen fade in */
.lo-arrive > :not(.lo-paper), .lo-arrive .lo-paper > * { animation: fadeIn .35s ease-out both; }

/* opened: the letter paper and the side column */
.lo-paper {
  position: absolute; left: 48px; top: 60px; width: 570px; bottom: 21px; padding: 12px 24px 10px 30px; display: flex; flex-direction: column;
  background-color: #FFFDF7; background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 23px, #EADFCB 23px, #EADFCB 24px), var(--pp, none); background-size: auto, var(--pps, auto);
  background-position: 0 42px; border: 2px solid var(--ink); border-radius: 6px; box-shadow: var(--edge);
}
.lo-margin { position: absolute; top: 0; bottom: 0; left: 18px; border-left: 1.5px solid #F2B8B5; z-index: 1; }
.lo-dear { flex: none; font-size: 17px; font-weight: 800; line-height: 24px; height: 30px; }
/* its own lines scroll with a long letter */
.lo-body {
  flex: 1; min-height: 0; font-size: 15px; font-weight: 700; line-height: 24px; white-space: pre-wrap; overflow-wrap: anywhere;
  background-color: #FFFDF7; background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 23px, #EADFCB 23px, #EADFCB 24px), var(--pp, none); background-size: auto, var(--pps, auto);
  background-attachment: local; -webkit-user-select: text; user-select: text;
}
/* (its pattern lines up with the paper's round it: the body starts 30px in from the paper's edge) */
.lo-body { background-position: 0 0, -30px 0; }
.lo-love { flex: none; text-align: right; font-size: 16px; font-weight: 800; line-height: 24px; padding-right: 40px; }
.lo-side { position: absolute; left: 636px; right: 16px; top: 60px; bottom: 21px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
.lo-side .btn { flex: none; padding: 0 10px; }
.lo-kept { margin-bottom: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 6px; font-size: 12px; font-weight: 800; color: var(--muted); text-align: center; }
.lo-paid { display: flex; align-items: center; justify-content: center; gap: 4px; }
.lo-paperIn { animation: loPaperIn .5s ease-out both; }
@keyframes loPaperIn { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Reduce Motion: no float, no flight; the opened envelope simply fades in, then the letter */
@media (prefers-reduced-motion: reduce) {
  .lo-floaty { animation: none; transform: rotate(-4deg); }
  .lo-anim { animation: fadeIn .3s both; transform: scale(1.3); }
  .lo-anim > * { animation: none !important; }
  .lo-grow, .lo-leave { display: none; }
  .lo-dusk, .lo-opening { animation: none; }
  .lo-wax { opacity: 0; }
  .lo-flap { transform: scaleY(-1); z-index: 1; }
  .lo-sheet { transform: translateY(-80px); }
  .lo-paperIn { animation: fadeIn .3s both; }
}