/* Eita: a camada dinâmica da página.
   - transitions.dev (MIT): card-tilt e shimmer-text, copiados do pacote transitions-dev (conjunto gratuito)
   - React Bits (MIT + Commons Clause): CircularGallery e ScrollVelocity, montados por dyn/islands.js */
 /* a fonte da marca: Xilosa, de Atila Milanio, inspirada na xilogravura de cordel (só nos títulos) */
@font-face { font-family: "Xilosa"; src: url("../media/xilosa.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* subtítulos, cartões e botões ficam na fonte de texto: na Xilosa o "&" é um chapéu de cangaceiro */
h3, h4, .t-card { font-family: var(--font-text); letter-spacing: -0.01em; }
/* a logo: 40px na barra, 64px no rodapé */
.nav__logo img { height: 40px; width: auto; }
.nav__logo--foot img { height: 64px; }
@media (max-width: 639px) { .nav__logo img { height: 34px; } .nav__logo--foot img { height: 40px; } }

:root {
  --tilt-perspective: 1000px; --tilt-return: 1000ms; --tilt-return-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-follow: 400ms; --tilt-follow-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-glare-opacity: 0.32; --tilt-glare-fade: 300ms; --tilt-glare-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shimmer-dur: 2600ms; --shimmer-base: var(--p-ink); --shimmer-highlight: #8794ff; --shimmer-band: 400%; --shimmer-ease: linear;
}

/* card-tilt (transitions.dev) */
.t-tilt-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  transform: perspective(var(--tilt-perspective)) rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg));
  transform-style: preserve-3d; transition: transform var(--tilt-return) var(--tilt-return-ease); will-change: transform;
}
.t-tilt-card.is-tilting { transition: transform var(--tilt-follow) var(--tilt-follow-ease); }
.t-tilt-glare {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background:
    radial-gradient(circle 95px at var(--tilt-gx, 50%) var(--tilt-gy, 50%), rgba(255,255,255,0.48), rgba(255,255,255,0.06) 52%, rgba(255,255,255,0) 84%),
    radial-gradient(circle 200px at var(--tilt-gx, 50%) var(--tilt-gy, 50%), rgba(255,255,255,0.22), rgba(255,255,255,0.04) 58%, rgba(255,255,255,0) 78%),
    radial-gradient(circle 360px at var(--tilt-gx, 50%) var(--tilt-gy, 50%), rgba(255,255,255,0.10), rgba(255,255,255,0) 88%);
  transition: opacity var(--tilt-glare-fade) var(--tilt-glare-ease);
}
.t-tilt.is-hover .t-tilt-glare { opacity: var(--tilt-glare-opacity); }
@media (prefers-reduced-motion: reduce) { .t-tilt-card { transform: none !important; transition: none !important; } }

/* shimmer-text (transitions.dev) */
.t-shimmer { position: relative; display: inline-block; color: var(--shimmer-base); }
.t-shimmer::before {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, transparent 0%, transparent 40%, var(--shimmer-highlight) 50%, transparent 60%, transparent 100%);
  background-size: var(--shimmer-band) 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
}
@keyframes t-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .t-shimmer::before { animation: none !important; } }

/* os filmes: a galeria circular (React Bits) de borda a borda; sem ela, a grade de filmes */
#filmes .films__live { flex: 1 1 0; min-height: 360px; margin-inline: calc(50% - 50vw); }
#filmes.is-live .films__grid { display: none; }
#filmes .films__hint { display: none; margin-top: var(--s-2); font-size: var(--t-small); color: var(--muted); }
#filmes.is-live .films__hint { display: block; }

/* a frase do estúdio: duas linhas que correm com a rolagem (React Bits ScrollVelocity) */
#estudio > .wrap { display: flex; flex-direction: column; }
.velocity { margin-top: auto; margin-inline: calc(50% - 50vw); padding-bottom: var(--s-2); overflow: hidden; }
.velocity > section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); min-width: 0; overflow: hidden; }
.velocity .parallax { overflow: hidden; min-width: 0; }
#estudio, #filmes { overflow-x: clip; }
.velocity .scroller { font: var(--display-weight) clamp(44px, 7vw, 104px)/1.1 var(--font-display); letter-spacing: var(--display-tracking-xl); color: var(--p-ink); filter: none; }
.velocity section > :nth-child(2) .scroller { color: var(--p-action); }

/* os quadros que inclinam */
#loja .t-tilt { min-height: 0; }
#loja .t-tilt > .develop { width: 100%; }
#pedido .frame.t-tilt { overflow: visible; background: none; }
#pedido .frame.t-tilt > .t-tilt-card { position: absolute; inset: 0; }
#pedido .frame.t-tilt > .t-tilt-card > img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { #loja .t-tilt { min-height: 240px; } #loja .t-tilt > .develop { height: 100%; } }
@media (max-width: 639px) { #loja .t-tilt { min-height: 200px; } }
@media (hover: none) { .t-tilt { touch-action: auto; } }

/* o filme em tela cheia */
.player { width: min(92vw, calc(86svh * 9 / 16)); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--p-inv-bg); overflow: visible; }
.player::backdrop { background: color-mix(in oklab, var(--p-inv-bg) 82%, transparent); }
.player video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: var(--r-lg); background: #000; }
.player__close { position: absolute; top: calc(-1 * var(--s-7)); right: 0; width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--p-bg); color: var(--p-ink); font: 500 22px/1 var(--font-text); cursor: pointer; }
@media (max-width: 639px) { .player__close { top: var(--s-2); right: var(--s-2); z-index: 2; } }

/* as redes no rodapé: o ícone de cada uma ao lado do nome; os mesmos ícones na linha final */
.footer__col--soc a { display: inline-flex; align-items: center; gap: var(--s-2); }
.soc-ic { width: 16px; height: 16px; flex: none; }
.socials .soc-ic { width: 16px; height: 16px; }
.link-plain { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.footer__legal .socials a { display: inline-flex; align-items: center; justify-content: center; padding: 0; }