/* ==========================================================================
   Page layouts: home (the arch), portfolio, contact, 404.
   ========================================================================== */

/* ---- Home -------------------------------------------------------------*/

.home {
  display: grid;
  place-items: center;
  padding: var(--space-s) var(--gutter) var(--space-xl);
}

@media (min-width: 48em) {
  .page--home main { grid-column: 1 / -1; }
  .home { min-height: calc(100svh - var(--notice-h, 0px)); padding-block: var(--space-l); }
}

.arch-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* The arch is only a shape: a 3:4 panel with a full half-circle top, and the
   showreel plays inside it. The largest arch that fits (the screen height left
   after the header and wordmark, at 3:4) is scaled by --arch-scale. */
.arch {
  --arch-h: calc(100svh - var(--notice-h, 0px) - 16rem);
  --arch-radius: 50% 50% 0 0 / var(--arch-rise-home) var(--arch-rise-home) 0 0;
  position: relative;
  width: calc(var(--arch-scale) * min(max(var(--arch-h) * 0.75, 15rem), 100%, 36rem));
  aspect-ratio: 3 / 4;
  border-radius: var(--arch-radius);
}

@media (min-width: 48em) {
  .arch {
    --arch-h: calc(100svh - var(--notice-h, 0px) - 12.5rem);
    width: calc(var(--arch-scale) * min(max(var(--arch-h) * 0.75, 16rem), 100% - 2 * var(--rail), 44rem));
  }
}

.arch__media,
.arch__enter,
.arch__error {
  position: absolute;
  inset: 0;
  border-radius: var(--arch-radius);
}

.arch__media {
  overflow: hidden;
  clip-path: inset(0 round 50% 50% 0 0 / var(--arch-rise-home) var(--arch-rise-home) 0 0);
  background: var(--ink);
  isolation: isolate;
}

.arch__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-slower) var(--ease-out), filter var(--dur-slower) var(--ease-out);
}
.arch__poster.is-loaded { opacity: 1; }
.arch[data-state="playing"] .arch__poster { opacity: 0; }
.arch[data-state="error"] .arch__poster { filter: grayscale(1) brightness(0.4); }

/* The iframe fills the arch; Framerate's background mode crops the film to
   cover it, whatever its shape. */
.arch__video { position: absolute; inset: 0; }
.arch__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  color-scheme: normal; /* as in the lightbox: no white backdrop behind the film */
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-slower) var(--ease-out);
}
.arch[data-state="playing"] .arch__video iframe { opacity: 1; }

/* The whole arch is the play-with-sound button, with nothing drawn over the
   picture: the pointer cursor and focus ring are the only cues. */
.arch__enter {
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-instant) var(--ease-out);
}
.arch__enter:active { transform: scale(0.99); }
.arch__enter:focus-visible { outline-offset: var(--focus-offset-lg); }
.arch[data-state="error"] .arch__enter { display: none; }

.arch__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 3.5rem;
  aspect-ratio: 1;
  color: var(--color-text-on-accent);
  background: var(--color-accent);
  border-radius: var(--radius-round);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.arch__play svg { width: 1.1rem; height: 1.1rem; margin-left: 0.15rem; }
.arch[data-state="paused"] .arch__play { opacity: 1; }
@media (hover: hover) {
  .arch__enter:hover .arch__play { background: var(--color-accent-hover); }
}

/* Error: sits over the darkened poster, so its text is light. */
.arch__error {
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 28% var(--space-m) var(--space-m);
  text-align: center;
  color: var(--color-text-on-strip);
}
.arch[data-state="error"] .arch__error { display: flex; animation: slide-in var(--dur-slow) var(--ease-out-expo); }
.arch__error h2 { font-size: var(--step-1); color: var(--color-text-on-strip-strong); }
.arch__error p { font-size: var(--step--1); line-height: var(--leading-snug); max-width: 24rem; }
.arch__error .btn--text { --btn-fg: var(--color-text-on-strip); }

/* The wordmark, set in black as on the card. */
.wordmark {
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-m);
  text-align: center;
  color: var(--color-text);
}
.wordmark__name {
  font-family: var(--font-sans);
  font-size: var(--step-3);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wordmark);
  line-height: 1;
  text-transform: uppercase;
  margin-right: calc(var(--tracking-wordmark) * -1); /* optical centering against trailing tracking */
}
.wordmark__tagline {
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  line-height: var(--leading-snug);
}

/* ---- Inner pages ------------------------------------------------------
   From 48em the page title's cap height lines up with the top of the
   monogram: same top padding as the header, and .page-title trims its
   line box to the caps. */

.inner {
  padding: var(--space-s) var(--gutter) var(--space-3xl);
}
@media (min-width: 48em) {
  .inner { padding: var(--gutter) var(--gutter) var(--space-3xl) var(--space-s); }
}

/* ---- Portfolio: a grid of thumbnails ----------------------------------*/

.work-panel {
  margin-top: var(--space-xl);
}
.work-panel:focus { outline: none; }

.work-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-s);
}
/* Two columns wherever there's room: four films make a 2 × 2 grid. */
@media (min-width: 36em) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.work-grid[hidden] { display: none; }

.work-grid__item {
  min-width: 0;
  animation: reveal var(--dur-slow) var(--ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
@media (prefers-reduced-motion: reduce) { .work-grid__item { animation: none; } }

.skeleton--media { display: block; aspect-ratio: 16 / 9; }

/* ---- Contact ----------------------------------------------------------
   One centered column: a line about the agency (its name in the rose band),
   then the form. Field labels stay left-aligned over their boxes; the button
   and note below center with the column. From 48em the column is centered on
   the whole screen, like the home arch, kept clear of the header rail on
   both sides, and sits in the middle of the screen when there's room. */

.contact {
  display: grid;
  gap: var(--space-xl);
  width: min(100%, 38rem); /* component dimension: the column */
  margin-inline: auto;
}

@media (min-width: 48em) {
  .page--contact main {
    grid-column: 1 / -1;
    display: grid;
    align-content: center;
    padding-inline: var(--rail);
  }
}

.contact__intro {
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  text-align: center;
}

.enquiry { display: grid; gap: var(--space-m); }
.enquiry .form__footer { justify-content: center; text-align: center; }
.enquiry .success { justify-items: center; text-align: center; }
.enquiry .success .state__text { margin-inline: auto; }

.form { display: grid; gap: var(--space-m); }
.form[hidden] { display: none; }
.form__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-m);
  align-items: start;
}
.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
}
.form__note { font-size: var(--step--1); }
.form__trap { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 30em) {
  .form__footer .btn { width: 100%; }
}

.success { padding-block: var(--space-m); max-width: none; }
.success__art { width: 3rem; }

/* ---- 404 --------------------------------------------------------------*/

.notfound { display: grid; align-content: center; min-height: 70svh; }
.notfound .state { padding-block: 0; }
.notfound .state__title {
  font-size: var(--step-4);
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-display);
  text-transform: uppercase;
}