/* Conceito: a página é o poster. Cada secção é uma colina cortada na diagonal,
   com brilho de entardecer no horizonte. Quem faz scroll desce do azul ao vermelho. */
:root {
  --night: #0f1625;
  --dusk: #1b2438;
  --slate: #2b3248;
  --ember: #e6a57d;
  --rust: #a4593c;
  --bone: #f1dfc7;
  --mist: #b9b5ae;
  --blood: #b3141c;
  --clot: #3a0609;

  --display: "League Gothic", "Arial Narrow", "Liberation Sans Narrow", sans-serif;
  --slugline: "Courier Prime", "Courier New", monospace;
  --body: "Spectral", Georgia, serif;

  --gutter: clamp(16px, 5vw, 72px);
  --ridge: clamp(44px, 9vw, 132px);
  color-scheme: dark;
}

@font-face { font-family: "League Gothic"; src: url("../assets/fonts/league-gothic-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../assets/fonts/courier-prime-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../assets/fonts/spectral-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Spectral"; font-style: italic; src: url("../assets/fonts/spectral-latin-400-italic.woff2") format("woff2"); font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--bone);
  font: 400 1.125rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, dl, dd, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
::selection { background: var(--blood); color: var(--bone); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 20;
  background: var(--bone); color: var(--night); padding: 8px 14px;
}
.skip:focus { top: 12px; }

.grain {
  position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
  width: 100%;
  max-width: 1640px;
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Colinas */
.band { position: relative; --top: var(--dusk); }
.band + .band { margin-top: calc(-1 * var(--ridge)); }
.ridge { width: 100%; height: var(--ridge); margin-bottom: -1px; position: relative; }
.ridge__fill { fill: var(--top); }
.ridge__line {
  fill: none; stroke: var(--ember); stroke-width: 1.5;
  stroke-dasharray: 16 5 34 7 9 4;
  vector-effect: non-scaling-stroke; opacity: .75;
}
.band__inner { position: relative; }

.band--hero { --top: var(--night); }
.band--hero .band__inner {
  background: linear-gradient(var(--night) 0, var(--dusk) 66%, var(--slate) 82%, var(--rust) 100%);
  padding-bottom: calc(var(--ridge) + clamp(28px, 4vw, 64px));
}
.band--film { --top: var(--night); }
.band--film .band__inner {
  background: linear-gradient(var(--night) 0, var(--dusk) 62%, var(--slate) 80%, var(--rust) 100%);
  padding-top: clamp(32px, 5vw, 72px);
  padding-bottom: calc(var(--ridge) + clamp(56px, 8vw, 112px));
}
.band--about { --top: var(--dusk); }
.band--about .band__inner {
  background: linear-gradient(var(--dusk) 0, var(--slate) 66%, var(--rust) 90%, var(--ember) 100%);
  padding-top: clamp(32px, 5vw, 72px);
  padding-bottom: calc(var(--ridge) + clamp(56px, 8vw, 112px));
}
.band--social { --top: var(--night); }
.band--social .band__inner {
  background: linear-gradient(var(--night) 0, var(--dusk) 58%, var(--slate) 78%, var(--rust) 100%);
  padding-top: clamp(24px, 4vw, 56px);
  padding-bottom: calc(var(--ridge) + clamp(56px, 8vw, 104px));
}
.band--end { --top: var(--clot); }
.band--end .ridge__line { stroke: var(--blood); opacity: 1; }
.band--end .band__inner {
  background:
    linear-gradient(var(--clot) 0, rgba(58, 6, 9, 0) 55%),
    var(--clot) url("../assets/img/footer-red.webp") center bottom / cover no-repeat;
  min-height: clamp(280px, 34vw, 460px);
  display: flex; align-items: flex-end;
  padding-bottom: 28px;
}

/* Tipografia partilhada */
.slug {
  font: 400 .875rem/1.3 var(--slugline);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ember);
}
.h2 {
  font: 400 clamp(3.5rem, 9vw, 7.5rem)/.92 var(--display);
  text-transform: uppercase;
  letter-spacing: .005em;
  text-wrap: balance;
}
.h3 {
  font: 400 clamp(1.75rem, 3vw, 2.5rem)/1 var(--display);
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Topo */
.top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 32px;
  padding-top: max(24px, env(safe-area-inset-top, 0px));
  padding-bottom: 24px;
  position: relative; z-index: 3;
}
.wordmark {
  font: 400 1.875rem/1 var(--display);
  letter-spacing: .1em;
  text-decoration: none;
  color: var(--bone);
}
.wordmark span { color: var(--ember); }
.nav { display: flex; gap: clamp(16px, 3vw, 40px); }
.nav a {
  font: 400 .875rem/1.8 var(--slugline);
  text-transform: uppercase; letter-spacing: .08em;
  text-decoration: none; color: var(--bone);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, color .25s;
}
.nav a:hover { color: var(--ember); border-color: var(--ember); }

/* Hero */
.hero { padding-top: clamp(8px, 2vw, 24px); }
.hero__foot { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
.hero__copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; position: relative; z-index: 2; }
.hero__scene img {
  width: 100%;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 42%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 42%, transparent 100%);
}
.title {
  font: 400 clamp(6.5rem, 33vw, 12rem)/.84 var(--display);
  text-transform: uppercase;
  color: var(--bone);
  letter-spacing: .005em;
  position: relative; z-index: 2; isolation: isolate;
}
.title__line { display: block; }

/* O fantasma: uma cópia luminosa da palavra, ao lado da palavra sólida, como no poster. */
.title__ghost { position: relative; width: max-content; max-width: 100%; }
.title__ghost::before {
  content: attr(data-ghost);
  position: absolute; left: 0; top: 0; z-index: -1;
  pointer-events: none;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 246, 232, .8);
  filter: drop-shadow(0 0 10px rgba(255, 225, 190, .85)) drop-shadow(0 0 28px rgba(230, 165, 125, .55));
  transform: translate(calc(.07em + var(--gx, 0px)), calc(-.035em + var(--gy, 0px)));
  animation: appear 2.2s .35s cubic-bezier(.2, .7, .2, 1) backwards;
}
@keyframes appear {
  from { opacity: 0; transform: translate(0, 0); }
}

.tagline { font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.3; max-width: 26ch; }
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--bone); color: var(--night);
  font: 400 1.5rem/1 var(--display);
  text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none;
  padding: 16px 28px 15px;
  transition: background .25s, color .25s;
}
.btn--wide { justify-content: center; }
.btn:hover { background: var(--blood); color: var(--bone); }
@media (min-width: 760px) {
  .title {
    display: flex; flex-wrap: wrap; gap: 0 .18em;
    font-size: min(calc((100vw - 2 * var(--gutter) - 24px) / 4.3), 21.5rem);
  }
  .title__ghost { max-width: none; }
  .hero__foot { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); align-items: center; }
  .hero__copy { padding-top: clamp(24px, 3.5vw, 56px); }
  .hero__scene { margin-top: clamp(-64px, -3vw, -16px); }
}

/* Curta */
.film {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px;
}
.film__poster { display: grid; gap: 14px; max-width: 480px; }
.film__poster img { width: 100%; box-shadow: 0 30px 70px rgba(5, 8, 16, .7); }
.film__text { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.lead { font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.45; max-width: 42ch; }
.rates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 30rem; margin-block: 8px; }
.rate {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 16px;
  border: 1px solid var(--ember);
  text-decoration: none;
  transition: background .25s, color .25s;
}
.rate__site { font: 400 1.75rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.rate__score { display: inline-flex; align-items: center; gap: 6px; font: 400 .9375rem/1.3 var(--slugline); color: var(--ember); transition: color .25s; }
.rate:hover { background: var(--ember); color: var(--night); }
.rate:hover .rate__score { color: var(--night); }
.sheet { display: grid; gap: 0; width: 100%; max-width: 40rem; border-bottom: 1px solid rgba(241, 223, 199, .22); }
.sheet > div {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 12px;
  padding-block: 9px; border-top: 1px solid rgba(241, 223, 199, .22);
  font-family: var(--slugline); font-size: .9375rem;
}
.sheet dt { color: var(--ember); text-transform: uppercase; letter-spacing: .05em; font-size: .8125rem; line-height: 1.8; }
.next {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px;
  margin-top: clamp(48px, 7vw, 88px);
}
.next__reel { font: 400 clamp(2.25rem, 4vw, 3.25rem)/1 var(--display); text-transform: uppercase; color: var(--ember); }
.next__state { font-style: italic; }
.next__state a { text-underline-offset: 3px; }
.next__state a:hover { color: var(--ember); }
@media (min-width: 900px) {
  .film { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 64px; align-items: start; }
  .film__poster { max-width: none; }
}

/* Produtora */
.about { display: grid; gap: clamp(28px, 4vw, 48px); }
.people { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.people li { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 1px solid rgba(241, 223, 199, .3); min-width: 0; }
.people .h3 { font-size: clamp(2.25rem, 3.6vw, 3.25rem); }
.people p { font: 400 1rem/1.45 var(--slugline); color: var(--ember); max-width: 30ch; }
@media (min-width: 760px) {
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
}

/* Redes */
.social { display: grid; gap: clamp(28px, 4vw, 48px); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; text-decoration: none; min-width: 0;
}
.tile__ring {
  width: 96px; height: 96px; display: grid; place-items: center;
  margin-bottom: 8px;
  border-radius: 50%;
  border: 1.5px solid #fff6e8;
  color: #fff6e8;
  box-shadow: 0 0 18px rgba(255, 225, 190, .45), inset 0 0 14px rgba(255, 225, 190, .18);
  transition: background .3s, color .3s, box-shadow .3s, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.tile__ring svg {
  width: 48px; height: 48px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
}
.tile:hover .tile__ring {
  background: var(--bone); color: var(--night); transform: translateY(-4px);
  box-shadow: 0 0 34px rgba(255, 225, 190, .85);
}
.tile__name { font: 400 2rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.tile__handle { font: 400 .8125rem/1.3 var(--slugline); color: var(--ember); max-width: 100%; overflow-wrap: anywhere; }
.contact { font: 400 1rem/1.5 var(--slugline); text-align: center; overflow-wrap: anywhere; }
.contact a { color: var(--ember); text-underline-offset: 4px; }
.contact a:hover { color: var(--bone); }
@media (min-width: 620px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

@media (max-width: 480px) {
  .sheet > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* Fim */
.end { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; }
.wordmark--end { font-size: 2.5rem; }
.wordmark--end span { color: var(--bone); opacity: .75; }
.end__legal { font: 400 .8125rem/1.5 var(--slugline); color: var(--bone); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}