/* Generated paper/leather layers animate around the exact saved card PNG. */
html:has(body[data-view=recipient]) { padding: 0; }
body[data-view=recipient] { width: 100%; max-width: none; min-height: 100svh; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body[data-view=recipient]::before, body[data-view=recipient]::after { display: none; }
body[data-view=recipient] #site-main { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 16px; }
body[data-view=recipient] footer { max-width: none; width: 100%; background: var(--paper-grain),var(--surface); }
[data-theme='writers-desk'] body[data-view=recipient] :is(.recipient-open-prompt,#recipient-card-message,#received-transcript summary,.recipient-card-actions a) { color: #fff4df; text-shadow: 0 1px 4px #170d08; }
#recipient-reveal[data-envelope-theme=soft-keepsake] {
  --recipient-back: url('themes/recipient/soft-back-v1.webp');
  --recipient-pocket: url('themes/recipient/soft-pocket-v1.webp');
  --recipient-flap: url('themes/recipient/soft-flap-v1.webp');
  --recipient-open: url('themes/recipient/soft-open-v1.webp');
  --recipient-seal: url('themes/cards/soft-seal-v1.webp');
}
#recipient-reveal[data-envelope-theme=writers-desk] {
  --recipient-back: url('themes/recipient/writers-back-v1.webp');
  --recipient-pocket: url('themes/recipient/writers-pocket-v1.webp');
  --recipient-flap: url('themes/recipient/writers-flap-v1.webp');
  --recipient-open: url('themes/recipient/writers-open-v1.webp');
  --recipient-seal: url('themes/cards/writers-seal-v1.webp');
}
#recipient-reveal[data-envelope-theme] { min-height: calc(100svh - 180px); padding: 0 0 28px; grid-template-rows: auto auto; }
#recipient-reveal[data-envelope-theme] #recipient-stage { min-height: 700px; width: min(960px,100%); }
#recipient-reveal[data-envelope-theme] #recipient-stage:has([data-card-orientation=portrait]) { min-height: 960px; }
#recipient-reveal[data-envelope-theme][data-envelope-orientation=portrait] #recipient-stage { min-height: 960px; }
#recipient-reveal[data-envelope-theme] #recipient-envelope { top: 55%; width: min(560px,100%); height: auto; aspect-ratio: 3 / 2; }
#recipient-reveal[data-envelope-theme] #recipient-shell { pointer-events: auto; }
#recipient-reveal[data-envelope-theme] :is(#recipient-back,#recipient-flap,#recipient-pocket) {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: var(--recipient-back) center / contain no-repeat; box-shadow: none;
}
#recipient-reveal[data-envelope-theme] :is(#recipient-flap,#recipient-pocket)::before,
#recipient-reveal[data-envelope-theme] :is(#recipient-flap,#recipient-pocket)::after,
#recipient-reveal[data-envelope-theme] #recipient-seal::before { content: none; }
#recipient-reveal[data-envelope-theme] #recipient-back { clip-path: inset(40% 0 0); }
#recipient-reveal[data-envelope-theme] #recipient-flap { background-image: var(--recipient-flap); transform-origin: 50% 40%; clip-path: none; }
#recipient-reveal[data-envelope-theme] #recipient-pocket { background-image: var(--recipient-pocket); clip-path: none; }
#recipient-reveal[data-envelope-theme] #recipient-seal { left: 40%; top: 60%; width: 20%; height: auto; aspect-ratio: 1; margin: 0; border-radius: 0; box-shadow: none; background: var(--recipient-seal) center / contain no-repeat; }
#recipient-reveal[data-envelope-theme] #recipient-seal > span { display: none; }
#recipient-reveal[data-envelope-theme] #recipient-card-viewport { height: 90%; clip-path: inset(-2000px -2000px 0 -2000px); }
#recipient-reveal[data-envelope-theme] #recipient-motion-card { left: 18%; top: 46.6667%; width: 64%; height: auto; aspect-ratio: auto; border-radius: 0; box-shadow: none; object-fit: contain; }
#recipient-reveal[data-envelope-theme] #recipient-open-prompt { top: calc(55% + clamp(130px,20vw,210px)); max-width: 320px; }
#recipient-reveal[data-envelope-theme] #recipient-final-zone[data-card-design] { width: min(560px,84vw); background: var(--recipient-open) center bottom / 100% auto no-repeat; }
#recipient-reveal[data-envelope-theme] #recipient-final-zone[data-card-design] .recipient-final-image { inset: 4% auto auto 7%; width: 86%; height: auto; aspect-ratio: auto; max-height: none; border-radius: 0; box-shadow: none; }
#recipient-reveal[data-envelope-theme] #recipient-final-zone[data-card-orientation=portrait] .recipient-final-image { top: 7%; }
#recipient-reveal[data-envelope-theme] #recipient-final-zone[data-card-design]::after { background-image: var(--recipient-seal); }
#recipient-reveal[data-envelope-theme] #recipient-final-zone:is([data-card-design='soft-keepsake-v1'],[data-card-design='india-v1'])::after { left: 62%; }
#recipient-reveal[data-envelope-theme] #recipient-final-zone[data-card-design]::after { width: 22%; }
#recipient-reveal[data-envelope-theme] #recipient-envelope:focus-visible { outline-color: var(--accent); outline-offset: 8px; }
/* Align the generated material bounds within each atlas cell. */
#recipient-reveal[data-envelope-theme=soft-keepsake] #recipient-back { clip-path: inset(48% 0 0); }
#recipient-reveal[data-envelope-theme=soft-keepsake] #recipient-flap { top: 9.6%; bottom: auto; transform-origin: 50% 39%; }
#recipient-reveal[data-envelope-theme=soft-keepsake] #recipient-pocket { background-position-x: calc(50% + min(28.56px,5.1vw)); }
#recipient-reveal[data-envelope-theme=soft-keepsake] #recipient-card-viewport { height: 98%; }
#recipient-reveal[data-envelope-theme=soft-keepsake] #recipient-motion-card { top: 49.8%; }
#recipient-reveal[data-envelope-theme=writers-desk] #recipient-back { clip-path: inset(41.4% 0 0); }
#recipient-reveal[data-envelope-theme=writers-desk] #recipient-flap { top: 9.8%; bottom: auto; transform-origin: 50% 31.6%; }
#recipient-reveal[data-envelope-theme=writers-desk] #recipient-pocket { background-position-x: calc(50% + min(12.88px,2.3vw)); }
#recipient-reveal[data-envelope-theme=writers-desk] #recipient-card-viewport { height: 91.5%; }
#recipient-reveal[data-envelope-theme=writers-desk] #recipient-motion-card { top: 45.25%; }
@media (max-width: 599px) {
  body[data-view=recipient] #site-main { padding-inline: 8px; }
  #recipient-reveal[data-envelope-theme] #recipient-stage { min-height: 600px; }
  #recipient-reveal[data-envelope-theme] #recipient-stage:has([data-card-orientation=portrait]) { min-height: 680px; }
  #recipient-reveal[data-envelope-theme][data-envelope-orientation=portrait] #recipient-stage { min-height: 680px; }
  #recipient-reveal[data-envelope-theme] #recipient-open-prompt { font-size: 13px; }
}