/* ==========================================================================
   Christos Anagnostou Daly — styles
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --paper: #F7F5F0;
  --stone-1: #E8E4DC;
  --stone-2: #DFDAD0;
  --stone-3: #D5CFC4;
  --ink: #1C1B19;
  --ink-soft: #57534C;
  --ink-muted: #9A958B;
  --rule: #D8D3C9;

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 4.4vw, 72px);
  --max: 1440px;
  --section-space: clamp(104px, 13vw, 200px);
  --col-gap: clamp(16px, 2vw, 28px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

.container {
  width: min(calc(100% - 2 * var(--gutter)), var(--max));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  font: 400 0.75rem/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Small tracked capitals used for navigation and labels */
.site-nav a,
.site-nav span,
.site-footer__meta,
.placeholder__label {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.is-forthcoming {
  color: var(--ink-muted);
  cursor: default;
}

/* ---------- Header ---------- */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 32px;
  padding-block: clamp(18px, 2.4vw, 34px);
}

.site-nav ul {
  display: flex;
  gap: clamp(20px, 2.8vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a,
.site-nav span.is-forthcoming {
  /* phone size (11px) up to ~600px wide, growing gently to ~13.5px at 1440 */
  font-size: clamp(0.6875rem, 0.576rem + 0.298vw, 0.875rem);
  display: inline-block;
  padding-block: 10px;
  color: var(--ink);
  text-decoration: none;
}
.site-nav span.is-forthcoming { color: var(--ink-muted); }

.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

.social {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.9vw, 12px);
  margin: 0 -9px; /* lets the icon shapes, not their tap areas, align with the margins */
  padding: 0;
  list-style: none;
}

.social {
  /* icon size: 16px on phones up to ~600px wide, growing gently to ~20px at 1440 */
  --icon: clamp(16px, 13.14px + 0.476vw, 21px);
}
.social__link {
  display: grid;
  place-items: center;
  width: calc(var(--icon) + 18px);
  height: calc(var(--icon) + 18px);
  color: var(--ink);
  opacity: 1; /* full strength, so the brand colours are exact */
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.social__link svg {
  width: var(--icon);
  height: var(--icon);
  fill: currentColor;
}
/* Official brand colours, taken from each brand's own logo files and guidelines.
   Gradients and the white details (YouTube triangle, Apple Music note) are inside the icons in index.html. */
.social__link--spotify    { color: #1ED760; }
.social__link--youtube    { color: #FF0033; }
.social__link--soundcloud { color: #FF5500; }
.social__link--apple svg  { fill: url(#brand-apple-music); }

/* Optical balancing: wide marks need a little more size to look equal */
.social__link--youtube svg { width: calc(var(--icon) * 1.125); height: calc(var(--icon) * 1.125); }
.social__link--soundcloud svg { width: calc(var(--icon) * 1.3125); height: calc(var(--icon) * 1.3125); }

.social__link[href]:hover,
.social__link[href]:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}
.social__link[aria-disabled="true"] { cursor: default; }

/* ---------- Placeholders (temporary) ---------- */
.placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: var(--stone-2);
  color: var(--ink-soft);
}
.placeholder::before {
  /* fine inset frame, like a viewfinder */
  content: "";
  position: absolute;
  inset: clamp(10px, 1.4vw, 20px);
  border: 1px solid rgba(28, 27, 25, 0.12);
  pointer-events: none;
}
.placeholder__label { letter-spacing: 0.32em; }
.placeholder__note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--ink-soft);
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(28px, 4.5vw, 64px); }

.hero__frame {
  position: relative;
  margin-top: clamp(30px, 3.8vw, 56px);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: calc(100svh - 13rem);
  min-height: 300px;
  background: var(--stone-3);
}
.hero__frame picture,
.bio__figure picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* Cropping focus for each frame shape: phones keep Christos in view (he sits at the left) */
.hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 4% 50%;
  filter: grayscale(1); /* black and white; the image files themselves stay in colour */
}
.placeholder--hero { background: var(--stone-3); }

.hero__title {
  container-type: inline-size;
}

/* The name always fills the width of the photograph below it, on one line.
   --name-em is the measured width of the name in ems with no tracking;
   --track is the letter-spacing (in ems). Font size = width ÷ total ems. */
.hero__name {
  --name-em: 14.7;
  --track: 0.05;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc((100vw - 2 * var(--gutter)) / (var(--name-em) + 23 * var(--track)) * 0.97);
  font-size: calc(100cqi / (var(--name-em) + 23 * var(--track)) * 0.998);
  line-height: 1;
  letter-spacing: calc(var(--track) * 1em);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
/* cancel the tracking after the final letter so the name sits truly centred */
.hero__name span { margin-right: calc(var(--track) * -1em); }

.hero__role {
  margin: clamp(14px, 1.7vw, 26px) 0 0;
  font-family: var(--sans);
  font-weight: 400;
  /* Grows with the same width the name is fitted to, but more gently: a quiet
     subtitle on phones (~10–11px), prominent yet subordinate on desktop (~28–30px). */
  font-size: clamp(0.625rem, 0.28rem + 1.79vw, 1.9rem);
  font-size: clamp(0.625rem, 0.28rem + 1.79cqi, 1.9rem);
  line-height: 1;
  letter-spacing: 0.62em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
}
.hero__role span { margin-right: -0.62em; }

/* Opening fade — runs once the typefaces have loaded */
.hero__frame,
.hero__name,
.hero__role {
  transition: opacity 1.6s var(--ease), transform 1.6s var(--ease);
}
.hero__role { transition-delay: 0.25s; }
.hero__frame { transition-delay: 0.5s; }
.js:not(.is-ready) .hero__frame { opacity: 0; }
.js:not(.is-ready) .hero__name,
.js:not(.is-ready) .hero__role { opacity: 0; transform: translateY(8px); }

/* ---------- Sections ---------- */
.section { padding-top: var(--section-space); }

/* ---------- Selected works ---------- */
.works {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: clamp(52px, 7vw, 96px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.work__meta {
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.work__index {
  flex: none;
  min-width: 1.8em;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.work__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  line-height: 1.15;
  font-variant-numeric: lining-nums; /* so "Pt. 1" never reads as "Pt. I" */
}
.work__title.is-placeholder { color: var(--ink-muted); font-style: italic; font-weight: 300; }

.work__desc {
  margin: 6px 0 0;
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ---------- Player ---------- */
.player {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}

.player__toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.player__toggle:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}
.player__toggle:disabled {
  border-color: var(--rule);
  color: var(--ink-muted);
  cursor: not-allowed;
}

.player__icon { width: 12px; height: 12px; fill: currentColor; }
.player__icon--play { transform: translateX(1px); }
.player__icon--pause { display: none; }
.is-playing .player__icon--play { display: none; }
.is-playing .player__icon--pause { display: block; }

/* Mouse and touch scrubbing is handled on this wrapper (see main.js); the slider
   inside stays for keyboard and screen readers. The padding enlarges the touch
   area without changing the layout. */
.player__bar {
  min-width: 0;
  margin-block: -10px;
  padding-block: 10px;
  cursor: pointer;
  touch-action: none;          /* the page doesn't scroll while a finger scrubs */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.is-unavailable .player__bar { cursor: default; }

.player__seek {
  --progress: 0%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  pointer-events: none;
}
.player__seek:focus-visible { outline-offset: 2px; }

.player__seek::-webkit-slider-runnable-track {
  height: 1px;
  background: linear-gradient(to right, var(--ink) var(--progress), var(--rule) var(--progress));
}
.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.player__seek::-moz-range-track { height: 1px; background: var(--rule); }
.player__seek::-moz-range-progress { height: 1px; background: var(--ink); }
.player__seek::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.player__bar:hover .player__seek:not(:disabled)::-webkit-slider-thumb,
.player__seek:focus-visible::-webkit-slider-thumb,
.is-started .player__seek::-webkit-slider-thumb { opacity: 1; }
.player__bar:hover .player__seek:not(:disabled)::-moz-range-thumb,
.player__seek:focus-visible::-moz-range-thumb,
.is-started .player__seek::-moz-range-thumb { opacity: 1; }

.player__time {
  min-width: 5.6em;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
}
.is-unavailable .player__time,
.is-loading .player__time,
.has-notice .player__time {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- Biography ---------- */
.bio__grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: clamp(40px, 6vw, 64px);
}

.bio__figure {
  position: relative;
  aspect-ratio: 3 / 4; /* the photograph's own proportions */
  overflow: hidden;
  background: var(--stone-2);
  max-width: 520px;
}
.bio__figure img { width: 100%; height: 100%; object-fit: cover; }

.bio__text {
  max-width: 34em;
}
.bio__text p {
  margin: 0 0 1.25em;
  font-weight: 400;
  font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  line-height: 1.62;
  text-wrap: pretty;
}
/* Justified where the column is wide enough; phone columns are too narrow and would open large gaps */
@media (min-width: 600px) {
  .bio__text p { text-align: justify; }
}
.bio__text p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 32px;
  margin-top: var(--section-space);
  padding-block: 26px 40px;
  border-top: 1px solid var(--rule);
}
.site-footer p { margin: 0; }
.site-footer__name {
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.2;
}
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px clamp(24px, 3vw, 40px);
  color: var(--ink-soft);
}
/* The copyright notice reads as a sentence: same typeface and colour, no capitals */
.site-footer__copyright {
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-transform: none;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width: 600px) {
  .hero__frame { aspect-ratio: 3 / 2; }
  /* Top-aligned, so the frame begins exactly where the photograph's crop begins */
  .hero__frame img { object-position: 0% 0%; }
  .hero__name { --track: 0.07; }
}

@media (min-width: 768px) {
  .works {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(40px, 6vw, 72px);
  }
}

@media (min-width: 1024px) {
  .hero__frame { aspect-ratio: 2.39 / 1; max-height: calc(100svh - 17rem); }
  .hero__frame img { object-position: 50% 0%; }
  .hero__name { --track: 0.1; font-weight: 300; }

  /* Two-column editorial grid shared by works and biography:
     left column = columns 1–5, right column = columns 8–12 */
  .works,
  .bio__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .work:nth-child(odd)  { grid-column: 1 / span 5; }
  .work:nth-child(even) { grid-column: 8 / span 5; }

  /* The photo stays put once it reaches the middle of the screen.
     Its width is five grid columns and its height 4/3 of that, so half its
     height is two-thirds of its width. On short screens it stops 40px from the top. */
  .bio__figure {
    --fig-w: calc((min(100vw - 2 * var(--gutter), var(--max)) - 11 * var(--col-gap)) * 5 / 12 + 4 * var(--col-gap));
    grid-column: 1 / span 5;
    max-width: none;
    position: sticky;
    top: max(40px, calc(50svh - var(--fig-w) * 2 / 3));
    align-self: start;
  }
  .bio__text { grid-column: 8 / span 5; max-width: none; }
}

/* ==========================================================================
   Portfolio page (these classes are used only there; the header, footer,
   players and placeholders above are shared with the homepage unchanged)
   ========================================================================== */

/* Introduction — text beside the Niarchos photograph, on the same grid as the sections below */
.page-intro { padding-top: clamp(28px, 4.5vw, 64px); }
.page-intro__text {
  margin: 0;
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  line-height: 1.6;
  text-wrap: pretty;
}
/* Paragraph spacing as in the homepage biography */
.page-intro__text + .page-intro__text { margin-top: 1.25em; }
/* Portfolio introduction: the homepage biography's size and line height (.bio__text p).
   Scoped to .page-intro so the Contact sentence, which shares .page-intro__text, is unchanged. */
.page-intro .page-intro__text {
  font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  line-height: 1.62;
}

/* Sections: the space between them is split evenly around a thin separator */
.portfolio-section { padding-top: clamp(60px, 7.5vw, 120px); }

.separator {
  display: block;
  height: 1px;
  margin: clamp(60px, 7.5vw, 120px) auto 0;
  padding: 0;
  border: 0;
  background: var(--rule);          /* the same hairline as the footer rule */
}
/* After the introduction: a short centred line, quieter than the full-width ones */
.separator--short {
  width: 72px;
  background: var(--ink-muted);
}

.section-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.625rem, 1.35rem + 1.3vw, 2.625rem);
  line-height: 1.1;
}
.section-meta {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: clamp(0.6875rem, 0.576rem + 0.298vw, 0.875rem);
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-wrap: balance;               /* a longer line wraps into two even lines */
}

/* Italic line beneath the date line: the competition result, the performance */
.section-subtitle {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  line-height: 1.3;
  color: var(--ink-soft);
}

/* Image and video frames. Each frame has its picture's own proportions, so nothing is cropped. */
.media-frame {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--stone-2);
}
.media-frame--square  { aspect-ratio: 1 / 1; }
.media-frame--video   { aspect-ratio: 16 / 9; background: #000; }
.media-frame--vivaldi { aspect-ratio: 1279 / 720; }
.media-frame--portrait { aspect-ratio: 3 / 4; }
.media-frame > picture,
.media-frame > img,
.media-frame > video,
.media-frame > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.media-frame > video {
  display: block;
  object-fit: contain;              /* never stretched or cropped */
  background: #000;
  cursor: pointer;
}
.media-frame picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Media beside text: one shared arrangement for the introduction and all three sections.
   Phones and tablets stack the text, then the image or video. */
.media-row {
  display: grid;
  row-gap: clamp(28px, 4vw, 48px);
}
.media-row__media { max-width: 480px; }
.album .works { margin-top: clamp(72px, 9vw, 128px); }

.work__about {
  margin: 20px 0 0;
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}
/* Justified where the column is wide enough; phone columns are too narrow and would open large gaps.
   The last line stays left-aligned. */
@media (min-width: 600px) {
  .page-intro .page-intro__text,
  .work__about { text-align: justify; }
}

/* Player beneath an image: spaced exactly like the video controls beneath the performance video */
.player--beneath {
  gap: 12px;
  margin-top: 16px;
}

/* Video player: the same controls as the audio players, spaced like the player beneath an image */
.player--video {
  gap: 12px;
  margin-top: 16px;
}

@media (min-width: 1024px) {
  .section-title { font-weight: 300; }

  /* Same twelve-column grid as the homepage: text = columns 1–5, media = columns 8–12.
     align-items: center puts the middle of the text group level with the middle of the media. */
  .media-row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: center;
  }
  .media-row__text  { grid-column: 1 / span 5; grid-row: 1; }
  .media-row__media { grid-column: 8 / span 5; grid-row: 1; max-width: none; }
}

/* ==========================================================================
   Contact page (these classes are used only there)
   ========================================================================== */

/* Footer links (Contact): the footer's own colour, underlined on hover */
.site-footer__meta a {
  color: inherit;
  text-decoration: none;
}
.site-footer__meta a:hover,
.site-footer__meta a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* A short page: header at the top, footer at the bottom of the window, the content centred between */
.page--contact {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
.page--contact .contact {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding-block: clamp(56px, 9vh, 120px);
}
.page--contact .site-footer { margin-top: 0; }

.contact__inner {
  max-width: 34rem;
  text-align: center;
}
/* The site's display serif in tracked capitals, like the name on the homepage, at section-heading scale */
.contact__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.55rem + 1.9vw, 3.5rem);
  line-height: 1;
  letter-spacing: 0.12em;
  padding-left: 0.12em;             /* balances the space after the last letter, so the word sits centred */
  text-transform: uppercase;
}
.contact__text { margin-top: clamp(22px, 2.6vw, 34px); }
.contact__button { margin-top: clamp(32px, 3.6vw, 48px); }

/* Button: charcoal with light capitals in the navigation's typeface */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 34px 0 calc(34px + 0.24em);   /* the extra left padding balances the letter spacing */
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(0.6875rem, 0.6rem + 0.25vw, 0.8125rem);
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.button[href]:hover {
  background: #3A3834;
  border-color: #3A3834;
}
.button[href]:focus-visible { outline-offset: 5px; }
/* Not yet connected: looks finished, does nothing, and says so to screen readers */
.button[aria-disabled="true"] { cursor: default; }

/* ==========================================================================
   Background film (site-config.js: backgroundFilm) — added by main.js only when switched on
   ========================================================================== */

/* Fixed behind all content (z-index -1 in the page's root stacking context, above the off-white
   page colour), covering the window without distortion. It never takes clicks, touches or
   selection, and stays fully transparent until it is actually playing. */
.background-film {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.background-film.is-playing { opacity: var(--film-opacity, 0); }

@media (prefers-reduced-motion: reduce) {
  .background-film { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
  .js:not(.is-ready) .hero__name,
  .js:not(.is-ready) .hero__role { transform: none; }
}