/* Seção "Emergência vet" da página inicial.
   Segue o mesmo sistema de animação do resto da home (mesa.js): título e faixa entram ao rolar, os post-its caem
   com alfinete/fita, balançam de leve e, depois de pousar, cada um ganha seu movimento: sirene piscando, ambulância
   chegando, selo 24h pulsando, aviso balançando. Só transform/opacity/clip-path animam (leve em aparelho fraco). */
.em-sec{position:relative;margin:30px 0 0;padding:0 16px}
.em-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 2px 12px}
.em-h{margin:0;padding:0;font-size:28px;line-height:1;letter-spacing:-.04em;color:var(--ink,#0B1220)}
.em-h .sf{color:var(--red,#E5392A)}
.em-live{display:inline-flex;align-items:center;gap:8px;flex:none;font:800 12.5px/1 'Inter',sans-serif;color:var(--red,#E5392A);letter-spacing:.01em}
.em-live i{position:relative;display:block;width:11px;height:11px;border-radius:50%;background:var(--red,#E5392A)}
.em-live i::after,.em-live i::before{content:"";position:absolute;border-radius:50%}
.em-live i::after{inset:0;background:var(--red,#E5392A)}
.em-live i::before{inset:-5px;border:2px solid rgba(229,57,42,.4);opacity:0}
.em-head.in .em-live i::after{animation:em-pulse 1.5s ease-out infinite}
.em-head.in .em-live i::before{animation:em-pulse 1.5s ease-out .4s infinite}
@keyframes em-pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.7);opacity:0}}

/* faixa de alerta: abre da esquerda para a direita quando o título aparece e só "corre" enquanto está na tela */
.em-tape{position:relative;height:14px;margin:0 -16px 20px;overflow:hidden;box-shadow:0 6px 10px -8px rgba(11,18,32,.6);transform:rotate(-1deg)}
.em-head.mx-rv:not(.in)+.em-tape{opacity:0;clip-path:inset(0 100% 0 0);transform:translate3d(0,10px,0) rotate(-1deg)}
.em-head.mx-rv.in+.em-tape{opacity:1;clip-path:inset(0 0 0 0);transform:rotate(-1deg);transition:clip-path .75s cubic-bezier(.22,1,.36,1) .08s,opacity .3s ease .08s,transform .45s cubic-bezier(.22,1,.36,1) .08s}
.em-tape i{position:absolute;left:-60px;right:-60px;top:0;bottom:0;background:repeating-linear-gradient(135deg,#E8B923 0 16px,#0B1220 16px 32px);transform:translateZ(0)}
.em-head.in+.em-tape i{animation:em-tape 1s linear infinite;will-change:transform}
@keyframes em-tape{to{transform:translateX(45.2548px)}}

/* os 3 cards cabem sempre na tela */
.em-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;padding:8px 0 4px}
.em-pn{position:relative;display:block;min-width:0;color:var(--ink,#0B1220);text-decoration:none;-webkit-tap-highlight-color:transparent}
.em-pn.mx-rv,.em-pn.mx-rv.mx-above,.em-pn.mx-rv.in{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
.em-body{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;height:100%;min-height:196px;padding:18px 6px 12px;border-radius:4px 4px 4px 22px;background:var(--bg);color:var(--fg,inherit);box-shadow:0 20px 22px -14px rgba(11,18,32,.65),0 4px 8px rgba(11,18,32,.18);transform:rotate(var(--r,0deg))}
.em-body::before{content:"";position:absolute;left:50%;top:-9px;width:56px;height:18px;margin-left:-28px;background:rgba(255,255,255,.66);transform:rotate(-2deg);box-shadow:0 1px 2px rgba(11,18,32,.15)}
.em-pn.mx-rv:not(.in) .em-body{opacity:0;transform:translate3d(-10px,-52px,0) rotateZ(calc(var(--r,0deg) - 9deg)) scale(.88);animation:none!important}
.em-pn.in .em-body{opacity:1;animation:mh-paper-fall .56s cubic-bezier(.22,1,.36,1) var(--rd,0s) backwards}
.em-pn.in .em-body::before{animation:em-tape-on .5s cubic-bezier(.22,1,.36,1) calc(var(--rd,0s) + .3s) both}
@keyframes em-tape-on{0%{opacity:0;transform:rotate(-12deg) scale(.5)}100%{opacity:1;transform:rotate(-2deg) scale(1)}}
.em-im{display:flex;align-items:flex-end;justify-content:center;width:100%;height:78px;position:relative}
.em-im::after{content:"";position:absolute;left:14%;right:14%;bottom:-2px;height:9px;border-radius:50%;background:radial-gradient(closest-side,rgba(11,18,32,.3),rgba(11,18,32,0));pointer-events:none}
.em-im img{display:block;width:100%;height:100%;object-fit:contain;position:relative;z-index:1;transition:transform .22s cubic-bezier(.3,1.6,.5,1)}
.em-pn:active .em-im img{transform:scale(.93)}
@media (hover:hover){.em-pn:hover .em-im img{transform:scale(1.08)}.em-pn:hover .em-go b{transform:translateX(2px)}}
.em-body h3{margin:9px 0 0;font:900 14.5px/1.08 'Inter',sans-serif;letter-spacing:-.03em;text-wrap:balance}
.em-body p{margin:5px 0 0;font:600 11px/1.2 'Inter',sans-serif;opacity:.78;text-wrap:balance}
.em-go{margin-top:auto;padding-top:10px}
.em-go b{display:inline-flex;align-items:center;gap:4px;padding:6px 11px;border-radius:99px;font:900 11.5px/1 'Inter',sans-serif;background:rgba(11,18,32,.92);color:#fff;white-space:nowrap;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.is-red{--bg:linear-gradient(165deg,#F0503F,#D8301F);--fg:#fff}
.is-red .em-go b{background:#fff;color:#E5392A}
.is-yel{--bg:#FFE27A}
.is-ink{--bg:linear-gradient(170deg,#16223C 0%,#0B1220 100%);--fg:#fff}
.is-ink .em-go b{background:#E8B923;color:#0B1220}

/* ambulância: chega, balança e a sirene pisca (azul e vermelho se alternam) */
.em-amb{position:relative;display:block;width:100%;max-width:108px;aspect-ratio:600/515}
.em-amb img{position:absolute;inset:0;z-index:1}
.em-sl{z-index:2}
.em-sl{position:absolute;display:block;width:34%;aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%)}
.em-sl-b{left:50.5%;top:18.5%;background:radial-gradient(circle,rgba(70,130,255,.95) 0,rgba(70,130,255,.55) 30%,rgba(70,130,255,0) 68%)}
.em-sl-r{left:65%;top:14%;background:radial-gradient(circle,rgba(255,60,50,.95) 0,rgba(255,60,50,.55) 30%,rgba(255,60,50,0) 68%)}
.em-pn.in .em-amb{animation:em-drive .8s cubic-bezier(.2,.9,.3,1.15) calc(var(--rd,0s) + .5s) both,em-bob 1.7s ease-in-out calc(var(--rd,0s) + 1.4s) infinite}
.em-pn.in .em-sl-b{animation:em-flash .8s steps(1,end) calc(var(--rd,0s) + 1.1s) infinite}
.em-pn.in .em-sl-r{animation:em-flash .8s steps(1,end) calc(var(--rd,0s) + 1.5s) infinite}
@keyframes em-drive{0%{opacity:0;transform:translateX(-46px) skewX(-8deg)}60%{opacity:1;transform:translateX(5px) skewX(2deg)}100%{opacity:1;transform:translateX(0) skewX(0)}}
@keyframes em-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2.5px) rotate(.7deg)}}
@keyframes em-flash{0%{opacity:.95}50%{opacity:0}100%{opacity:0}}

/* plantão 24h: ícone "bate" como um coração e o selo 24h pulsa */
.em-hos{position:relative;display:block;width:76px;height:76px}
.em-hos img{position:absolute;inset:0}
.em-pn.in .em-hos img{animation:em-beat 1.9s ease-in-out calc(var(--rd,0s) + 1s) infinite}
.em-badge{position:absolute;right:-8px;top:-2px;min-width:30px;padding:4px 6px;border-radius:99px;background:#E5392A;color:#fff;font:900 10.5px/1 'Inter',sans-serif;text-align:center;box-shadow:0 5px 8px -3px rgba(180,35,26,.7);transform-origin:center}
.em-badge::after{content:"";position:absolute;inset:0;border-radius:99px;border:2px solid #E5392A;opacity:0}
.em-pn.in .em-badge{animation:em-badge 1.9s ease-in-out calc(var(--rd,0s) + 1s) infinite}
.em-pn.in .em-badge::after{animation:em-ring 1.9s ease-out calc(var(--rd,0s) + 1s) infinite}
@keyframes em-beat{0%,100%{transform:scale(1)}14%{transform:scale(1.09)}28%{transform:scale(1)}42%{transform:scale(1.06)}56%{transform:scale(1)}}
@keyframes em-badge{0%,100%{transform:scale(1)}14%{transform:scale(1.14)}28%{transform:scale(1)}}
@keyframes em-ring{0%{opacity:.8;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.9,2.3)}}

/* intoxicação: aviso balança de leve */
.em-tox{display:block;width:76px;height:76px}
.em-tox img{width:100%;height:100%;transform-origin:50% 85%}
.em-pn.in .em-tox img{animation:em-wob 2.6s ease-in-out calc(var(--rd,0s) + 1.1s) infinite}
@keyframes em-wob{0%,60%,100%{transform:rotate(0)}68%{transform:rotate(-5deg)}76%{transform:rotate(5deg)}84%{transform:rotate(-3deg)}92%{transform:rotate(2deg)}}

/* durante a abertura (splash) tudo fica parado, como no resto da home */
html.sp:not(.sp-go) .em-sec,html.sp:not(.sp-go) .em-sec *{animation-play-state:paused!important}

@media (max-width:359px){.em-h{font-size:24px}.em-body h3{font-size:13px}.em-body p{font-size:10.5px}.em-im{height:66px}.em-hos,.em-tox{width:64px;height:64px}.em-live{font-size:11.5px}.em-body{min-height:182px}}
@media (min-width:600px){.em-grid{gap:20px 16px;max-width:760px}.em-body{padding:22px 12px 14px;min-height:240px}.em-im{height:112px}.em-hos,.em-tox{width:104px;height:104px}.em-amb{max-width:150px}.em-body h3{font-size:18px}.em-body p{font-size:13px}.em-go b{font-size:13px;padding:8px 14px}}
@media (min-width:1024px){body[data-page="home"] .em-sec{padding:0;margin-top:8px}body[data-page="home"] .em-tape{margin:0 0 20px;border-radius:3px}body[data-page="home"] .em-head{max-width:760px}}

/* modo leve (aparelho fraco): só a queda do post-it e a faixa; sem loops pesados */
html.lite .em-head.in .em-live i::before,html.lite .em-pn.in .em-hos img,html.lite .em-pn.in .em-badge::after,html.lite .em-pn.in .em-tox img{animation:none}
html.lite .em-pn.in .em-body{animation:mh-paper-fall .56s cubic-bezier(.22,1,.36,1) var(--rd,0s) backwards}
html.lite .em-pn.in .em-amb{animation:em-drive .8s cubic-bezier(.2,.9,.3,1.15) calc(var(--rd,0s) + .5s) both}