/* Riade Studios · Home (teaser)
   Tokens do Design System Riade: terracota é a única cor de destaque, cantos retos, sem sombras. */
@font-face{font-family:"Articulat";src:url(../fonts/Articulat-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
  --tinta:#242521; --creme:#f0e3db; --carvao:#22211f; --marca:#8d5137;
  --sans:"Articulat","Avenir Next","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--carvao);color:var(--creme);font:400 14px/1.6 var(--sans);-webkit-font-smoothing:antialiased}

.teaser{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.teaser__fundo,.teaser__fundo img{position:absolute;inset:0;width:100%;height:100%}
.teaser__fundo{z-index:-2}
.teaser__fundo img{object-fit:cover;object-position:42% 50%;animation:respiro 18s ease-out both}
/* Véu em carvão para o logo e o texto lerem sobre a foto */
.teaser::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 45% 40% at 50% 50%,rgba(34,33,31,.4),rgba(34,33,31,0) 75%),linear-gradient(rgba(34,33,31,.05),rgba(34,33,31,.3))}

.teaser__conteudo{display:flex;flex-direction:column;align-items:center;gap:40px;padding:96px 16px;text-align:center;animation:surge 1.6s .2s ease-out both}
.teaser__logo{margin:0;line-height:0}
.teaser__logo img{width:clamp(180px,24vw,300px);height:auto}
.teaser__texto{margin:0;padding-left:.32em;font:500 12px/1.6 var(--sans);letter-spacing:.32em;text-transform:uppercase}
.teaser__legenda{position:absolute;bottom:16px;right:16px;margin:0;font-size:10px;letter-spacing:.04em;opacity:.6}

@keyframes respiro{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes surge{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:640px){.teaser__fundo img{object-position:36% 50%}.teaser__conteudo{gap:28px}}
@media (prefers-reduced-motion:reduce){.teaser__fundo img,.teaser__conteudo{animation:none}}