/* Native articulated animals share one paper invitation composition. */
.guest-page.is-invitation {
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
}
.is-invitation .guest-shell { display: grid; place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.guest-card.welcome-card {
  position: relative;
  width: min(calc(100vw - 24px), calc((100svh - 24px) * 9 / 16), 440px);
  height: min(calc((100vw - 24px) * 16 / 9), calc(100svh - 24px), 782.22px);
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  border: 1px solid #d9c7ae;
  border-radius: 2px;
  background: #f8f5ee;
  box-shadow: 0 18px 45px #4f321d26;
}
.welcome-card:not(.is-scene-ready) { visibility: hidden; }
.invitation-scene { position: relative; width: 100%; height: 100%; container-type: size; isolation: isolate; overflow: hidden; }
.card-artwork { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.card-portrait { position: absolute; top: 9.8cqh; left: 50%; width: min(49cqw, 24.6cqh); aspect-ratio: 2 / 3; margin-left: calc(min(49cqw, 24.6cqh) / -2); }
.card-portrait-inner, .card-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; }
.card-artwork, .card-portrait img { opacity: 1; }
.card-portrait-inner { transform-origin: 50% 65%; }
.card-copy { position: absolute; top: 48.2cqh; left: 4%; width: 92%; color: #685145; text-align: center; font-family: Georgia, 'Invitation Serif', serif; }
.card-copy p { padding: 0; }
.card-greeting { margin: 0; font: 400 calc(clamp(16px, 5.5cqw, 24px) + 1px)/1.16 Georgia, 'Invitation Serif', serif; text-transform: uppercase; letter-spacing: -.02em; }
.card-greeting span { display: block; white-space: nowrap; }
.card-birthday { margin: .9cqh 0 0; color: #ab6d73; font-size: calc(clamp(15px, 4.6cqw, 21px) + 1px); font-style: italic; line-height: 1.2; }
.card-message { margin: .4cqh 0 0; font-size: calc(clamp(10.5px, 3.4cqw, 15px) + 1px); line-height: 1.6; }
.invitation-date { margin: .7cqh 0 0; color: #ab6d73; font-size: calc(clamp(23px, 7cqw, 32px) + 1px); line-height: 1.2; }
.card-closing { margin: .6cqh 0 0; font-size: calc(clamp(10px, 2.8cqw, 13px) + 1px); font-style: italic; line-height: 1.5; }
.animal-story {
  --story-inset: max(10px, env(safe-area-inset-bottom));
  --animal-floor: calc(var(--story-inset) + 48px);
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(min(18cqh, 28.5cqw) + var(--story-inset) + 76px);
  isolation: isolate;
  pointer-events: none;
}
.story-animal-position { position: absolute; z-index: 3; bottom: var(--animal-floor); display: block; }
.story-lion { left: 3cqw; height: min(12.8cqh, 20cqw); aspect-ratio: 500 / 740; }
.story-bunny { right: 1cqw; height: min(13.3cqh, 20.5cqw); aspect-ratio: 450 / 548; }
.card-animal, .bunny-nod { display: block; width: 100%; height: 100%; transform-origin: 50% 96%; }
.card-animal { background-image: url('/assets/animals.webp'); background-repeat: no-repeat; }
.card-animal-lion { background-size: 250.8% 169.45946%; background-position: 10.61008% 0%; }
.card-animal-bunny { background-size: 278.66667% 228.83212%; background-position: 93.28358% 100%; --float-delay: -3.2s; }
.is-mounted .card-reveal { animation: card-appear 800ms var(--reveal-delay, 0ms) ease-out both; animation-play-state: paused; }
.is-mounted .card-portrait-inner { animation: portrait-breathe 6s ease-in-out infinite; animation-play-state: paused; }
.is-mounted .card-animal { animation: animal-breathe 5.6s var(--float-delay, 0ms) ease-in-out infinite; animation-play-state: paused; }
.is-running .card-reveal, .is-running .card-portrait-inner, .is-running .card-animal { animation-play-state: running; }
.is-complete .card-reveal { animation: none; opacity: 1; transform: none; }
@keyframes card-appear { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes portrait-breathe { 0%, 100% { transform: rotate(-1.3deg) translateY(0); } 50% { transform: rotate(1.3deg) translateY(-2px); } }
@keyframes animal-breathe { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg) translateY(-1px); } }
.card-sound {
  position: absolute; z-index: 5; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 10px;
  border: 1px solid #9a7a553b; border-radius: 4px; color: var(--ink); background: #fbf6eced; font: 400 10px/1.2 var(--sans); cursor: pointer;
}
.card-sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.card-sound[aria-pressed="false"] .sound-on, .card-sound[aria-pressed="true"] .sound-off { display: none; }
.card-sound:hover { background: var(--paper); }
.card-status { position: absolute; z-index: 6; bottom: 112px; left: 6%; width: 88%; margin: 0; padding: 8px; background: #fbf6eced; border-radius: 3px; font-size: 11px; text-align: center; }
.card-status:empty { display: none; }
.welcome-heading { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fox-position, .hedgehog-position {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  will-change: transform;
}
.fox-position { z-index: 4; }
.hedgehog-position { z-index: 4; }
.fox-bob, .hedgehog-bob { position: relative; width: 100%; height: 100%; transform-origin: 50% 90%; }
.animal-puppet { opacity: 1; }
.animal-puppet, .animal-puppet > canvas, .animal-puppet > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.story-ribbon { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 2px 2px #65472816); }
.ribbon-surface { fill: url('#story-paper'); stroke: #bb8a78; stroke-width: .85; stroke-linejoin: round; }
.ribbon-seam { fill: none; stroke: #b88a70; stroke-width: .6; stroke-linejoin: round; opacity: 0; }
.ribbon-guide { fill: none; stroke: none; }
.animal-story:has(#continue-button:hover:not(:disabled)) .ribbon-surface { fill: #f5e4d2; }

.orientation-notice {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  color: var(--ink);
  background: #fbf6ec url('/assets/paper.svg');
  text-align: center;
}
.orientation-notice svg {
  width: 72px;
  height: 72px;
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.orientation-notice p { margin: 0; font-size: 12px; line-height: 1.6; }
.orientation-notice .orientation-title { font: 400 34px/1.1 var(--serif); }
.is-orientation-blocked .guest-shell,
.is-orientation-blocked .skip-link { visibility: hidden; pointer-events: none; }

#continue-button {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 200px;
  height: 48px;
  min-height: 48px;
  padding: 8px 12px;
  border: 0;
  border-radius: 3px 8px 8px 3px;
  color: var(--terracotta-dark);
  background: transparent;
  box-shadow: none;
  font: 500 calc(clamp(20px, 5.5cqw, 24px) + 1px)/1.15 var(--serif);
  letter-spacing: .035em;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transform-origin: center top;
  transition: background-color 220ms ease, box-shadow 220ms ease;
}
#continue-button:disabled { cursor: default; opacity: 1; }
.cover-button-copy { display: inline-flex; align-items: center; gap: 12px; opacity: 0; }
.cover-button-copy > span { font-size: 20px; }
#continue-button:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
#continue-button:active:not(:disabled) .cover-button-copy { transform: translateY(1px) !important; }
@container (max-height: 620px) {
  .card-portrait { width: min(47cqw, 23.2cqh); margin-left: calc(min(47cqw, 23.2cqh) / -2); }
  .card-copy { top: 45.6cqh; }
  .card-greeting { font-size: calc(clamp(16px, min(5.5cqw, 3.1cqh), 22px) + 1px); line-height: 1.1; }
  .card-birthday { margin-top: .35cqh; font-size: calc(clamp(14px, min(4.6cqw, 2.7cqh), 20px) + 1px); line-height: 1.1; }
  .card-message { margin-top: .3cqh; font-size: calc(clamp(10px, min(3.4cqw, 2cqh), 14px) + 1px); line-height: 1.45; }
  .invitation-date { margin-top: .4cqh; font-size: calc(clamp(22px, min(7cqw, 3.8cqh), 29px) + 1px); line-height: 1.1; }
  .card-closing { margin-top: .2cqh; font-size: calc(clamp(10px, min(2.8cqw, 1.8cqh), 13px) + 1px); line-height: 1.35; }
}
@container (max-height: 580px) {
  .card-portrait { width: min(47cqw, 22.5cqh); margin-left: calc(min(47cqw, 22.5cqh) / -2); }
  .card-copy { top: 44.6cqh; }
  .card-message { line-height: 1.3; }
  .card-closing { line-height: 1.25; }
}
@media (max-width: 700px) and (orientation: portrait), (hover: none) and (pointer: coarse) {
  .guest-page.is-invitation { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; padding: 0; }
  .is-invitation .guest-card.welcome-card { width: 100%; height: 100%; max-width: none; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card-artwork, .card-portrait img { transition: none; }
  .card-reveal, .card-portrait-inner, .card-animal { animation: none !important; opacity: 1; transform: none; }
  #continue-button, .animal-puppet { transition: none; }
}