/* Apertura animata di myPetDietPro (js/apertura.js), sul sito e all'arrivo nel gestionale (/app/): stessa regola dei siti Nexorat. */
@font-face { font-family: "DM Sans"; src: url("/fonts/dm-sans-latin.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }
:root { --font-ap: "DM Sans", ui-sans-serif, system-ui, sans-serif; }
/* ---------------------------------------------------------------- apertura animata (js/apertura.js) */
html.ap-on, html.ap-on body { overflow: hidden; }
html.ap-on body > *:not(#ap) { visibility: hidden; }
html.ap-on body > *:not(#ap) * { animation-play-state: paused; }
#ap { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: linear-gradient(180deg, #F7FAF1 0%, #FFFFFF 55%, #EDF8FA 100%); cursor: pointer; will-change: transform; -webkit-tap-highlight-color: transparent; }
.ap-palco { width: min(84vw, 560px); opacity: 0; display: grid; justify-items: center; gap: 18px; }
#ap.ap-pronto .ap-palco { opacity: 1; }
.ap-marchio { width: 100%; height: auto; overflow: visible; }
.ap-l, .ap-punto { transform-box: fill-box; }
.ap-l { transform: translateY(170px); }
.ap-punto { transform-origin: 50% 50%; opacity: 0; }
.ap-motto { margin: 0; color: #4E676D; font: 500 clamp(.92rem, .82rem + .5vw, 1.08rem)/1.35 var(--font-ap); opacity: 0; text-align: center; text-wrap: balance; }
.ap-piede { position: absolute; left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 8px; }
.ap-salta { margin: 0; font: 500 .86rem/1 var(--font-ap); color: #053E4A; opacity: 0; white-space: nowrap; }
.ap-firma { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px; border-radius: 999px; color: #0d0d0d; font: 700 1rem/1 var(--font-ap); letter-spacing: -.01em; text-decoration: none; opacity: 0; }
.ap-firma img { width: auto; height: 22px; }
@media (hover: hover) { .ap-firma:hover { background: rgba(255, 255, 255, .7); text-decoration: underline; } }
@media (prefers-reduced-motion: reduce) {
  html.ap-on, html.ap-on body { overflow: auto; }
  html.ap-on body > *:not(#ap) { visibility: visible; }
  #ap { display: none; }
}