/* Homepage only; colours, type and the menu are in site.css. */

/* The page's own colour: iPhone Safari fills the bands around its address bar with it
   (it does so whenever a pinned block touches the screen's edge, and the home page has
   several). main.js sets it to what's at the top of the screen as you scroll (--page):
   the lower sky's light grey-blue first, never the other pages' olive. */
html, body { background: var(--page, #939ca2); transition: background-color 0.4s ease; }

:root {
  --cloud-h: max(233vw, 480vh); /* height of the cloud image (thick from 28% to 84%) */
}

/* Loading screen: the page's light sky colour, a small dark blue bar and percentage. Nothing scrolls
   until it is done; then it fades and the logo comes into focus. */
.loader { display: none; }
.loading .loader, .revealing .loader {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  background: #939ca2; /* the page's own colour (also Safari's bands) */
  transition: opacity 0.9s ease;
}
.revealing .loader { opacity: 0; pointer-events: none; }
.loading { overflow: hidden; }

.loader-box { position: relative; width: 140px; text-align: center; }
.loader-bar { height: 1px; background: rgba(35, 59, 78, 0.25); overflow: hidden; }
.loader-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: #233b4e;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.3s ease-out;
}
.loader-pct {
  margin-top: 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: #233b4e;
  font-variant-numeric: tabular-nums;
}

/* The logo comes into focus once the loading screen fades. */
.loading .intro-logo img, .loading .intro-logo .watch { opacity: 0; }
/* The logo and its button come into focus.
   The filter is gone at the end: iPhone Safari can paint filtered images as white boxes. */
.revealing .intro-logo img, .loaded .intro-logo img,
.revealing .intro-logo .watch, .loaded .intro-logo .watch { animation: logo-in 2.2s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
@keyframes logo-in {
  from { opacity: 0; filter: blur(18px); }
  to { opacity: 1; filter: none; }
}

/* Festival laurels, top of the page beside the menu button (which is 68px tall at
   20px from the top); plain page content, so they scroll away. */
.laurels {
  position: absolute;
  top: 20px;
  left: 184px;  /* the same room on both sides as the menu button (144px wide at 20px) takes, so it's centred */
  right: 184px;
  height: 68px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.7;
}
.laurels img { height: auto; }
.laurels .laurels-wide { display: block; width: 90%; max-width: 900px; } /* 90% of the room between the edges and the button */
/* Hidden while loading; they come into focus with the logo. */
.loading .laurels { opacity: 0; }
.revealing .laurels, .loaded .laurels { animation: laurels-in 2.2s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
.logo-laurels { display: none; }
@media (max-width: 767px) {
  .laurels { display: none; }
  /* On the page (not pinned with the logo), the full width of the screen, placed by
     main.js just above the logo's lettering. Sideways drags move it; up and down still
     scroll the page. */
  .intro-logo-hold { position: relative; }
  .logo-laurels {
    display: block;
    position: absolute;
    top: 30vh;
    left: 0;
    right: 0;
    z-index: 1;
    overflow: hidden;
    opacity: 0.7;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }
  .laurel-track { display: flex; width: max-content; will-change: transform; }
  /* 60px tall; the gap after each copy is BELT_GAP in main.js. */
  .laurel-track img { display: block; width: auto; height: 60px; margin: 0 27px 0 0; pointer-events: none; }
  .loading .logo-laurels { opacity: 0; }
  .revealing .logo-laurels, .loaded .logo-laurels { animation: laurels-in 2.2s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
}
@keyframes laurels-in { /* as logo-in, ending at their 70% */
  from { opacity: 0; filter: blur(18px); }
  to { opacity: 0.7; filter: none; }
}

/* The logo holds still in the middle of the screen while the clouds scroll over it,
   until their thick part covers it (94vh of scrolling); then it moves on, hidden. */
.intro-logo-hold { height: 194vh; }
.intro-logo {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  /* the logo in the very middle of the screen, the trailer button below it */
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  padding: 0 16px;
  overflow: hidden;
}
/* The sky photo, a little taller than the screen: main.js moves it up slowly as you
   scroll (it's far away), slower than the clouds coming over it. No colour: Safari
   would paint it around its address bar. */
.intro-logo::before {
  content: "";
  position: absolute;
  inset: 0 0 -70vh 0;
  z-index: -1;
  background: url(sky.webp) center top / cover no-repeat;
  transform: translate3d(0, var(--sky-y, 0px), 0);
  will-change: transform;
}
/* The logo with a very faint glow baked in (the glow adds 5.3% of the width around it;
   baked in because iPhone Safari can paint CSS-glowed images as white boxes). */
.intro-logo picture { display: contents; } /* the image lays out as before */
.intro-logo source { display: none; } /* (they'd take rows of the grid otherwise) */
.intro-logo img { grid-area: 2 / 1; } /* the logo and its shaded copy, one over the other */
.intro-logo .watch { grid-area: 3 / 1; align-self: start; margin-top: clamp(28px, 5vh, 48px); }
/* The shaded copy: darker, seen only through the wisps' shadows (main.js masks it). */
.intro-logo .logo-shade img {
  filter: brightness(0.3);
  animation: none !important;
  visibility: hidden;
  pointer-events: none;
}
.intro-logo img {
  --logo-w: min(87.2vw, 917px);
  width: var(--logo-w);
  height: auto;
  margin: calc(var(--logo-w) * -0.0527) 0;
}

/* The block the clouds are held in. It ends 32vh below the video's top edge (its content,
   the video section, carries on past it), so the clouds are let go, and scroll up and
   away with the page, just as the blur starts (the moment the video fills
   the screen). Clouds top at 50vh + their height, video top 32vh above their bottom:
   height = cloud height + 50vh. */
.flow { height: calc(var(--cloud-h) + 50vh); }

/* Starts at the middle of the screen (50vh, under the logo); the clouds' top fades into the sky
   photo. Sticky: once their soft bottom edge has risen to 32% down the screen (the same
   moment the video fills the screen) they are over the top third of the video, and
   from there they scroll away as the blur starts. */
.intro-clouds {
  position: sticky;
  top: calc(32vh - var(--cloud-h));
  z-index: 1;
  margin-top: -144vh;
  height: var(--cloud-h);
  overflow-x: clip;
  pointer-events: none; /* clicks pass through to the logo's trailer button */
  will-change: transform, opacity;
}
/* The cloud image repeats seamlessly sideways (its width is 0.401 × its height); three
   copies side by side drift left by one copy, then start over, so the clouds move
   steadily with the wind and never stop or turn back. */
.clouds {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(var(--cloud-h) * 0.401 * 3);
  background: url(clouds.webp) left top / auto 100% repeat-x;
  animation: cloud-drift 80s linear infinite;
  will-change: transform;
}
@keyframes cloud-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-33.3333%); }
}
@media (prefers-reduced-motion: reduce) {
  .clouds { animation: none; transform: none; }
}

/* More clouds, at other depths (made by tools/cloud_depth.py), fixed to the screen and
   moved by main.js faster than the bank, as they're nearer: puffs between the bank and
   the texts (clouds-mid.webp), and very thin wisps in front of the texts
   (clouds-veil.webp). Both drift sideways too, faster than the bank. */
.cloud-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden; /* until main.js places them */
  will-change: transform;
}
.cloud-layer div {
  height: 100%;
  width: calc(var(--tile-w, calc(var(--layer-h) * 0.5)) * 3); /* three copies side by side */
  background: left top / auto 100% repeat-x;
  animation: cloud-drift 55s linear infinite;
  will-change: transform;
}
.clouds-mid { z-index: 3; --layer-h: 360vh; height: var(--layer-h); }
.clouds-mid div { background-image: url(clouds-mid.webp); }
.clouds-veil { z-index: 6; --layer-h: 760vh; --tile-w: 240vh; height: var(--layer-h); } /* one long strip, its wisps placed by tools/cloud_depth.py */
/* the strip's end fades out (it would cut through the wisps there: a hard line) */
.clouds-veil {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 50vh), transparent);
  mask-image: linear-gradient(#000 calc(100% - 50vh), transparent);
}
.clouds-veil div { background-image: url(clouds-veil.webp); animation-duration: 40s; }
@media (prefers-reduced-motion: reduce) {
  .cloud-layer div { animation: none; }
}

/* Where the text rides with the clouds; main.js slows it gently into the centre of
   the screen, holds it there for 50vh of scrolling, then lets it move on. */
.cloud-text-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 29%; /* arrives just after the logo is gone, and is done before the video comes up */
  height: 150vh;
  pointer-events: none;
}
.cloud-text {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4; /* above the clouds and the puffs behind it, below the wisps and the menu */
  height: 100vh;
  height: 100svh;
  pointer-events: none;
  visibility: hidden; /* until main.js places it */
  will-change: transform;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 0 16px;
  text-align: center;
  color: var(--ink);
  text-shadow: 0 1px 18px rgba(46, 46, 30, 0.6);
}
/* The logline and quotes sit in the same place; main.js cross-fades from one to the next. */
.quote {
  grid-area: 1 / 1;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 1.6rem;
  will-change: opacity, transform;
}
.quote + .quote { opacity: 0; }
/* The words take the wisps' shadows as they pass over them: the text's colour is a
   background clipped to the letters, with the shadows' shapes (clouds-shade.webp)
   over it, placed by main.js. (Its glow is a drop shadow then: a text shadow would be
   painted over the letters.) */
.honours p, .logline p, .quote blockquote {
  color: transparent;
  background-image: url(clouds-shade.webp), linear-gradient(var(--ink), var(--ink));
  background-repeat: repeat-x, no-repeat;
  background-size: 0 0, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 1px 9px rgba(46, 46, 30, 0.55));
}
/* The first card: the Oscar entry and the European Film Awards shortlist logo. */
.honours { gap: clamp(1.2rem, 3.5vh, 2rem); max-width: 40rem; }
.honours .entry {
  text-wrap: balance; /* lines of even length, no word alone on the last */
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  font-style: italic;
  line-height: 1.25;
}
.honours .entry span {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.quote.honours img { width: auto; height: clamp(130px, 22vh, 200px); }
.logline p {
  max-width: 34rem;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.25;
}
.quote blockquote {
  max-width: 22ch;
  font-size: clamp(1.7rem, 4.2vw, 3.2rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.quote img {
  display: block;
  height: auto;
  filter: drop-shadow(0 1px 10px rgba(46, 46, 30, 0.5));
}
/* The press logos take the wisps' shadows too: a darkened copy over each, seen only
   through the shadows' shapes (main.js). */
.quote .shaded { position: relative; }
.quote .shaded .shade {
  position: absolute;
  inset: 0;
  filter: brightness(0.3);
  visibility: hidden;
}

/* Starts under the clouds' faded bottom, so they melt into it. */
.film {
  position: relative;
  z-index: 0;
  height: 149vh; /* scrolling on through it: the blur straight away, then the synopsis (main.js sets it exactly) */
  margin-top: -32vh; /* the clouds' soft bottom lies over its top, so they arrive and stop together */
}
.film-stage {
  position: sticky;
  top: 0;
  /* the whole screen, under Safari's address bar too (svh would stop above it, showing
     the page's colour there once the video is pinned) */
  height: 100vh;
  height: 100lvh;
  /* Clipped at the sides and bottom only: the video reaches a little past the stage's
     top edge, under the clouds. */
  clip-path: inset(-100vh 0 0 0);
}
/* A little larger than the screen on every side (no zoom): a blur softens a picture's
   edges, and these stay out of sight. */
.film-stage video {
  position: absolute;
  inset: -48px;
  width: calc(100% + 96px);
  height: calc(100% + 96px);
  object-fit: cover;
  will-change: transform, filter;
  /* its top edge, under the thin end of the clouds as it rises, softened: no line
     (the fade is all in the part above the screen once it's in place) */
  -webkit-mask-image: linear-gradient(transparent, #000 48px);
  mask-image: linear-gradient(transparent, #000 48px);
}
/* A light shade over the blurred video, fading in with the blur, so the synopsis reads well. */
.film-wash {
  position: absolute;
  inset: 0;
  background: rgba(24, 26, 20, 0.28);
  opacity: 0;
  pointer-events: none;
}

/* Poster and synopsis over the blurred video (still playing) at the end, in place:
   main.js brings them into focus from a blur. Poster on the left, synopsis on the right;
   the footer at the bottom of the screen. */
.film-story {
  position: absolute;
  inset: 0 0 auto 0;
  min-height: 100%;
  opacity: 0;
  pointer-events: none;
}
.story-screen {
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: 88px 16px 72px;
}
.film-story.shown { pointer-events: auto; }
.story {
  display: grid;
  grid-template-columns: auto minmax(0, 34rem);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  max-width: 72rem;
  transform-origin: 50% 50%;
}
.poster {
  display: block;
  height: min(74vh, 680px);
  width: auto;
  box-shadow: 0 24px 60px rgba(30, 40, 50, 0.45);
}
.synopsis h2 {
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 1.6rem;
  color: var(--cream);
}
.synopsis p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 2.2rem;
}
.button {
  display: inline-block;
  padding: 0.85em 1.8em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  transition: background 0.25s, color 0.25s;
}
.button:hover, .button:focus-visible { background: var(--ink); color: #46462e; outline: none; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; }
/* The release, under the buttons. */
.synopsis .release {
  margin: 1.6rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--ink);
}
.synopsis .release a { color: inherit; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.synopsis .release a:hover { text-decoration-thickness: 2px; }
.watch { background: rgba(20, 30, 40, 0.15); }
/* Phones: stacked, taller than the screen: the poster full width, then the heading, the
   synopsis, the two buttons and the footer. It stays inside the pinned video's box (cut
   off at its bottom edge, which is the screen's); main.js brings it into focus with the
   poster a little below the middle, then moves it up as you scroll on. */
@media (max-width: 767px) {
  .film-story {
    padding: 84px 16px 0;
    transform-origin: 50% 0;
  }
  .story-screen { height: auto; display: block; padding: 0; }
  /* the video, cropped at the sides on a tall screen, framed a little right of its middle */
  .film-stage video { object-position: 66% 50%; }
  .story { display: block; }
  .poster { height: auto; width: 100%; }
  .synopsis h2 { margin: 32px 0 16px; font-size: 2.4rem; }
  .synopsis p { font-size: 1.1rem; line-height: 1.55; margin-bottom: 28px; }
  .synopsis .button { padding: 0.8em 1.1em; font-size: 0.72rem; letter-spacing: 0.14em; }
  .film-story .site-footer { position: static; margin-top: 56px; padding: 16px 0 24px; }
}

/* The impact campaign: a small white pill, fixed at the bottom left from the start
   until the video starts to blur (main.js adds .away): the Women Make Movies logo, the
   words, an arrow (another site). */
.support {
  position: fixed;
  left: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 14px;
  border-radius: 999px;
  background: #fff;
  color: #1d1d16;
  font-family: var(--serif);
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  transition: opacity 0.4s, visibility 0.4s, transform 0.3s;
}
.support:hover { transform: scale(1.05); }
.support:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.support.away, .loading .support { opacity: 0; visibility: hidden; }
.support-logo { flex: none; display: flex; }
.support-logo img { display: block; width: auto; height: 13px; }
.support-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
}
.support-arrow { flex: none; width: 11px; height: 11px; }
@media (max-width: 767px) {
  /* smaller still, the words on two lines */
  .support { left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); height: 34px; gap: 8px; padding: 0 12px 0 12px; }
  .support-logo img { height: 11px; }
  .support-label { font-size: 0.56rem; letter-spacing: 0.13em; }
  .support-label span { display: block; }
  .support-arrow { width: 10px; height: 10px; }
}