/* Movimento por área.
   Cada área do site tem o seu próprio movimento. Só transform e opacity animam, os efeitos de mouse
   só existem com mouse de verdade, e nada disso roda com "reduzir movimento" ativado.
   As classes .fx-ready e .motion-ready são ligadas por effects.js e site.js. */

/* ---- Menu: barra de leitura dourada e estado rolado ---- */
.header-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--gold), #ffe27a); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.site-header.is-scrolled { background: rgba(17,19,35,.97); box-shadow: 0 10px 28px rgba(0,0,0,.3); }
.brand-mark { transition: transform .35s cubic-bezier(.2,.7,.25,1); }
.site-header.is-scrolled .brand-mark { transform: scale(.86); }

/* ---- Transição entre páginas (navegadores com View Transitions; os demais navegam normalmente) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .24s ease-in both; }
::view-transition-new(root) { animation: vt-in .42s cubic-bezier(.2,.7,.25,1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

/* ---- Títulos: entrada em linhas, com um jeito por área ---- */
.fx-ready .is-split .hl { display: block; overflow: hidden; padding: 0 .08em .16em; margin: 0 -.08em -.16em; }
.fx-ready .is-split .hl-in { display: block; }
.fx-ready .is-split .hl-in { transition: transform .95s cubic-bezier(.2,.8,.2,1) calc(var(--l, 0) * 100ms), opacity .6s ease calc(var(--l, 0) * 100ms); }
.fx-ready .split-rise:not(.in-view) .hl-in { transform: translateY(108%); }
.fx-ready .split-drop:not(.in-view) .hl-in { transform: translateY(-108%); }
.fx-ready .split-slide:not(.in-view) .hl:nth-child(odd) .hl-in { transform: translateX(-70%); opacity: 0; }
.fx-ready .split-slide:not(.in-view) .hl:nth-child(even) .hl-in { transform: translateX(70%); opacity: 0; }
/* O trecho em itálico é "pintado" da esquerda para a direita depois que as linhas entram. */
.fx-ready .is-split:not(.hl-done) em { color: transparent; background: linear-gradient(90deg, var(--em-to) 50%, var(--em-from) 50%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; }
.fx-ready .is-split.in-view:not(.hl-done) em { background-position: 0 0; transition: background-position 1.1s cubic-bezier(.6,0,.2,1) .4s; }

/* ---- Invernadas: o card inclina, a foto anda por dentro e um brilho segue o mouse ---- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .group-card::after, .group-detail::after { position: absolute; z-index: 2; inset: 0; content: ''; background: radial-gradient(circle at calc(var(--gx, .5) * 100%) calc(var(--gy, .3) * 100%), var(--glare, rgba(255,236,170,.26)), transparent 58%); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
  .group-blue { --glare: rgba(170,196,255,.36); }
  .group-clay { --glare: rgba(255,206,176,.36); }
  .group-ink { --glare: rgba(244,205,63,.28); }
  .group-detail { transition: transform .5s cubic-bezier(.2,.7,.25,1), box-shadow .35s ease; }
  .group-card.is-tilting, .group-detail.is-tilting { z-index: 2; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); transition: transform .16s ease-out, box-shadow .35s ease; box-shadow: 14px 22px 40px rgba(7,17,59,.34); }
  .group-card.is-tilting::after, .group-detail.is-tilting::after { opacity: 1; }
  .group-card.is-tilting .group-card-photo, .group-detail.is-tilting .group-detail-image { transform: translate3d(calc(var(--px, 0) * -12px), calc(var(--py, 0) * -12px), 0) scale(1.09); transition: transform .2s ease-out; }
  .group-card.is-tilting :is(.group-symbol, .group-number), .group-detail.is-tilting > b { transform: translate(calc(var(--px, 0) * 7px), calc(var(--py, 0) * 7px)); }
  .group-card.is-tilting :is(h3, p), .group-detail.is-tilting :is(h3, p) { transform: translate(calc(var(--px, 0) * 4px), calc(var(--py, 0) * 4px)); }
  .group-card :is(.group-symbol, .group-number, h3, p), .group-detail :is(h3, p), .group-detail > b { transition: transform .35s cubic-bezier(.2,.7,.25,1); }
  .group-card.is-tilting :is(.group-symbol, .group-number, h3, p), .group-detail.is-tilting :is(h3, p), .group-detail.is-tilting > b { transition-duration: .2s; }
}

/* ---- Cartão de endereço: inclina com o mouse e a sombra dura acompanha; o pin emite ondas de radar ---- */
.visit-card { transition: transform .5s cubic-bezier(.2,.7,.25,1), box-shadow .5s cubic-bezier(.2,.7,.25,1); }
.visit-card.is-tilting { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(1.5deg); box-shadow: calc(14px - var(--px, 0) * 12px) calc(15px - var(--py, 0) * 12px) 0 var(--ink); transition-duration: .16s, .16s; transition-timing-function: ease-out; }
.visit-pin { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .visit-pin::before, .visit-pin::after { position: absolute; left: 50%; top: 46%; width: 14px; height: 14px; margin: -7px 0 0 -7px; content: ''; border: 1px solid var(--gold); border-radius: 50%; opacity: 0; animation: radar 3.2s ease-out infinite; pointer-events: none; }
  .visit-pin::after { animation-delay: 1.6s; }
}
@keyframes radar { 0% { opacity: .85; transform: scale(.6); } 100% { opacity: 0; transform: scale(5.5); } }

/* ---- Vivências de Galpão: a sombra dura foge da luz (o cursor) e o adesivo se solta do fundo ---- */
.vivencias-brand { transition: transform .5s cubic-bezier(.2,.7,.25,1), box-shadow .5s cubic-bezier(.2,.7,.25,1); }
.vivencias-brand.is-lit { transform: rotate(-.2deg) translate(calc(var(--sx, 0) * -.1px), calc(var(--sy, 0) * -.1px)); box-shadow: calc(16px + var(--sx, 0) * .55px) calc(18px + var(--sy, 0) * .55px) 0 rgba(17,19,35,.22); transition-duration: .18s, .18s; transition-timing-function: ease-out; }

/* ---- "Um sonho que se tornou realidade": o quadro pendurado balança ao aparecer e cede ao toque ---- */
.feature-logo { transform-origin: 50% 0; }
.feature-logo::after { position: absolute; z-index: 2; top: -8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; content: ''; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1a8, var(--gold) 45%, #b8901c); box-shadow: 0 2px 4px rgba(17,19,35,.35); }
@keyframes frame-swing { 0% { rotate: -5.5deg; } 22% { rotate: 3.6deg; } 44% { rotate: -2.2deg; } 66% { rotate: 1.2deg; } 84% { rotate: -.5deg; } 100% { rotate: 0deg; } }
.motion-ready .feature-logo.is-visible { animation: reveal-rise .44s cubic-bezier(.2,.7,.25,1) backwards, frame-swing 2.4s cubic-bezier(.3,.6,.4,1) .35s backwards; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .feature-logo { transition: rotate .7s cubic-bezier(.3,1.7,.5,1); }
  .feature-logo:hover { rotate: -1.8deg; }
}

/* ---- Números: contador mecânico ---- */
/* O texto de apoio da faixa (".intro-stat span") não pode atingir os dígitos do contador. */
.intro-stat strong :is(.odo, .odo-col, .odo-sizer, .odo-reel, .odo-sr) { color: inherit; font-size: inherit; line-height: 1; letter-spacing: inherit; }
.intro-stat strong .odo-sizer { line-height: 1.12; }
.odo { display: inline-flex; }
.odo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.odo-col { position: relative; display: inline-block; height: 1.12em; margin-block: -.06em; overflow: hidden; vertical-align: top; }
.odo-sizer { display: block; line-height: 1.12; visibility: hidden; }
.odo-reel { position: absolute; inset: 0 0 auto 0; display: flex; flex-direction: column; transition: transform calc(1.1s + var(--n, 0) * .2s) cubic-bezier(.2,.8,.2,1) calc(var(--n, 0) * 90ms); }
.odo-reel i { display: block; height: 1.12em; font-style: normal; line-height: 1.12; text-align: center; }
.odo.is-rolling .odo-reel { transform: translateY(calc(var(--to, 0) / 11 * -100%)); }

/* ---- Linha do tempo (página História): a linha se enche de ouro conforme a rolagem ---- */
.tl-fill { position: absolute; top: 0; bottom: 0; left: 156.5px; width: 2px; background: linear-gradient(180deg, var(--gold), #e2a817); transform: scaleY(0); transform-origin: 50% 0; pointer-events: none; }
.fx-ready .timeline-row::before { background: #d7d2c4; transition: background .4s ease, transform .5s cubic-bezier(.3,1.7,.5,1); }
.fx-ready .timeline-row.is-reached::before { background: var(--gold); transform: scale(1.4); animation: dot-pulse 1.1s ease-out; }
@keyframes dot-pulse { 0% { box-shadow: 0 0 0 4px var(--paper), 0 0 0 4px rgba(244,205,63,.75); } 100% { box-shadow: 0 0 0 4px var(--paper), 0 0 0 18px rgba(244,205,63,0); } }
.fx-ready .timeline-row time { color: #8e8a80; transform: translateX(-6px); transition: color .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.fx-ready .timeline-row.is-reached time { color: var(--blue); transform: none; }

/* ---- Linha do tempo (home): um traço dourado desenha cada linha da esquerda para a direita ---- */
.fx-ready .teaser-event { background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0 2px; transition: background-size .9s cubic-bezier(.6,0,.2,1) var(--d, 0ms), transform .2s ease, padding .25s ease; }
.fx-ready .teaser-event.is-drawn { background-size: 100% 2px; }
.fx-ready .teaser-event > b { opacity: 0; transform: translateX(-10px); transition: opacity .5s ease calc(var(--d, 0ms) + .5s), transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--d, 0ms) + .5s); }
.fx-ready .teaser-event.is-drawn > b { opacity: 1; transform: none; }

/* ---- Conquistas: estrela dourada em 3D, medalhas carimbadas e ano com brilho metálico ---- */
.honors-star.is-3d { --s: clamp(84px, 11vw, 124px); top: 54%; right: auto; bottom: auto; left: 11%; width: var(--s); height: var(--s); translate: -50% -50%; font-size: var(--s); perspective: 700px; filter: drop-shadow(0 14px 18px rgba(0,0,0,.42)); }
/* Estrela sólida: um prisma de ouro (frente e verso facetados + 10 laterais fechadas).
   Giro, luz de cada face e reflexo são animados por effects.js, todos sincronizados no mesmo ciclo. */
.honors-star-stack { --t: calc(var(--s) * .2); position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-12deg); }
.star-face { position: absolute; inset: 0; overflow: hidden; clip-path: polygon(var(--poly)); background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.34), rgba(255,255,255,0) 56%), conic-gradient(from 0deg at 50% 54.8%, #d9a010 0 36deg, #ffe58a 36deg 72deg, #d9a010 72deg 108deg, #ffe58a 108deg 144deg, #d9a010 144deg 180deg, #ffe58a 180deg 216deg, #d9a010 216deg 252deg, #ffe58a 252deg 288deg, #d9a010 288deg 324deg, #ffe58a 324deg 360deg); }
.star-front { transform: translateZ(calc(var(--t) / 2)); }
.star-back { transform: translateZ(calc(var(--t) / -2)) rotateY(180deg); }
.star-side { position: absolute; left: calc(var(--s) * var(--ex) - var(--s) * var(--el) / 2); top: calc(var(--s) * var(--ey) - var(--t) / 2); width: calc(var(--s) * var(--el)); height: var(--t); background: linear-gradient(180deg, #ffd95a 0%, #b88a0c 50%, #ffd95a 100%); transform: rotateZ(var(--ea)) rotateX(90deg); }
.star-shine { position: absolute; inset: -12%; background: linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 62%); transform: translateX(-70%); }
.star-glint { position: absolute; left: 50%; top: 4.8%; width: calc(var(--s) * .26); height: calc(var(--s) * .26); translate: -50% -50%; opacity: 0; pointer-events: none; background: radial-gradient(circle, #fff 0 14%, rgba(255,244,190,.85) 26%, rgba(255,244,190,0) 62%); }
.star-glint::before, .star-glint::after { position: absolute; left: 50%; top: 50%; width: 190%; height: 2px; content: ''; translate: -50% -50%; background: linear-gradient(90deg, rgba(255,255,255,0), #fff, rgba(255,255,255,0)); }
.star-glint::after { rotate: 90deg; }
.honors-year-num { font-weight: inherit; }
@keyframes medal-stamp { 0% { opacity: 0; transform: scale(1.8) rotate(-7deg); } 55% { opacity: 1; transform: scale(.92) rotate(1deg); } 100% { opacity: 1; transform: none; } }
@keyframes place-fade { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.motion-ready .honors-feature.is-visible .honors-placements strong { animation: medal-stamp .8s cubic-bezier(.2,.9,.3,1.2) backwards; }
.motion-ready .honors-feature.is-visible .honors-placements span { animation: place-fade .6s ease backwards; }
.motion-ready .honors-feature.is-visible .honors-placements > div:nth-child(1) :is(strong, span) { animation-delay: .5s; }
.motion-ready .honors-feature.is-visible .honors-placements > div:nth-child(2) :is(strong, span) { animation-delay: .8s; }
.motion-ready .honors-feature.is-visible .honors-placements > div:nth-child(3) :is(strong, span) { animation-delay: 1.1s; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .honors-year-num { color: transparent; background: linear-gradient(105deg, var(--gold) 38%, #fff6c8 50%, var(--gold) 62%) 100% 0 / 260% 100% no-repeat; -webkit-background-clip: text; background-clip: text; animation: year-sheen 6.5s ease-in-out 1.4s infinite; }
  }
}
/* A posição fica sempre entre 0% e 100%, para o gradiente nunca deixar um dígito descoberto. */
@keyframes year-sheen { 0%, 45% { background-position: 100% 0; } 80%, 100% { background-position: 0% 0; } }

/* ---- Visite: as portas do galpão se abrem para mostrar a entrada ---- */
.barn-door { display: none; }
.motion-ready .barn-door { position: absolute; z-index: 3; top: 0; bottom: 0; display: block; width: 50.4%; background: linear-gradient(180deg, transparent 17.6%, rgba(244,205,63,.5) 17.6% 18.2%, transparent 18.2% 81.8%, rgba(244,205,63,.5) 81.8% 82.4%, transparent 82.4%), repeating-linear-gradient(90deg, #1b1e36 0 46px, #0e101f 46px 48px); transition: transform 1.5s cubic-bezier(.76,0,.2,1) .25s; pointer-events: none; }
.motion-ready .barn-door::after { position: absolute; top: 45%; width: 8px; height: 58px; content: ''; border-radius: 2px; background: var(--gold); }
.barn-door-left { left: 0; border-right: 1px solid rgba(244,205,63,.35); }
.barn-door-left::after { right: 18px; }
.barn-door-right { right: 0; border-left: 1px solid rgba(244,205,63,.35); }
.barn-door-right::after { left: 18px; }
.motion-ready .visit-entrance img { transform: scale(1.16); transition: transform 2.2s cubic-bezier(.2,.7,.2,1) .35s; }
.motion-ready .visit-entrance.is-visible img { transform: none; }
.motion-ready .visit-entrance.is-visible .barn-door-left { transform: translateX(-102%); }
.motion-ready .visit-entrance.is-visible .barn-door-right { transform: translateX(102%); }

/* ---- Patronagem: a pessoa troca com um giro de carta ---- */
.patronage-stage { perspective: 1200px; touch-action: pan-y; }
.flip-out-forward { animation: flip-out-forward .2s ease-in both; }
.flip-out-back { animation: flip-out-back .2s ease-in both; }
.flip-in-forward { animation: flip-in-forward .38s cubic-bezier(.2,.8,.25,1) both; }
.flip-in-back { animation: flip-in-back .38s cubic-bezier(.2,.8,.25,1) both; }
@keyframes flip-out-forward { to { opacity: 0; transform: rotateY(-72deg) translateX(-34px); } }
@keyframes flip-out-back { to { opacity: 0; transform: rotateY(72deg) translateX(34px); } }
@keyframes flip-in-forward { from { opacity: 0; transform: rotateY(72deg) translateX(34px); } }
@keyframes flip-in-back { from { opacity: 0; transform: rotateY(-72deg) translateX(-34px); } }

/* ---- Botões: afundam ao toque e voltam com uma mola leve, mantendo os cantos retos ---- */
.button, .button-instagram, .button-whatsapp, .primary-nav a.nav-visit, .group-contact, .whatsapp-button, .social-button, .cookie-button:not(.cookie-button-link) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .45s cubic-bezier(.3,1.5,.5,1), filter .2s ease, background .22s ease, color .22s ease, border-color .2s ease; }
.button:active, .button-instagram:active, .button-whatsapp:active, .primary-nav a.nav-visit:active, .group-contact:active, .group-detail .group-contact:active, .whatsapp-button:active, .social-button:active, .cookie-button:not(.cookie-button-link):active { transform: scale(.95); filter: brightness(.95); transition-duration: .09s, .09s, .22s, .22s, .2s; transition-timing-function: ease-out; }
.carousel-arrows button, .featured-event-close { touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .45s cubic-bezier(.3,1.5,.5,1), color .2s ease, background .2s ease; }
.carousel-arrows button:active, .featured-event-close:active { transform: scale(.88); transition-duration: .09s, .2s, .2s; transition-timing-function: ease-out; }

@media (max-width: 760px) {
  .tl-fill { left: 83.5px; }
  .honors-star.is-3d { --s: 62px; top: 48px; left: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}