/* Pão de Alho do Julio — Biosite | estilos globais */
:root{--stable-vh:100svh}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
html,body{margin:0;padding:0;background:#070606;overflow-x:clip;touch-action:pan-y;overscroll-behavior:none;-webkit-font-smoothing:antialiased}
body{font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;color:#F5F1EA}
img{display:block;max-width:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button,a{-webkit-touch-callout:none}
a{color:#D6121A;text-decoration:none}
a:hover{color:#ff3b41}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:3px solid #D6121A;outline-offset:2px}
::selection{background:#D6121A;color:#fff}

/* fundo do desktop: fixed só onde não custa (mobile usa scroll) */
.palco{position:relative;min-height:100dvh;display:flex;justify-content:center;background-color:#070606;background-image:radial-gradient(58% 42% at 50% 8%,rgba(214,18,26,.16),rgba(7,6,6,0) 70%),radial-gradient(46% 34% at 50% 92%,rgba(214,18,26,.1),rgba(7,6,6,0) 72%),url(../images/concreto.webp);background-size:auto,auto,190px 190px;background-repeat:no-repeat,no-repeat,repeat;background-attachment:scroll,scroll,scroll;background-blend-mode:normal,normal,soft-light}
@media (min-width:900px) and (hover:hover){.palco{background-attachment:fixed,fixed,fixed}}

/* animações — só transform/opacity */
@keyframes zoomIn{from{transform:scale(1.1)}to{transform:scale(1)}}
@media (hover:hover) and (pointer:fine){#heroImg{will-change:transform;animation:zoomIn 2s cubic-bezier(.16,.84,.24,1) both}}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes riseRot{from{opacity:0;transform:translateY(24px) rotate(-1.5deg)}to{opacity:1;transform:translateY(0) rotate(-1.5deg)}}
@keyframes dropIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes slam{0%{opacity:0;transform:translateY(34px) scale(.82)}58%{opacity:1;transform:translateY(-5px) scale(1.05)}78%{transform:translateY(2px) scale(.99)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes breathe{0%,100%{transform:rotate(-2deg) scale(1)}50%{transform:rotate(-2deg) scale(1.018)}}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
@keyframes volta{from{transform:translate(-50%,-50%) rotate(0turn)}to{transform:translate(-50%,-50%) rotate(1turn)}}
@keyframes shine{0%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
@keyframes pulseCta{0%,100%{box-shadow:0 14px 34px rgba(214,18,26,.4),0 0 0 0 rgba(214,18,26,.34)}55%{box-shadow:0 16px 40px rgba(214,18,26,.5),0 0 0 12px rgba(214,18,26,0)}}
@keyframes pulseBar{0%,100%{box-shadow:0 10px 26px rgba(0,0,0,.55),0 0 0 0 rgba(214,18,26,.4)}55%{box-shadow:0 10px 26px rgba(0,0,0,.55),0 0 0 10px rgba(214,18,26,0)}}
@keyframes down{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}

/* animações contínuas param quando saem da tela (economia de CPU) */
.fora [style*="infinite"],.fora *{animation-play-state:paused!important}

/* ═══════════ TOUCH: geometria congelada ═══════════
   dvh é recalculado quando o navegador esconde/mostra a barra de endereço.
   No touch tudo que é fullscreen passa a usar --stable-vh, fixado uma vez. */
@media (hover:none),(pointer:coarse),(any-pointer:coarse){
  /* Hero: altura travada — nada de dvh */
  [data-screen-label="Hero"]{height:var(--stable-vh)!important;min-height:var(--stable-vh)!important;max-height:var(--stable-vh)!important}
  [data-screen-label="CTA final"]{height:var(--stable-vh)!important;min-height:var(--stable-vh)!important;max-height:var(--stable-vh)!important}
  .palco{min-height:var(--stable-vh)!important}

  /* hero: enquadramento imóvel durante o gesto */
  #heroImg{animation:none!important;transform:none!important;will-change:auto!important}

  /* cenas sticky viram fluxo vertical normal: o dedo nunca fica preso */
  [data-scene]{height:auto!important}
  [data-scene]>div{position:relative!important;top:auto!important;height:var(--stable-vh)!important;min-height:var(--stable-vh)!important}

  /* faixas de foto: dvh também acompanha a barra do navegador */
  [style*="height:32dvh"]{height:calc(var(--stable-vh) * .32)!important}
  [style*="height:34dvh"]{height:calc(var(--stable-vh) * .34)!important}
  [style*="min(78dvh"]{height:min(calc(var(--stable-vh) * .78),600px)!important}
  [style*="min(72dvh"]{height:min(calc(var(--stable-vh) * .72),560px)!important}

  /* sem transform contínuo nem camadas caras durante o scroll */
  [data-par-img],[data-a="zoom"],[data-a="drift"]{transform:none!important;will-change:auto!important}
  [data-a="mask"],[data-a="reveal"]{clip-path:none!important;will-change:auto!important}
  [style*="breathe"]{animation:none!important}
  .palco{background-attachment:scroll,scroll,scroll!important}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}