/* @import "./reset.css"; */
@import "./variables.css";
@import "./type.css";
@import "./base.css";
@import "./animation.css";

header {
  position: fixed;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(1.5rem, 1fr) minmax(auto, 1400px) minmax(
      1.5rem,
      1fr
    );
  align-items: center;
  padding-block: 3rem;
  animation-name: background-animation;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-timeline: scroll(root);
  animation-range: 0 10rem;
  inset-block-start: 0;
  inset-inline: 0;
  inline-size: stretch;
}

@keyframes background-animation {
  0% {
    padding-block: 3rem;
    background-color: transparent;
    backdrop-filter: none;
  }
  100% {
    padding-block: 1rem;
    background-color: rgb(from var(--color-brand-200) r b g / 0.8);
    backdrop-filter: blur(10px);
  }
}

/* MARK: HEADER */
.site-header__title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  & img {
    inline-size: clamp(15rem, 25cqi, 20rem);
  }
}

/* MARK: NAVIGATION */
.site-nav {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-sans-serif);
  font-size: var(--fs-0);
  text-transform: uppercase;
  font-variation-settings: "wght" 400;
  justify-self: end;
  & a {
    font-family: var(--font-sans-serif);
    text-decoration: none;
    &:hover,
    &:active,
    &:focus {
      /* text-decoration: underline; */
    }
  }
}

.site-nav__list {
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  & a {
    white-space: nowrap;
  }
}

.site-nav__toggle {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  color: inherit;
  border: 0;
  background: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
}

.site-nav__toggle-icon {
  position: relative;
  &,
  &::before,
  &::after {
    display: block;
    transition:
      transform 0.2s,
      background-color 0.2s;
    background-color: currentColor;
    inline-size: 1.75rem;
    block-size: 2px;
  }
  &::before,
  &::after {
    position: absolute;
    content: "";
    inset-inline-start: 0;
  }
  &::before {
    inset-block-start: -0.5rem;
  }
  &::after {
    inset-block-start: 0.5rem;
  }
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon {
  background-color: transparent;
  &::before {
    transform: translateY(0.5rem) rotate(45deg);
  }
  &::after {
    transform: translateY(-0.5rem) rotate(-45deg);
  }
}

@media (max-width: 960px) {
  .site-nav__toggle {
    display: inline-flex;
  }
  .site-nav--enhanced .site-nav__list {
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 0;
    padding-inline: 1.5rem;
    padding-block: 1rem 2rem;
    background-color: var(--color-brand-200);
    box-shadow: 0 1rem 2rem rgb(0 0 0 / 0.1);
    inset-block-start: 100%;
    inset-inline: 0;
    & a {
      display: block;
      padding-block: 0.75rem;
    }
  }
  .site-nav--open .site-nav__list {
    display: flex;
  }
  .site-header:has(.site-nav--open)::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    background-color: var(--color-brand-200);
  }
}

/* MARK: HERO */
.hero {
  overflow: clip;
  animation-name: parallax-animation;
  animation-timing-function: linear;
  /* padding-inline: 2rem; */
  background-color: var(--color-brand-150);
  background-image: url("../images/background.webp");
  background-repeat: no-repeat;
  background-position: 50% 70%;
  background-size: 100%;
  animation-fill-mode: forwards;
  padding-block-start: 4rem;
  animation-timeline: scroll(root);
  animation-range: 0 80vh;
}

@keyframes parallax-animation {
  0% {
    background-position: 50% 70%;
  }
  100% {
    background-position: 50% 100%;
  }
}

.hero__wrapper {
  display: grid;
  grid-template-columns: 10fr 4fr;
  margin-inline: auto;
  padding-inline: 1.5rem;
  max-inline-size: 1400px;
  margin-block-start: min(12vw, 8rem);
  container-type: inline-size;
}

.hero__content {
  display: grid;
  /* grid-column: 2; */
  grid-template-columns: 3fr 7fr;
  align-self: start;
  align-items: center;
  gap: 4cqi;
  font-family: var(--font-serif);
  font-size: 10cqi;
  margin-block-end: 4rem;
  & img {
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
    max-inline-size: 22cqi;
  }
  & figure {
    /* width: 50%; */
    line-height: 1.2;
  }
}

.hero__quote {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-variation-settings: "wght" 100;
  & blockquote {
    margin-inline: 0;
    font-size: var(--fs-2);
    font-size: calc(0.4rem + 1.8cqi);
    margin-block-end: 1.5cqi;
  }
  & figcaption {
    text-wrap: balance;
    font-size: var(--fs-1);
    font-size: calc(0.2rem + 1.8cqi);
  }
}

.hero__mike {
  align-self: end;
  animation-name: mike-animation;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  /* grid-column: 3; */
  margin-inline-end: -5rem;
  animation-timeline: scroll(root);
  animation-range: 0 80vh;
}

@keyframes mike-animation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(5rem);
  }
}

/* MARK: Featured Works */

.works {
  position: relative;
  z-index: 1;
  margin-block: -20px;
  padding-inline: 2rem;
  padding-block: 4rem;
  color: var(--color-brand-100);
  background: var(--color-brand-300);
  mask-position:
    center top,
    center center,
    center bottom;
  mask-repeat: no-repeat;
  mask-image:
    url("../images/border.svg"),
    linear-gradient(
      to bottom,
      transparent 20px,
      white 20px,
      white calc(100% - 20px),
      transparent calc(100% - 20px)
    ),
    url("../images/border.svg");
}

@property --left-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --right-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@keyframes scrollfade {
  0% {
    --left-fade: 0;
  }
  10%,
  100% {
    --left-fade: 3rem;
  }
  0%,
  90% {
    --right-fade: 3rem;
  }
  100% {
    --right-fade: 0;
  }
}

/* MARK: Works List */

.works__list {
  display: grid;
  grid-template-rows: min-content min-content min-content;
  /* grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); */
  grid-auto-columns: minmax(8rem, 15cqi);
  grid-auto-flow: column;
  gap: 2rem;
  overflow-x: auto;
  margin-inline: auto;
  padding: 0;
  list-style: none;
  animation-name: scrollfade;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-timeline: --scrollfade;
  scroll-timeline: --scrollfade inline;
  overflow-inline: auto;
  /* overflow-y: clip; */
  inline-size: fit-content;
  max-inline-size: 100%;
  min-block-size: 20rem;
  max-block-size: 29vw;
  margin-block-end: 2rem;
  scroll-snap-type: inline mandatory;
  scrollbar-color: var(--color-brand-500) transparent;
  scrollbar-width: thin;
  overscroll-behavior-block: chain;
  mask: linear-gradient(
    to right,
    #0000,
    #ffff var(--left-fade) calc(100% - var(--right-fade)),
    #0000
  );
}

.work-card,
.work-card__link {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 10px;
  margin: 0;
  padding: 0;
  text-decoration: none;
  line-height: 1;
  scroll-snap-align: center;
  &:hover,
  &:active,
  &:focus {
    color: var(--color-brand-100);
    & .work-card__arrow {
      opacity: 1;
    }
  }
}

.work-card__image {
  align-self: center;
  max-inline-size: minmax(8rem, 15cqi);
}

.work-card__arrow {
  transition: opacity 0.2s;
  opacity: 0.6;
}

.featured {
  /* background-attachment: fixed; */
  padding-inline: 2rem;
  padding-block: 4rem;
  background-image:
    radial-gradient(
      ellipse at center,
      transparent,
      color-mix(in srgb, var(--color-brand-400) 40%, transparent 100%)
    ),
    url("../images/paper.jpg");
}

/* MARK: Featured */

.feature {
  /* padding-inline: 2rem; */
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-inline: auto;
  max-inline-size: 1050px;
  margin-block-end: 4rem;
  &:nth-child(odd) {
    flex-direction: row-reverse;
  }
  h3 {
    font-size: var(--fs-2);
    background-image: url("../images/underline.svg");
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 90% 5px;
    padding-block-end: 0.4rem;
  }
  @media (max-width: 70ch) {
    flex-direction: column;
    &:nth-child(odd) {
      flex-direction: column;
    }
  }
}

.feature__image {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
  max-inline-size: 15rem;
  @media (max-width: 70ch) {
    max-inline-size: 100%;
  }
}

.feature__body {
  max-inline-size: 45ch;
  @media (max-width: 70ch) {
    max-inline-size: 100%;
  }
}

.feature__body {
  flex: 1;
}

.feature__title {
  font-size: var(--fs-5);
  font-weight: 700;
  margin-block-end: 1rem;
  & img {
    position: relative;
    vertical-align: baseline;
    inset-block-start: 0.25ex;
    inline-size: auto;
    block-size: calc(1lh - 0.5ex);
    padding-inline-end: 0.5rem;
  }
}

.feature__description {
  /* content-visibility: auto; */
  font-size: var(--fs-0);
  font-weight: 400;
}

/* MARK: BUTTONS */
.button,
button {
  padding-inline: 1rem;
  padding-block: 0.5rem;
  transition: border-color 0.2s;
  font-family: var(--font-serif);
  font-size: var(--fs-1);
  font-weight: bold;
  border: 1px solid var(--color-brand-400);
  background-color: transparent;
  text-decoration-color: transparent;
  font-variation-settings: "wght" 100;
  &:hover,
  &:active,
  &:focus {
    color: var(--color-brand-500);
    border-color: var(--color-brand-500);
  }
  & img,
  & svg {
    vertical-align: middle;
    inline-size: auto;
    max-inline-size: 2.5rem;
    max-block-size: calc(1lh - 0.5ex);
    padding-inline-start: 0.5rem;
    & * {
      fill: currentColor;
    }
  }
}

/* MARK: FORMS */
.form {
  display: grid;
  gap: 1.5rem;
}

.form__field {
  display: grid;
  gap: 0.5rem;
}

.form__label {
  font-family: var(--font-serif);
  font-size: var(--fs--1);
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: "wght" 100;
}

.form__input {
  padding-inline: 1rem;
  padding-block: 0.5rem;
  transition: border-color 0.2s;
  font: inherit;
  /* Keeps inputs at 16px or larger so iOS Safari doesn't zoom on focus */
  font-size: 1rem;
  letter-spacing: inherit;
  color: inherit;
  border: 1px solid var(--color-brand-400);
  border-radius: 0;
  background-color: color-mix(in srgb, var(--color-brand-100) 25%, transparent);
  inline-size: 100%;
  appearance: none;
  &:hover,
  &:focus {
    border-color: var(--color-brand-500);
  }
}

.form__input--textarea {
  resize: block;
  min-block-size: 10rem;
}

.form__submit {
  justify-self: start;
}

/* MARK: PAGES */

.page {
  padding-block-start: 10rem;
}

.prose-section {
  margin-inline: auto;
  margin-block: 4rem;
  padding-inline: 2rem;
  max-inline-size: 65ch;
}

.grid-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
  align-items: start;
  gap: 4rem 2rem;
  margin-inline: auto;
  padding-inline: 2rem;
  padding-block: 2rem;
  max-inline-size: calc(1400px + 4rem);
  inline-size: stretch;
  & > * {
    /* grid-column: grid; */
  }
}
.grid-section__item {
  display: grid;
  grid-template-rows: 3rem auto;
  grid-template-columns: 7rem 1fr;
  grid-template-areas:
    "image title"
    "content content";
  gap: 1rem;
  & .grid-section__logo {
    display: block;
    align-self: center;
    max-inline-size: 7rem;
    max-block-size: 3rem;
    grid-area: image;
    justify-self: center;
  }
  & .grid-section__title {
    align-self: center;
    grid-area: title;
    margin-block-end: 0;
  }
  & .grid-section__video {
    display: block;
    aspect-ratio: 16 / 9;
    grid-area: content;
    inline-size: 100%;
    block-size: auto;
    object-fit: cover;
    background-color: var(--color-brand-400);
    & > img {
      inline-size: 100%;
    }
  }
}
.grid-section__item:not(:has(.grid-section__logo)) .grid-section__title {
  grid-column: 1 / span 2;
}

/* MARK: LOGOS */
.tier-1 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 24px;
  margin-inline: auto;
  margin-block-end: 4rem;
  max-inline-size: 1400px;
}

.tier-1 > img {
  display: block;
  align-self: center;
  margin-inline: auto;
  padding: 1rem;
  max-block-size: 5rem;
  max-inline-size: calc(14rem + 2rem);
}

/* NBC is nearly square, so it needs more height to match the wide logos */
.tier-1 > img[alt="NBC"] {
  max-block-size: 8rem;
}

.tier-2,
.tier-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-block-end: 4rem;
}

.tier-2 {
  gap: 40px 72px;
}

.tier-2 img {
  block-size: 64px;
  max-inline-size: 260px;
  object-fit: contain;
}

.tier-3 {
  gap: 32px 64px;
}

.tier-3 img {
  block-size: 44px;
  max-inline-size: 240px;
  object-fit: contain;
}

.flex-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-block-end: 4rem;
  & img {
    max-inline-size: 100%;
  }
}

.full-width {
  width: 100%;
  height: auto;
}

.press-quote {
  font-size: 2rem;
  margin-block-end: 3rem;
  & p {
    margin-block-end: 0.5rem;
  }
  & cite {
    font-size: 1rem;
  }
}
@media (max-width: 720px) {
  .press {
    padding-inline: 24px;
    padding-block: 64px 48px;
  }
  .tier-1 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tier-2 {
    gap: 24px 40px;
  }
  .tier-2 img {
    block-size: 48px;
  }
  .tier-3 img {
    block-size: 32px;
  }
}

/* MARK: FOOTER */
.site-footer {
  color: var(--color-brand-100);
  background-color: var(--color-brand-300);
}

.site-footer__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(auto, 1400px) minmax(0, 1fr);
  align-items: center;
  padding-inline: 2rem;
  padding-block: 2rem;
  inline-size: stretch;
  & > * {
    grid-column: 2;
  }
}

.footer-nav__list {
  display: flex;
  gap: 2rem;
  padding: 0;
  list-style: none;
  font-size: var(--fs---2);
  margin-block-end: 2rem;
  & a {
    text-decoration: none;
    color: var(--color-brand-100);
    &:hover,
    &:active,
    &:focus {
      color: var(--color-brand-200);
    }
  }
}

/* MARK: Sticky footer — keep footer at the bottom on short pages */
body {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100dvh;
}
body > main {
  flex: 1 0 auto;
}
body > .site-footer {
  flex-shrink: 0;
}

/* MARK: Works Index (all-works page) */
.works-index {
  padding-inline: 2rem;
  & .prose-section {
    margin-block-end: 2rem;
  }
}

.works-index__set {
  margin-inline: auto;
  margin-block-start: 3rem;
  inline-size: fit-content;
  max-inline-size: 100%;
}

.works-index__set--wide {
  inline-size: min(1100px, 100%);
}

.works-index__group {
  margin-block: 0 2rem;
  text-align: left;
  font-size: var(--fs-2);
  background-image: url("../images/underline-stretch.svg");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 5px;
  padding-block-end: 0.6rem;
}

.works-index__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 20rem));
  justify-content: start;
  gap: 3rem 2.5rem;
}

/* Film & Stage: three columns */
.works-index__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  @media (max-width: 62rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .works-index__grid,
  .works-index__grid--3 {
    grid-template-columns: minmax(0, 20rem);
  }
}

.work-tile {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  & .feature__title {
    font-size: var(--fs-1);
    margin-block-end: 0.75rem;
  }
}

.work-tile__image {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
}

.work-tile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  & p {
    font-size: var(--fs--1);
  }
  & .button {
    margin-block-start: 0.5rem;
    font-size: var(--fs-0);
  }
}

.work-tile__type {
  margin-block-end: 0.5rem;
  font-size: var(--fs--2) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-500);
}

/* MARK: Severe Clear (all-works page) */
.severe-clear {
  margin-block-start: 4rem;
}

.sc-intro {
  margin-inline: auto;
  margin-block-end: 3rem;
  padding-inline: 2rem;
  max-inline-size: 60rem;
  text-align: center;
  & h2 {
    margin-block-end: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}

.sc-lead {
  margin-inline: auto;
  max-inline-size: 48rem;
  font-size: var(--fs-2);
  font-weight: 700;
  line-height: 1.3;
}

.sc-story {
  columns: 2 22rem;
  column-gap: 3rem;
  margin-inline: auto;
  margin-block-end: 5rem;
  padding-inline: 2rem;
  max-inline-size: 1100px;
  & p {
    margin-block: 0 1.25rem;
    break-inside: avoid;
  }
}

.sc-heading {
  margin-inline: auto;
  margin-block: 0 2rem;
  max-inline-size: 1100px;
  font-size: var(--fs-2);
  background-image: url("../images/underline-stretch.svg");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 5px;
  padding-block-end: 0.6rem;
}

.sc-releases {
  margin-inline: auto;
  margin-block-end: 5rem;
  padding-inline: 2rem;
  max-inline-size: calc(1100px + 4rem);
}

.sc-releases__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-release {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  text-align: center;
  font-size: var(--fs--1);
  & img {
    block-size: 15rem;
    inline-size: auto;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
  }
}

.sc-praise {
  margin-block-end: 5rem;
  padding-inline: 2rem;
  padding-block: 4rem;
  color: var(--color-brand-100);
  background: var(--color-brand-300);
  & .sc-heading {
    max-inline-size: 1100px;
  }
}

.sc-quotes {
  columns: 2 22rem;
  column-gap: 3rem;
  margin-inline: auto;
  max-inline-size: 1100px;
}

.sc-quote {
  margin: 0 0 2.5rem;
  break-inside: avoid;
  & p {
    margin-block: 0 0.75rem;
    font-family: var(--font-serif);
    font-size: var(--fs-1);
    line-height: 1.35;
  }
  & cite {
    display: block;
    font-size: var(--fs--1);
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand-200);
  }
}

.sc-screens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-inline: auto;
  margin-block-end: 5rem;
  padding-inline: 2rem;
  max-inline-size: calc(1100px + 4rem);
  & img {
    flex: 1 1 18rem;
    block-size: auto;
    inline-size: 0;
    max-inline-size: 34rem;
  }
}

.nowrap {
  white-space: nowrap;
}

/* Hero credit: name on its own line, role balanced beneath it */
.credit__name,
.credit__role {
  display: block;
  text-wrap: balance;
}

/* Button groups and anchor offset */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.severe-clear {
  scroll-margin-block-start: 6rem;
}