@font-face {
  font-family: "Mona Sans";
  src: url("assets/mona-sans-regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Mona Sans Wide";
  src: url("assets/mona-sans-black-wide.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

.films { container-type: inline-size; }
.reel-cut { display: none; }
.edition-links {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.5rem;
}
.edition-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .55rem .8rem;
  border: 1px solid #eee2c966;
  color: var(--cream);
}
.edition-links a:hover { background: var(--green); }
.edition-route-heading {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.edition-route-label {
  border-inline-start: 1px solid currentColor;
  padding-inline-start: .8rem;
  font: 400 .76rem/1.2 "Mona Sans", system-ui, sans-serif;
}
.edition-route-footer { padding: .25rem 7% 2.75rem; background: var(--ink); }
.edition-route-footer .edition-links { justify-content: flex-start; }
.edition-section {
  padding: clamp(3.5rem, 8vw, 8rem) 7%;
  scroll-margin-top: var(--header);
  font-family: "Mona Sans", system-ui, sans-serif;
}
.edition-wrap { max-width: 82rem; margin-inline: auto; }
.edition-heading {
  margin-bottom: clamp(2rem, 5vw, 4.25rem);
  border-top: 1px solid currentColor;
  padding-top: .85rem;
}
.edition-heading p {
  margin: 0 0 .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font: 750 .73rem/1.4 system-ui, sans-serif;
}
.edition-heading h2 {
  font-family: "Mona Sans Wide", system-ui, sans-serif;
  color: inherit;
  font-size: clamp(2.15rem, 8.2vw, 7.5rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.065em;
  overflow-wrap: anywhere;
}
.curators { background: var(--green); color: var(--cream); }
.curators .edition-heading h2 { color: var(--yellow); }
.edition-profiles {
  display: grid;
  list-style: none;
  padding: 0;
  margin: 0;
}
.curator-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.profile-photo {
  --photo-cut: polygon(7% 2%, 90% 0, 100% 21%, 93% 93%, 71% 100%, 0 94%, 3% 27%);
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 4.5;
}
.profile-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #000;
  clip-path: var(--photo-cut);
  transform: translate(.42rem, .55rem);
}
.profile-crop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: var(--photo-cut);
  background: var(--yellow);
}
.profile-crop img {
  --photo-focus: var(--portrait-position, 50% 0%);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-focus);
  transform-origin: var(--photo-focus);
  transform: scale(var(--portrait-scale, 1));
}
.curator-grid > :nth-child(2) { margin-top: clamp(0rem, 3vw, 3.5rem); }
.curator-grid > :nth-child(2) .profile-photo {
  --photo-cut: polygon(0 13%, 25% 1%, 95% 4%, 100% 67%, 84% 98%, 5% 100%);
}
.curator-grid > :nth-child(3) .profile-photo {
  --photo-cut: polygon(9% 0, 87% 4%, 100% 32%, 96% 100%, 16% 96%, 0 76%);
}
.profile-text h3 {
  margin: 0 0 .55rem;
  font: 900 clamp(1.2rem, 2.3vw, 2rem)/1.1 "Mona Sans Wide", system-ui, sans-serif;
  letter-spacing: -.04em;
}
.profile-text p { margin: 0; line-height: 1.65; }
.curator-grid .profile-text { margin-top: 1.5rem; }
.profile-text .profile-role {
  margin-bottom: .5rem;
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .72rem;
}
.jury { background: var(--cream); color: var(--ink); }
.jury .edition-heading h2 { color: var(--red); }
.jury-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 5vw, 4rem); }
.jury-grid > li {
  display: grid;
  grid-template-columns: minmax(4.75rem, 27%) minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--red);
}
.jury-grid .profile-photo {
  --photo-cut: polygon(17% 0, 95% 6%, 100% 77%, 74% 100%, 3% 93%, 0 20%);
  aspect-ratio: 1;
}
.jury-grid > :nth-child(even) { border-color: var(--green); }
.jury-grid > :nth-child(even) .profile-photo {
  --photo-cut: polygon(0 13%, 79% 0, 100% 23%, 96% 93%, 24% 100%, 7% 85%);
}
.jury-grid .profile-text p { font-size: .93rem; }
.schedule { background: var(--yellow); color: var(--ink); }
.schedule-timeline {
  --rail: .25rem;
  position: relative;
  padding-left: clamp(1rem, 3vw, 2.5rem);
  border-left: var(--rail) solid #201d1a3d;
}
.schedule-block + .schedule-block { margin-top: 2rem; }
.schedule-block h3 {
  width: fit-content;
  padding: .55rem 1.25rem;
  margin: 0 0 .65rem;
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
  background: var(--green);
  color: var(--cream);
  font: 900 clamp(.85rem, 2.1vw, 1.35rem)/1.2 "Mona Sans Wide", system-ui, sans-serif;
}
.schedule-block:nth-child(2) h3 { background: var(--red); color: #fff; }
.schedule-block > ol { list-style: none; margin: 0; padding: 0; }
.schedule-block > ol > li {
  display: grid;
  grid-template-columns: 5.1rem minmax(0, 1fr);
  align-items: baseline;
  gap: .5rem;
  padding: .65rem 0;
  border-bottom: 1px solid #201d1a38;
  line-height: 1.5;
}
.schedule-block time { font: 900 1rem/1.4 "Mona Sans Wide", system-ui, sans-serif; }
.schedule-block details { margin-top: .3rem; }
.schedule-block summary {
  cursor: pointer;
  width: fit-content;
  text-decoration: underline;
  text-underline-offset: .15em;
}
.schedule-block details ol { padding-left: 1.35rem; margin-block: .5rem 0; }
.schedule a:focus-visible, .schedule summary:focus-visible { outline: 2px solid var(--ink); outline-offset: .15rem; }
.rules { background: var(--green); color: var(--cream); }
.rules-layout {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: end;
}
.rules .edition-heading { margin-bottom: 1.2rem; }
.rules .edition-heading h2 { font-size: clamp(2.15rem, 6.3vw, 5.5rem); }
.rules p { line-height: 1.6; }
.rules-actions { display: grid; gap: .8rem; }
.rules-actions a {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  padding: .95rem 1.15rem;
  background: var(--cream);
  color: var(--ink);
  box-shadow: .3rem .3rem #000;
  text-decoration: none;
  font: 750 1rem/1.3 system-ui, sans-serif;
}
.rules-actions a:hover, .rules-actions a:focus-visible { background: var(--yellow); }

@media (prefers-reduced-motion: no-preference) {
  .intro::before {
    background: linear-gradient(151deg, var(--green) 0 61%, var(--red) 61%);
    clip-path: polygon(88% 0, 100% 0, 100% 100%, 71% 100%, 86% 61%, 81% 38%);
  }
  .films-heading::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--green) url("assets/leao-completo-vermelho.svg") right 6vw center / min(18vw, 11rem) auto no-repeat;
    clip-path: polygon(100% 0, 100% 100%, 76% 100%, 83% 61%, 86% 22%);
    transform: translateX(calc(17% * var(--scene-travel)));
  }
  .has-scroll .reel-cut {
    --reel-progress: 0;
    --cut-screen: calc(100svh - var(--header));
    display: block;
    height: calc(var(--cut-screen) + 42svh);
    margin-inline: calc((100% - 100cqw) / 2);
    margin-top: clamp(1.5rem, 4vw, 4rem);
  }
  .reel-cut-frame {
    position: sticky;
    top: var(--header);
    height: var(--cut-screen);
    overflow: hidden;
    isolation: isolate;
    display: grid;
    place-items: center;
  }
  .reel-cut-frame i {
    position: absolute;
    inset: -25% -38%;
    pointer-events: none;
  }
  .reel-cut-green {
    background: var(--green);
    clip-path: polygon(7% 12%, 92% 1%, 100% 63%, 0 95%);
    transform: translate(calc(-113% + 222% * var(--reel-progress)), calc(21% - 39% * var(--reel-progress)));
  }
  .reel-cut-yellow {
    z-index: 1;
    background: var(--yellow);
    clip-path: polygon(0 75%, 100% 47%, 100% 53%, 0 84%);
    transform: translate(calc(-110% + 220% * var(--reel-progress)), calc(33% - 47% * var(--reel-progress)));
  }
  .reel-cut-red {
    background: var(--red);
    clip-path: polygon(0 38%, 75% 0, 100% 24%, 94% 78%, 17% 100%);
    transform: translate(calc(-110% + 220% * var(--reel-progress)), calc(19% - 39% * var(--reel-progress)));
  }
  .reel-cut-title {
    z-index: 2;
    max-width: 100%;
    color: var(--cream);
    text-shadow: .13em .15em #201d1a;
    font: 900 clamp(1.7rem, 8vw, 7rem)/1 "Mona Sans Wide", system-ui, sans-serif;
    letter-spacing: -.065em;
    opacity: clamp(0, min(calc((var(--reel-progress) - .27) * 9), calc((.73 - var(--reel-progress)) * 9)), 1);
    transform: translateX(calc(-11% + 22% * var(--reel-progress)));
  }
  .reel-cut-title > span {
    display: inline-block;
    margin-right: .45em;
    color: var(--yellow);
    font-size: .43em;
    letter-spacing: 0;
    vertical-align: .58em;
  }
  .has-scroll .reel-cut--curtas {
    margin-top: 0;
    margin-bottom: clamp(1.5rem, 4vw, 4rem);
  }
  .reel-cut--curtas .reel-cut-green {
    z-index: 1;
    clip-path: polygon(0 0, 91% 0, 100% 29%, 77% 49%, 81% 66%, 56% 100%, 0 100%);
    transform: translate(calc(113% - 226% * var(--reel-progress)), calc(-19% + 36% * var(--reel-progress)));
  }
  .reel-cut--curtas .reel-cut-yellow {
    clip-path: polygon(0 8%, 100% 35%, 100% 41%, 0 16%);
    transform: translate(calc(110% - 220% * var(--reel-progress)), calc(-24% + 44% * var(--reel-progress)));
  }
  .reel-cut--curtas .reel-cut-red {
    clip-path: polygon(0 4%, 84% 0, 100% 23%, 100% 100%, 17% 100%, 0 72%);
    transform: translate(calc(117% - 234% * var(--reel-progress)), calc(-9% + 23% * var(--reel-progress)));
  }
  .reel-cut--curtas .reel-cut-title {
    transform: translateX(calc(11% - 22% * var(--reel-progress)));
  }
  @media (max-width: 610px) {
    .reel-cut--curtas .reel-cut-title { font-size: clamp(2.5rem, 12vw, 4.5rem); }
  }
  .edition-profile .profile-photo {
    --profile-shift: calc(1 - var(--scene-progress, 1));
    transform: translateY(calc(1rem * var(--profile-shift))) scale(calc(1 - .06 * var(--profile-shift)));
    transform-origin: bottom center;
  }
  .edition-profile .profile-photo::before {
    transform: translate(calc(.42rem + .6rem * (1 - var(--scene-progress, 1))), .55rem);
  }
  .schedule-timeline::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 calc(-1 * var(--rail));
    width: var(--rail);
    background: var(--red);
    transform: scaleY(var(--schedule-progress, 0));
    transform-origin: top;
    pointer-events: none;
  }
}

@media (max-width: 850px) {
  .jury-grid { grid-template-columns: 1fr; }
  .jury-grid > li { grid-template-columns: minmax(4.75rem, 18%) minmax(0, 1fr); }
}
@media (max-width: 610px) {
  .curator-grid, .rules-layout { grid-template-columns: minmax(0, 1fr); }
  .curator-grid > :nth-child(2) { margin-top: 0; }
  .curator-grid .profile-photo { max-width: 16rem; }
  .curator-grid .profile-text { margin-top: 1rem; }
  .schedule-block > ol > li { grid-template-columns: 4.1rem minmax(0, 1fr); }
  .schedule-block time { font-size: .9rem; }
  .has-scroll .reel-cut { height: calc(var(--cut-screen) + 34svh); }
  .films-heading::after {
    background-position: right .5rem top 1rem;
    background-size: 12vw auto;
    clip-path: polygon(100% 0, 100% 100%, 88% 100%, 93% 55%, 91% 25%);
  }
}