/* Filmes — Mielina design system v1.
   Layout only; every colour, space, radius and type role comes from the
   shared layer. Source of truth: design-system/mielina/MASTER.md. */

@import url('../components.css?v=c1ea0fd2');

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: clip;
}

/* Aurora — the space pair, cold at the edges, behind the hero only. */
.aurora {
  position: absolute;
  inset: -24% -12% auto;
  height: 820px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(42% 52% at 50% 22%, rgba(46, 56, 85, 0.62), transparent 70%),
    radial-gradient(34% 44% at 74% 12%, rgba(46, 204, 113, 0.16), transparent 70%),
    radial-gradient(70% 42% at 50% 0%, rgba(30, 39, 60, 0.55), transparent 76%);
  filter: saturate(1.2);
}

/* ---------- chrome ---------- */

.appbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
}
.bar-left { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.appbar .mark { color: var(--fg); text-decoration: none; font-weight: 800; letter-spacing: -0.01em; }
.appbar .mark:hover { opacity: 0.75; }
.appbar .slash { color: var(--muted); }
.appbar .product { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar .stamp {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--type-mono-meta-size);
  letter-spacing: var(--type-mono-meta-ls);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.appbar .stamp .dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--status-live); }

/* ---------- shell ---------- */

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--space-3); }

.hero { position: relative; z-index: 1; padding: var(--space-5) 0 var(--space-4); }
.hero h1 {
  margin: var(--space-2) 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 6.4vw, 72px);
  line-height: var(--type-display-hero-lh);
  letter-spacing: -0.025em;
  max-width: 18ch;
  text-wrap: balance;
}
.lede {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: var(--type-body-lede-size);
  line-height: var(--type-body-lede-lh);
}

.kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-mono-kicker-size);
  line-height: var(--type-mono-kicker-lh);
  letter-spacing: var(--type-mono-kicker-ls);
  text-transform: uppercase;
  color: var(--muted);
}
.kicker .n { color: var(--fg); margin-right: var(--space-1); }

/* ---------- blocks ---------- */

.block { padding: var(--space-5) 0 0; }
.block h2 {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--type-heading-card-size);
  line-height: var(--type-heading-card-lh);
  letter-spacing: var(--type-heading-card-ls);
  font-weight: 700;
  text-wrap: balance;
}
.body {
  margin: 0 0 var(--space-3);
  max-width: 68ch;
  color: var(--muted);
  font-size: var(--type-body-base-size);
  line-height: var(--type-body-base-lh);
}

/* ---------- filme cards ---------- */

.filmes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-3);
}

.filme {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: var(--space-3);
  padding: var(--space-2);
}

.poster {
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 30% 0%, color-mix(in srgb, var(--g1) 55%, transparent), transparent 70%),
    radial-gradient(120% 90% at 80% 100%, color-mix(in srgb, var(--g2) 42%, transparent), transparent 70%),
    var(--bg-elev);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hanzi {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  color: var(--fg);
  opacity: 0.92;
}
.hanzi-pair { font-size: 64px; letter-spacing: 2px; line-height: 0.9; }

.filme-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.filme-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--type-mono-meta-ls);
  text-transform: uppercase;
  color: var(--muted);
}
.filme-meta .nota { color: var(--fg); font-weight: 700; }

.filme-body h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.filme-body h3 .orig { font-weight: 400; color: var(--muted); margin-left: 6px; }
.filme-body .dir { margin: 0; color: var(--muted); font-size: var(--type-body-small-size); }

.sinopse { margin: 4px 0 0; max-width: 60ch; color: var(--fg); font-size: var(--type-body-small-size); line-height: 1.6; }
.tag-line { margin: 0; max-width: 60ch; color: var(--muted); font-size: 13px; line-height: 1.6; }
.tag-line strong { color: var(--fg); font-weight: 700; }

/* ---------- footer ---------- */

.foot { margin-top: var(--space-5); border-top: 1px solid var(--line); padding: var(--space-3) 0 var(--space-5); }
.foot p { margin: 0 0 var(--space-1); max-width: 68ch; color: var(--muted); font-size: var(--type-body-small-size); line-height: 1.6; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

@media (max-width: 640px) {
  .filme { grid-template-columns: 88px 1fr; }
  .hanzi { font-size: 32px; }
  .hero { padding: var(--space-4) 0 var(--space-3); }
}

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