/* ===============================================================
   page-shell.css
   Global elegant shell with therapy-safe entrance animation
   =============================================================== */

.page-shell{
  background: var(--c-card);
  border: 1px solid #c9a227;
  border-radius: 24px;
  box-shadow: var(--shadow-1);
  padding: 1.25rem;

  /* ✅ FIX: do not clip page content on mobile */
  overflow: visible;
  overflow-x: clip;

  animation: shell-fade-rise 720ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Avoid double shell on home (home has its own shell) */
.page-home .page-shell{
  border: none;
  padding: 0;
  box-shadow: none;
  animation: none;
}

@keyframes shell-fade-rise{
  from{
    opacity: 0;
    transform: translateY(14px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 920px){
  .page-shell{
    padding: 1.75rem;
    border-radius: 28px;
  }
}

@media (max-width: 520px){
  .page-shell{
    padding: 1rem;
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-shell{
    animation: none;
    transform: none;
  }
}