/* Curta Passira — portal
   Palette comes straight from the logo: hoop blue, thread magenta,
   needle grey, on white cotton. */

:root {
  --azul: #00427F;
  --noite: #062749;
  --magenta: #C8006A;
  --magenta-escuro: #9E0054;
  --rosa: #FFC2DD;
  --algodao: #F8F9FC;
  --agulha: #C9CACC;
  --tinta: #0B1F3A;
  --tinta-2: #44546B;

  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --wrap: 1200px;
  --radius: 14px;
  --section-y: clamp(72px, 10vw, 136px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--algodao);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.02; letter-spacing: -0.025em; margin: 0; }
p { margin: 0; }

/* Magenta focus ring fails 3:1 on the dark and magenta panels: override there */
.films, .premiere, .footer { --focus: var(--rosa); }
.town { --focus: #fff; } /* no focusables today; guards future links on magenta */

:focus-visible {
  outline: 3px solid var(--focus, var(--magenta));
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--azul); color: #fff; padding: 10px 16px; border-radius: 8px;
  text-decoration: none; font-weight: 700;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Linen weave: the page is the cloth */
.hero, .shorts, .insta {
  background-color: var(--algodao);
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 66, 127, .028) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(0, 66, 127, .028) 0 1px, transparent 1px 5px);
}

/* Seams: every section is a panel stitched to the one above */
.films, .shorts, .town, .premiere, .insta, .footer { position: relative; }
.films::before, .shorts::before, .town::before, .premiere::before, .insta::before, .footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 14px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--seam, var(--magenta)) 0 16px, transparent 16px 26px);
  opacity: .9;
}
.town { --seam: #fff; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .85em 1.35em;
  border-radius: 999px;
  background: var(--magenta); color: #fff;
  font-weight: 800; font-size: 1rem; line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--magenta-escuro); }
.btn .yt { width: 1.2em; height: 1.2em; fill: currentColor; margin-left: -.2em; }
.btn-small { padding: .65em 1.05em; font-size: .9375rem; }
.btn-outline { background: transparent; color: var(--magenta); border-color: var(--magenta); }
.btn-outline:hover { background: var(--magenta); color: #fff; }
.btn-light { background: #fff; color: var(--azul); }
.btn-light:hover { background: var(--rosa); }

.link {
  font-weight: 700;
  color: var(--azul);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--magenta);
}
.link:hover { color: var(--magenta); }
.link-light { color: #fff; text-decoration-color: var(--rosa); }
.link-light:hover { color: var(--rosa); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248, 249, 252, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgba(0, 66, 127, .08);
}
.topbar-inner {
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 12px var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand img { width: 40px; height: auto; }
.brand-name { font-weight: 900; font-size: 1.1875rem; letter-spacing: -.02em; }
.brand-curta { color: var(--azul); }
.brand-passira { color: var(--magenta); }
.nav { display: flex; gap: 26px; }
.nav a { text-decoration: none; font-weight: 600; color: var(--tinta-2); }
.nav a:hover { color: var(--magenta); }

/* Phones: the section links move to a second, scrollable row */
@media (max-width: 820px) {
  html { scroll-padding-top: 116px; }
  .topbar-inner { flex-wrap: wrap; row-gap: 8px; padding-bottom: 8px; }
  /* 6px of padding, cancelled by the negative margin, keeps the focus ring
     inside the scroll container instead of clipped by it */
  .nav {
    order: 3;
    width: calc(100% + 12px);
    margin-inline: -6px;
    padding: 6px;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav a:focus-visible { outline-offset: 1px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; font-size: .9375rem; }
}
@media (max-width: 520px) {
  .wide-only { display: none; }
}
@media (max-width: 400px) {
  .brand-name { font-size: 1.0625rem; }
  .btn-small { padding: .6em .9em; font-size: .875rem; }
}

/* ---------- Hero ---------- */
.hero {
  padding-block: clamp(40px, 7vw, 96px) clamp(64px, 8vw, 112px);
  overflow: clip;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.hero h1 {
  font-size: clamp(2.75rem, 6.6vw, 5.75rem);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.035em;
  color: var(--azul);
  max-width: 11ch;
}
.hero-seam {
  display: block;
  width: min(420px, 80%);
  height: 5px;
  margin: 28px 0 26px;
  background: repeating-linear-gradient(90deg, var(--magenta) 0 18px, transparent 18px 26px);
  transform: rotate(-1.2deg);
  transform-origin: left center;
}
.motion .hero-seam { clip-path: inset(0 100% 0 0); transition: clip-path 1s steps(16, end); }
.motion .hero-seam.is-in { clip-path: inset(0 0 0 0); }

.lede {
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.5;
  color: var(--tinta);
  max-width: 34ch;
  margin-bottom: 30px;
}
.stats {
  margin-top: 34px;
  font-size: .9375rem;
  color: var(--tinta-2);
  max-width: 44ch;
}

.hero-art { margin: 0; position: relative; }
.hoop { width: 100%; height: auto; overflow: visible; display: block; }
.hoop-photo { transform-box: fill-box; transform-origin: center; }
.hero-art figcaption {
  font-size: .8125rem; color: var(--tinta-2);
  text-align: right; margin-top: 4px; padding-right: 8%;
}

/* Initial states for the load sequence; main.js animates them in */
.motion .ring { stroke-dasharray: 1584; stroke-dashoffset: 1584; }
.motion .hoop-photo { opacity: 0; }
.motion .clasp { opacity: 0; }
.motion .ring-detail { opacity: 0; }
.motion .needle { opacity: 0; }
.motion .thread-mask { stroke-dasharray: 3000; stroke-dashoffset: 3000; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 460px; width: 92%; margin-inline: auto; order: -1; }
  .hero h1 { max-width: 12ch; }
}

/* ---------- Section heads ---------- */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 16px 48px;
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.section-head h2 {
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -.035em;
}
.section-head p { max-width: 52ch; font-size: 1.125rem; }
@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; }
}

/* ---------- Filmes ---------- */
.films {
  background: var(--noite);
  color: #fff;
  padding-block: var(--section-y);
}
.films .section-head p { color: #D5DEEA; }
.films cite { font-style: normal; font-weight: 700; color: #fff; }

.cinema {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
.player-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 6px var(--azul);
}
.player-facade {
  all: unset;
  position: absolute; inset: 0;
  cursor: pointer;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: clamp(14px, 2.4vw, 28px);
}
.player-facade:focus-visible { outline: 3px solid var(--rosa); outline-offset: -6px; }
.player-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.play {
  position: relative;
  width: clamp(64px, 9vw, 96px);
  color: #fff;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .45));
  transition: color .2s, transform .2s;
}
.player-facade:hover .play { color: var(--rosa); transform: scale(1.06); }
.player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* overflow: hidden clips the iframe's own outline, so show focus on the frame */
.player-frame:has(iframe:focus-visible), .player-frame:has(iframe:focus) { box-shadow: 0 0 0 6px var(--rosa); }

.player-caption { margin-top: 22px; }
.player-title { font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 800; }
.player-sub { margin-top: 6px; color: #D5DEEA; }
.player-len { color: var(--rosa); font-weight: 700; margin-left: 8px; font-variant-numeric: tabular-nums; }

.playlist {
  list-style: none; margin: 0; padding: 0 6px 0 0;
  max-height: min(560px, 70vh);
  overflow-y: auto;
  scrollbar-color: var(--azul) transparent;
}
.pl-item {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.pl-item:hover { background: rgba(255, 255, 255, .06); }
.pl-item:focus-visible { outline: 3px solid var(--rosa); outline-offset: -3px; }
.pl-item[aria-current="true"] {
  background: rgba(255, 255, 255, .08);
  border-left-color: var(--magenta);
  border-image: repeating-linear-gradient(180deg, var(--magenta) 0 8px, transparent 8px 13px) 1;
}
.pl-item img { width: 104px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.pl-text { display: grid; gap: 2px; min-width: 0; }
.pl-text strong { font-weight: 700; line-height: 1.25; }
.pl-text span { font-size: .875rem; color: #AFC0D6; line-height: 1.35; }
.pl-len { font-size: .8125rem; color: #AFC0D6; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .cinema { grid-template-columns: 1fr; }
  .playlist { max-height: none; overflow: visible; padding: 0; }
}

/* ---------- Curtas ---------- */
.shorts { padding-block: var(--section-y); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font: inherit; font-weight: 700; font-size: .9375rem;
  padding: .55em 1.1em;
  border-radius: 999px;
  border: 2px dashed rgba(0, 66, 127, .35);
  background: transparent;
  color: var(--azul);
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.chip:hover { border-color: var(--magenta); color: var(--magenta); }
.chip[aria-pressed="true"] { background: var(--azul); border: 2px solid var(--azul); color: #fff; }
.shorts-count { margin: 16px 0 24px; font-size: .875rem; color: var(--tinta-2); }

.reel {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 20px;
}
.reel a {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: var(--noite);
}
.reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.reel a::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 39, 73, 0) 45%, rgba(6, 39, 73, .92) 100%);
}
.reel a:hover img { transform: scale(1.04); }
.reel a:focus-visible { outline-offset: 4px; }
.reel-tag, .reel-title { position: absolute; left: 14px; right: 14px; z-index: 1; }
.reel-tag {
  top: 12px; left: 12px; right: auto;
  font-size: .75rem; font-weight: 800;
  background: var(--magenta); padding: .3em .7em; border-radius: 999px;
}
.reel-title { bottom: 14px; font-weight: 700; line-height: 1.25; font-size: .96875rem; }

@media (max-width: 520px) {
  .reel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .reel-title { font-size: .875rem; left: 10px; right: 10px; bottom: 10px; }
}

.more { margin-top: 36px; }

/* ---------- Passira ---------- */
.town {
  background: var(--magenta);
  color: #fff;
  padding-block: var(--section-y);
}
.stitch-word { margin-bottom: clamp(28px, 4vw, 56px); }
.stitch-word svg { width: 100%; height: auto; display: block; overflow: visible; }
.stitch-word text {
  font-family: var(--font);
  font-weight: 900;
  font-size: 250px;
  letter-spacing: -8px;
  fill: rgba(255, 255, 255, .1);
  stroke: #fff;
  stroke-width: 3.5;
  stroke-dasharray: 14 9;
  stroke-linecap: round;
}
.motion .stitch-word svg { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s steps(24, end); }
.motion .stitch-word.is-in svg { clip-path: inset(0 0 0 0); }

.town-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.town-photo { margin: 0; }
.town-photo img {
  width: 100%;
  border: 10px solid #fff;
  border-radius: 4px;
  transform: rotate(-2deg);
  box-shadow: 0 24px 50px rgba(80, 0, 40, .35);
}
.town-photo figcaption { margin-top: 22px; font-size: .9375rem; color: #FFE3EF; max-width: 40ch; }

.town-lede { font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.3; margin-bottom: 20px; }
.town-text > p:not(.town-lede) { color: #FFE3EF; max-width: 56ch; }
.town-text h3 { font-size: 1.25rem; font-weight: 800; margin: 40px 0 18px; letter-spacing: -.01em; }

.stitches {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.stitches li {
  display: grid; gap: 10px;
  padding: 16px;
  border: 2px dashed rgba(255, 255, 255, .45);
  border-radius: 10px;
  font-weight: 700;
}
.stitches svg { width: 72px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }

@media (max-width: 860px) {
  .town-grid { grid-template-columns: 1fr; }
  .town-photo { max-width: 420px; }
}
@media (max-width: 460px) {
  .stitches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Estreia ---------- */
.premiere {
  background: var(--noite);
  color: #fff;
  padding-block: var(--section-y);
}
.premiere-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.premiere-photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 14px var(--azul), 0 0 0 16px rgba(255, 255, 255, .15);
}
.premiere-when { color: var(--rosa); font-weight: 700; margin-bottom: 12px; }
.premiere h2 { font-size: clamp(2.5rem, 5.6vw, 4.75rem); font-weight: 900; letter-spacing: -.035em; margin-bottom: 22px; }
.premiere-text > p:not(.premiere-when) { color: #D5DEEA; max-width: 54ch; margin-bottom: 30px; font-size: 1.125rem; }

@media (max-width: 760px) {
  .premiere-grid { grid-template-columns: 1fr; }
  .premiere-photo { max-width: 300px; margin-inline: auto; }
}

/* ---------- Instagram ---------- */
.insta { padding-block: var(--section-y); }
.posts {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.posts a { display: block; text-decoration: none; color: var(--tinta); }
.posts img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--agulha);
}
.post-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 12px;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--tinta-2);
}
.posts a:hover .post-text { color: var(--magenta); }
@media (max-width: 900px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Footer ---------- */
.footer {
  background: var(--azul);
  color: #fff;
  padding-block: clamp(72px, 9vw, 112px) 48px;
  --seam: var(--rosa);
}
.footer-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.footer-logo {
  background: #fff;
  border-radius: 24px;
  padding: 22px 26px;
  width: 190px;
}
.footer-logo img { width: 100%; }
.footer-call { font-size: clamp(1.625rem, 3.2vw, 2.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; max-width: 22ch; margin-bottom: 30px; }
.footer-small { margin-top: 48px; font-size: .875rem; color: #BCD0E6; }
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-logo { width: 150px; }
}