/* Entre Cenas: uma sala escura para as histórias da coleção. */
@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/SpaceGrotesk-Variable.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/Fraunces-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --paper: #10110f;
  --paper-deep: #1d1e1a;
  --surface: #191b18;
  --ink: #f1eee6;
  --ink-soft: #c4c3ba;
  --muted: #a6a69d;
  --line: #393a33;
  --accent: #e6ad65;
  --dark-surface: #242019;
  --sans: "Space Grotesk", "Segoe UI", sans-serif;
  --serif: "Fraunces", Georgia, serif;
}

html, body { overflow-x: clip; }

body {
  background: var(--paper);
  background-image: radial-gradient(ellipse 65% 28% at 80% 0%, #2a231988, transparent 75%);
  line-height: 1.55;
}

::selection { background: var(--accent); color: var(--paper); }

.skip-link {
  position: fixed;
  z-index: 40;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--paper);
  transform: translateY(-180%);
}

.skip-link:focus { transform: translateY(0); }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.site-header { min-height: 88px; }

.brand,
.site-footer > span {
  font-family: var(--serif);
  font-weight: 430;
  letter-spacing: -0.055em;
  font-variation-settings: "SOFT" 18, "WONK" 0;
}

.brand { font-size: 27px; }
.brand-accent { color: var(--accent); }

.brand-icon {
  position: relative;
  width: 20px;
  height: 34px;
  border: 2px solid var(--ink);
  border-radius: 0;
}

.brand-icon span {
  position: absolute;
  left: 100%;
  top: 6px;
  width: 24px;
  height: 18px;
  margin: 0;
  border: 0;
  background: linear-gradient(90deg, #e6ad6588, transparent);
  clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 75%);
}

.header-caption { color: var(--muted); }

.icon-button {
  min-width: 54px;
  height: 44px;
  border-color: #71634e;
  color: var(--accent);
}

.icon-button:hover,
.modal-close:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--paper);
}

/* O fotograma ocupa a largura da janela; os controles continuam na grade do app. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100vw;
  min-height: min(780px, calc(100svh - 88px));
  min-height: clamp(590px, calc(100svh - 88px), 780px);
  margin-inline: calc((min(100vw - 88px, var(--page-width)) - 100vw) / 2);
  padding: 86px max(44px, calc((100vw - var(--page-width)) / 2)) 94px;
  overflow: hidden;
  background: #0a0b0a;
}

.hero::before,
.hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.hero::before {
  z-index: 1;
  background: linear-gradient(90deg, #0a0b0a 0%, #0a0b0ae8 18%, #0a0b0abd 45%, #0a0b0a34 76%),
    linear-gradient(0deg, #0a0b0a9c, transparent 32%);
}

.hero::after {
  z-index: 1;
  inset: auto 0 0;
  height: 1px;
  background: #ffffff36;
}

.hero-art,
.hero-art-frame,
.hero-art-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
}

.hero-art { z-index: -1; display: block; }
.hero-art-image { object-fit: cover; object-position: center; aspect-ratio: auto; }

.hero-art-frame figcaption {
  position: absolute;
  right: max(44px, calc((100vw - var(--page-width)) / 2));
  bottom: 26px;
  z-index: 2;
  color: #f1eee6cc;
  font-size: 11px;
  text-shadow: 0 1px 10px #000;
}

.hero-art-frame figcaption::before { background: var(--accent); }

.projection-sweep {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 17%;
  width: 45%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #e6ad6512 48%, #f9dbae32 50%, transparent 52%);
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 3;
  width: min(850px, 100%);
  padding: 0;
}

.eyebrow { color: var(--accent); }

.hero h1,
.section-heading h2,
.insight-card h3,
.detail-content h2,
.settings-modal h2 {
  font-family: var(--serif);
  font-weight: 430;
  letter-spacing: -0.055em;
  font-variation-settings: "SOFT" 18, "WONK" 0;
}

.hero h1 {
  max-width: 850px;
  margin: 30px 0 24px;
  font-size: clamp(53px, 5.8vw, 86px);
  line-height: 1.08;
  text-wrap: balance;
}

.hero-word { display: block; width: max-content; max-width: 100%; white-space: nowrap; }
.hero-word:last-child { color: var(--accent); }

.hero-copy > p:not(.eyebrow) {
  max-width: 43ch;
  color: #e0ded4;
  font-size: 17px;
  line-height: 1.7;
}

.hero-link {
  min-height: 48px;
  margin-top: 27px;
  padding: 0 18px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #17130e;
}

.hero-link span { color: #17130e; }
.hero-link:hover { border-color: #f1c58b; background: #f1c58b; color: #17130e; }

.film-marquee { border-color: #4d4538; background: #181711; }
.marquee-group { min-height: 54px; color: #c9bdad; }
.marquee-group i { width: 3px; height: 3px; border-radius: 50%; }

.overview { min-height: 156px; border-bottom-color: var(--line); }
.overview > div, .overview-note { padding-block: 28px; }
.overview-number {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 43px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.07em;
}
.overview-label { color: #b6afa1; }
.overview-note { color: #b9b2a5; }

.section-nav {
  background: #121310ee;
  backdrop-filter: blur(16px);
  border-color: var(--line);
}
.nav-button { min-height: 64px; color: #aaa99f; }
.nav-button span { color: #99958b; }
.nav-button:hover, .nav-button.is-active { color: var(--ink); }
.nav-button.is-active { border-bottom-color: var(--accent); }

.app-section { padding-block: 94px 116px; }
.section-heading { align-items: end; margin-bottom: 35px; }
.section-heading h2 {
  max-width: 24ch;
  font-size: clamp(39px, 4.4vw, 64px);
  line-height: 1.12;
}
.section-heading .eyebrow { letter-spacing: .18em; }
.source-badge, .section-aside { color: #aaa89c; }
.section-aside { font-size: 15px; }

.search-form {
  max-width: 760px;
  min-height: 66px;
  padding: 7px 8px 7px 20px;
  border-color: #686657;
  background: #1c1d19;
}
.search-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.search-form input { color: var(--ink); font-size: 15px; }
.search-form input::placeholder { color: #aaa99f; }
.search-form button, .primary-button {
  min-height: 48px;
  border-color: var(--accent);
  background: var(--accent);
  color: #17130e;
}
.search-form button:hover, .primary-button:hover {
  border-color: #f1c58b;
  background: #f1c58b;
  color: #17130e;
  filter: none;
}

.catalog-toolbar { margin-top: 52px; }
.catalog-toolbar p:first-child { font-family: var(--serif); font-size: 20px; font-weight: 400; }
#catalog-count { color: var(--muted); }
.feedback-message { border-left-color: var(--accent); color: var(--ink-soft); }

.skeleton-poster, .skeleton-line {
  background: linear-gradient(100deg, #262821 24%, #454033 45%, #262821 66%);
  background-size: 220% 100%;
}

.film-grid { gap: 38px 20px; }
.film-poster { background: var(--poster-bg, linear-gradient(150deg, #79684a, #212520 80%)); }
.film-poster::before { inset: 7%; border-color: #f7e7cf69; transform: none; }
.film-poster::after {
  width: 45%;
  right: -2%;
  bottom: -8%;
  border-color: #f7e7cf44;
  box-shadow: 0 0 0 13px #f7e7cf0d, 0 0 0 27px #f7e7cf0b;
}
.film-cover-button:hover .film-poster::before,
.film-cover-button:focus-visible .film-poster::before { transform: scale(.96); }
.film-cover-button:hover .film-poster img,
.film-cover-button:focus-visible .film-poster img { transform: scale(1.045); }
.film-poster.has-image { background: #242520; }
.poster-mark { border-color: #f6e9d1a6; }
.poster-title { font-family: var(--serif); font-size: clamp(19px, 2.1vw, 28px); font-weight: 400; line-height: 1.14; }
.card-title { color: var(--ink); font-size: 15px; }
.card-meta { color: #aaa99e; font-size: 12px; }
.quick-add { width: 44px; height: 44px; margin: 0; border-color: #71634e; color: var(--accent); }
.quick-add:hover { border-color: var(--accent); background: var(--accent); color: var(--paper); }
.quick-add.is-saved { border-color: var(--accent); background: #e6ad651c; color: var(--accent); }
.rating-line { color: var(--accent); }

.filter-button { min-height: 44px; padding-inline: 16px; color: #b5b3a9; }
.filter-button:hover { color: var(--accent); }
.filter-button.is-active { border-color: #867053; background: #2a251c; color: var(--ink); }
.sort-label select { min-height: 44px; border-color: #71634e; }

.stat-cards { border-color: var(--line); }
.stat-card { min-height: 190px; }
.stat-card strong { color: var(--accent); font-family: var(--serif); font-size: 62px; font-weight: 400; }
.insight-grid { gap: 0; margin-top: 0; }
.insight-card { padding: 36px; background: transparent; border-color: var(--line); }
.insight-card + .insight-card { border-left: 0; }
.insight-card h3 { font-size: 27px; }
.genre-track { height: 5px; background: #313028; }
.genre-fill { background: var(--accent); }
.quote-card { background: #242019; }
.quote-card .eyebrow { color: var(--accent); }
.quote-card h3, .memory-carousel blockquote > p { color: var(--ink); }
.quote-card .text-link { border-bottom-color: var(--accent); color: var(--ink); }
.quote-card .text-link span { color: var(--accent); }
.quote-card .text-link:hover { color: var(--accent); }
.memory-empty, .memory-carousel blockquote footer, .memory-position { color: #c9c1b4; }
.memory-carousel cite { color: var(--ink); }
.memory-controls button { width: 44px; height: 44px; border-color: #75664f; color: var(--ink); }
.memory-controls button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

.site-footer { min-height: 145px; }
.site-footer > span { font-size: 25px; }
.site-footer > p, .tmdb-credit p { color: #b8b5a9; }
.tmdb-credit img { filter: brightness(1.45) saturate(.6); }

.modal { border-color: #74634c; background: #181a17; box-shadow: 0 30px 90px #000a; }
.modal::backdrop { background: #050605e6; }
.modal-close { width: 44px; height: 44px; background: #1d1f1b; }
.detail-content h2, .settings-modal h2 { line-height: 1.13; }
.detail-content select, .detail-content input[type="date"], .detail-content textarea, .settings-modal input {
  min-height: 48px;
  border-color: #696658;
  background: #252722;
  color: var(--ink);
  font-size: 14px;
}
.detail-content :disabled { background: #1f211d; color: #a19f94; }
.detail-overview, .settings-modal > p:not(.eyebrow) { color: var(--ink-soft); }
.form-error { color: #f2a8a0; }
.toast { background: var(--accent); color: #19140e; }

@media (max-width: 980px) {
  .hero { margin-inline: calc((min(100vw - 56px, var(--page-width)) - 100vw) / 2); padding-inline: 28px; }
  .hero-art-frame figcaption { right: 28px; }
  .hero h1 { font-size: clamp(48px, 6vw, 72px); }
}

@media (max-width: 720px) {
  .site-header { min-height: 72px; }
  .hero {
    width: 100vw;
    min-height: 650px;
    margin-inline: -20px;
    padding: 58px 24px 85px;
    align-items: end;
  }
  .hero-art-image { object-position: 31% center; }
  .hero::before {
    background: linear-gradient(0deg, #090a09 2%, #090a09ed 23%, #090a0999 53%, #090a091c 90%),
      linear-gradient(90deg, #090a0955, transparent 90%);
  }
  .hero h1 { max-width: 100%; margin: 19px 0; font-size: clamp(43px, 9vw, 62px); }
  .hero-word { width: auto; white-space: normal; }
  .hero-copy > p:not(.eyebrow) { max-width: 37ch; font-size: 15px; }
  .hero-art-frame figcaption { right: 24px; bottom: 18px; font-size: 10px; }
  .overview-number { font-size: 32px; }
  .app-section { padding-block: 70px 84px; }
  .section-heading h2 { font-size: clamp(37px, 8vw, 52px); }
  .film-grid { gap: 30px 15px; }
  .quick-add { width: 44px; height: 44px; }
  .stat-card { min-height: 155px; }
  .stat-card strong { font-size: 44px; }
  .insight-grid { gap: 0; }
  .insight-card + .insight-card { border-left: 1px solid var(--line); border-top: 0; }
  .insight-card { padding: 25px; }
  .detail-layout { grid-template-columns: minmax(105px, .65fr) minmax(0, 1fr); }
}

@media (max-width: 380px) {
  .hero { margin-inline: -16px; min-height: 610px; padding-inline: 20px; }
  .hero h1 { font-size: 42px; }
  .hero-art-frame figcaption { display: none; }
  .detail-layout { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .projection-sweep { display: none; }
  .hero-art-image, .film-poster img, .film-poster::before { transform: none !important; }
}