/* Retained for LegacyOpeningScreen and the original dog-and-cat artwork. */
.opening-app-content { display: contents; }
.opening-screen { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: max(var(--space-24), env(safe-area-inset-top)) var(--space-24) max(var(--space-24), env(safe-area-inset-bottom)); background: var(--color-surface, #f7f2e8); color: var(--color-text, #302218); box-sizing: border-box; }
.opening-welcome { width: min(380px, 100%); text-align: center; }
.opening-scene { position: relative; width: 100%; aspect-ratio: 1.6; --opening-toast-offset: clamp(6px, 2vw, 10px); }
.opening-halo { position: absolute; inset: 10% 4% 6%; border-radius: 50%; background: radial-gradient(ellipse, #eec99040, #eec9900a 65%, transparent 72%); }
.opening-ground { position: absolute; left: 19%; right: 19%; bottom: 6%; height: 12px; background: #80532c16; filter: blur(7px); border-radius: 50%; }
.opening-character { position: absolute; width: 52%; height: auto; bottom: 7%; will-change: transform; }
.opening-dog { left: 0; transform-origin: 68% 88%; }
.opening-cat { right: 0; transform-origin: 32% 88%; }
.opening-screen--ready .opening-dog { animation: opening-dog-toast 1250ms cubic-bezier(.2,.65,.35,1) both; }
.opening-screen--ready .opening-cat { animation: opening-cat-toast 1250ms cubic-bezier(.2,.65,.35,1) both; }
.opening-logo-fallback { width: 68%; margin: 5% auto 0; border-radius: 28%; }
.opening-clink { position: absolute; left: calc(50% - 24px); top: 45%; width: 48px; height: 48px; color: var(--color-cherry, #ad421b); opacity:0; }
.opening-screen--ready .opening-clink { animation: opening-clink 1250ms ease-out both; }
.opening-wordmark { font-family: var(--font-display, "DM Serif Display", Georgia, serif); font-size: clamp(38px, 8vw, 48px); font-weight:400; line-height: 1.1; letter-spacing: -.035em; margin: var(--space-8) 0 0; }
.opening-status { margin: var(--space-16) 0 0; font-family: var(--font-body, "DM Sans", system-ui, sans-serif); font-size: 14px; font-weight:400; line-height:1.5; color: var(--color-text-muted, #756656); }
.opening-dots { display: flex; justify-content: center; gap: var(--space-8); margin-top: var(--space-16); }
.opening-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--color-cherry, #ad421b); animation: opening-pulse 1200ms ease-in-out infinite; }
.opening-dots span:nth-child(2) { animation-delay: 160ms; }
.opening-dots span:nth-child(3) { animation-delay: 320ms; }
.opening-screen--closing { animation: opening-exit 320ms ease-in forwards; }
[data-theme="after-hours"] .opening-halo { background: radial-gradient(ellipse, #e6bd7320, #e6bd7305 65%, transparent 72%); }
[data-theme="after-hours"] .opening-ground { background: #0005; }
@keyframes opening-dog-toast {
  0%, 27% { transform: translate(0, 0) rotate(0); }
  62%, 72% { opacity: 1; transform: translate(var(--opening-toast-offset), -9px) rotate(6deg); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0); }
}
@keyframes opening-cat-toast {
  0%, 27% { transform: translate(0, 0) rotate(0); }
  62%, 72% { opacity: 1; transform: translate(calc(-1 * var(--opening-toast-offset)), -9px) rotate(-6deg); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0); }
}
@keyframes opening-clink {
  0%, 57% { opacity: 0; transform: scale(.4) rotate(-12deg); }
  67% { opacity: 1; transform: scale(1) rotate(0); }
  90%, 100% { opacity: 0; transform: scale(1.3) rotate(12deg); }
}
@keyframes opening-pulse { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes opening-exit { to { opacity: 0; } }
@media (max-height: 560px) { .opening-welcome { width: min(260px, 100%); } .opening-wordmark { font-size: 36px; margin-top: var(--space-8); } .opening-status { margin-top: var(--space-8); } .opening-dots { margin-top: var(--space-8); } }
@media (prefers-reduced-motion: reduce) {
  .opening-screen, .opening-screen *, .opening-screen *::before, .opening-screen *::after { animation: none !important; transition: none; }
  .opening-character { will-change: auto; }
  .opening-clink { display: none; }
  .opening-dots span { opacity: .55; }
  .opening-screen--closing { opacity: 0; }
}