/* Mantua Pet Nutrition — shared enhancement layer
   Loaded after each page's inline styles. Safe to remove: pages work without it. */

/* ---------- Sticky nav ---------- */
.nav{position:sticky;top:0;z-index:50;transition:box-shadow .25s ease}
.js .nav.scrolled{box-shadow:0 4px 18px rgba(20,30,25,.28)}

/* ---------- Hero entrance ---------- */
@keyframes heroUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.js .hero .in > *{animation:heroUp .7s ease-out both}
.js .hero .in > :nth-child(2){animation-delay:.12s}
.js .hero .in > :nth-child(3){animation-delay:.24s}
.js .hero .in > :nth-child(4){animation-delay:.36s}
.hero img{transition:transform 12s ease-out}
.js .hero.loaded img{transform:scale(1.06)}

/* ---------- Scroll reveal ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
.js .grid .reveal:nth-child(2){transition-delay:.08s}
.js .grid .reveal:nth-child(3){transition-delay:.16s}
.js .grid .reveal:nth-child(4){transition-delay:.08s}
.js .grid .reveal:nth-child(5){transition-delay:.16s}
.js .grid .reveal:nth-child(6){transition-delay:.24s}

/* ---------- Cards ---------- */
.card{transition:box-shadow .25s ease,transform .25s ease}
.card img{transition:transform .5s ease}
.card:hover{box-shadow:0 16px 34px rgba(0,0,0,.13);transform:translateY(-4px)}
.card:hover img{transform:scale(1.05)}
.card a.more{transition:letter-spacing .2s ease}
.card:hover a.more{letter-spacing:.02em}

/* ---------- CTA buttons ---------- */
.cta{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;box-shadow:0 6px 16px rgba(192,138,45,.35)}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(192,138,45,.45)}
.cta::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);animation:ctaShine 5s ease-in-out infinite}
@keyframes ctaShine{0%,72%{left:-80%}88%,100%{left:130%}}

/* ---------- FAQ ---------- */
.faq details{transition:background .25s ease,border-color .25s ease}
.faq details[open]{background:#fff;border-color:var(--gold)}
.faq summary{transition:color .2s ease}
.faq details p{animation:heroUp .35s ease-out both}

/* ---------- Pre-footer consult band ---------- */
.consult-band{background:linear-gradient(135deg,var(--green-dk),var(--green));color:#fff;text-align:center;padding:56px 24px;margin-top:64px}
.consult-band h2{color:#fff;margin:0 0 8px;font-size:1.65rem}
.consult-band p{color:#e8e4d8;max-width:52ch;margin:0 auto 22px}
.consult-band .badge{display:inline-block;background:rgba(240,213,154,.18);color:#f0d59a;border:1px solid rgba(240,213,154,.45);border-radius:999px;padding:5px 16px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.consult-band .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.consult-band .cta.ghost{background:transparent;border:2px solid rgba(255,255,255,.7);box-shadow:none}
.consult-band .cta.ghost:hover{background:rgba(255,255,255,.12);box-shadow:none}
.consult-band + .nap{margin-top:0}

/* ---------- Mobile sticky call bar ---------- */
.callbar{display:none}
@media(max-width:820px){
  .callbar{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;box-shadow:0 -6px 20px rgba(0,0,0,.18)}
  .callbar a{flex:1;text-align:center;padding:15px 8px;font-weight:700;font-size:.98rem;text-decoration:none;color:#fff}
  .callbar .call{background:var(--green-dk)}
  .callbar .consult{background:var(--gold)}
  .js .callbar{transform:translateY(100%);transition:transform .35s ease}
  .js .callbar.show{transform:none}
  body{padding-bottom:52px}
  .nap{padding-bottom:44px}
}

/* ---------- Self-drawing paw (consult band) ---------- */
.consult-band{position:relative;overflow:hidden}
.pawdraw{position:absolute;left:4%;top:50%;transform:translateY(-50%) rotate(-12deg);width:92px;height:70px;opacity:.85}
@media(max-width:820px){.pawdraw{display:none}}
.pawdraw path{fill:none;stroke:#f0d59a;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.js .pawdraw.in path{animation:drawPath 1.1s ease-out forwards}
.js .pawdraw.in path:nth-child(2){animation-delay:.15s}
.js .pawdraw.in path:nth-child(3){animation-delay:.3s}
.js .pawdraw.in path:nth-child(4){animation-delay:.45s}
.js .pawdraw.in path:nth-child(5){animation-delay:.6s}
@keyframes drawPath{to{stroke-dashoffset:0}}
html:not(.js) .pawdraw path{stroke-dashoffset:0}

/* ---------- Microinteractions ---------- */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:#f0d59a;transition:right .25s ease}
.nav a:hover::after{right:0}
.faq summary{list-style:none;position:relative;padding-right:30px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--gold);transition:transform .3s ease}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.callbar .ph{display:inline-block;animation:ring 4s ease-in-out infinite}
@keyframes ring{0%,88%,100%{transform:none}90%{transform:rotate(12deg)}92%{transform:rotate(-10deg)}94%{transform:rotate(8deg)}96%{transform:rotate(-6deg)}98%{transform:rotate(3deg)}}

/* ---------- Mobile nav (hamburger) ---------- */
.nav-burger{display:none}
@media(max-width:820px){
  .js .nav .brand span{display:none}
  .js .nav-burger{display:inline-flex;align-items:center;background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;padding:2px 8px;cursor:pointer}
  .js .nav .nav-links{display:none;flex-basis:100%;flex-direction:column;padding:4px 0 6px}
  .js .nav.open .nav-links{display:flex}
  .js .nav .nav-links a{margin:0;padding:11px 2px;font-size:1rem;border-top:1px solid rgba(255,255,255,.16)}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .js .hero.loaded img{transform:none}
  .pawdraw path{stroke-dashoffset:0!important}
}