/* =========================================================================
   SOMEBODY TO LEAN ON — the one and only stylesheet.

   HOW TO CHANGE THE COLOURS: edit the block called ":root" just below.
   Every colour on the site comes from there, so changing it once changes
   it everywhere. Don't put colours anywhere else in this file.

   There is no build step. Edit a file, save it, refresh the browser.

   The only JavaScript on the site is ~12 lines at the bottom of each page
   that fade content in as you scroll. Everything else, including the
   music-note parallax, is pure CSS.
   ========================================================================= */

:root {
  /* ---- Colours (sampled from the film poster) ------------------------- */
  --cream:  #efe7db;   /* main page background — the poster's warm ground  */
  --paper:  #fbf9f5;   /* panels and cards sitting on top of the cream     */
  --ink:    #1f2430;   /* body text — the near-black navy of the portrait  */
  --muted:  #5b5c58;   /* captions, dates, small print                     */
  --brick:  #a8412a;   /* MAIN ACCENT: links, buttons, underlines          */
  --brick-dark: #8a3421;  /* the same accent, darker, for hover states     */
  --coral:  #ef6a58;   /* decoration only — never small text on cream      */
  --orange: #ef9a3c;
  --teal:   #3f97a0;
  --gold:   #f0c04a;
  --line:   #ddd2c0;   /* hairline borders                                 */

  /* ---- Type ----------------------------------------------------------- */
  /* These are the fonts already on the reader's computer, so the site
     loads instantly and works with no internet connection. To use a
     custom font later, see the @font-face note at the bottom of this file. */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);

  /* ---- Spacing -------------------------------------------------------- */
  --gap: 1.5rem;
  --section-pad: clamp(3.5rem, 8vw, 6.5rem);   /* space above/below sections */
  --radius: 10px;
}

/* =========================================================================
   BASE
   ========================================================================= */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* so anchor links don't hide under the header */
  -webkit-text-size-adjust: 100%;
}

/* Respect people who've asked their computer to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--brick); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brick-dark); }

/* Keyboard users must always be able to see where they are. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Visible only to screen readers — used for the "skip to content" link. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: 100;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: 0.7rem 1.1rem; background: var(--ink); color: #fff;
  border-radius: var(--radius); text-decoration: none;
}

/* =========================================================================
   TYPE SCALE
   ========================================================================= */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6.5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 750; }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem);   font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* A short line of text above a heading, e.g. "The Film". */
.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brick);
  margin: 0 0 0.75rem;
}

/* The big pull-out sentence used under headings. */
.lede {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 40ch;
}

blockquote {
  margin: 2rem 0;
  padding-left: 1.4rem;
  border-left: 4px solid var(--coral);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
blockquote cite { display: block; font-size: 0.95rem; font-weight: 400;
                  font-style: normal; color: var(--muted); margin-top: 0.8rem; }

/* =========================================================================
   LAYOUT HELPERS
   ========================================================================= */

.wrap    { max-width: 1120px; margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.wrap--narrow { max-width: 760px; }
.prose   { max-width: 66ch; }
.section { padding-block: var(--section-pad); }
.section--paper { background: var(--paper); }
.section--ink   { background: var(--ink); color: var(--cream); }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink a { color: var(--gold); }

.section-head { margin-bottom: 2.5rem; }

/* A thin coloured rule that echoes the poster's staves. */
.rule {
  height: 5px; border: 0; margin: 0;
  background: linear-gradient(90deg,
    var(--coral) 0 20%, var(--orange) 20% 40%, var(--gold) 40% 60%,
    var(--teal) 60% 80%, var(--brick) 80% 100%);
}

/* =========================================================================
   BUTTONS
   ========================================================================= */

.btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  background: var(--brick);
  color: #fff;
  font-weight: 650;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid var(--brick);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: var(--brick-dark); border-color: var(--brick-dark);
             color: #fff; transform: translateY(-1px); }

/* Outlined version, for the less important of two side-by-side buttons. */
.btn--ghost { background: transparent; color: var(--brick); }
.btn--ghost:hover { background: var(--brick); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* =========================================================================
   SITE HEADER  (identical on all five pages)
   ========================================================================= */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(239, 231, 219, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  padding-block: 0.75rem;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
  line-height: 1.2;
}
.wordmark:hover { color: var(--brick); }

/* The nav is five short links. On a phone they simply wrap onto a second
   line — no pop-out menu, so no JavaScript is needed anywhere. */
.site-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.site-nav a {
  font-size: 0.95rem; font-weight: 600; color: var(--ink);
  text-decoration: none; padding-block: 0.2rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--brick); border-bottom-color: var(--coral); }
/* Add class="is-current" to the link for the page you're on. */
.site-nav a.is-current { color: var(--brick); border-bottom-color: var(--brick); }

/* =========================================================================
   SOCIAL LINKS
   ========================================================================= */

.social { display: flex; gap: 0.5rem; align-items: center; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  color: var(--ink); border: 1.5px solid var(--line);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.social a:hover { background: var(--brick); border-color: var(--brick); color: #fff; }
.social svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }

/* The larger pair of social buttons in the News section. */
.social--big a { width: auto; height: auto; border-radius: 999px;
                 padding: 0.7rem 1.3rem; gap: 0.55rem; font-weight: 650;
                 text-decoration: none; }

.site-footer .social a { color: var(--cream); border-color: rgba(239,231,219,0.35); }
.site-footer .social a:hover { background: var(--cream); color: var(--ink); }

/* =========================================================================
   HERO  (homepage only)
   ========================================================================= */

.hero { background: var(--cream); overflow: hidden; }
.hero .wrap {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2rem, 5vw, 4rem);
}

/* Two columns on wider screens, stacked on phones. */
@media (min-width: 850px) {
  .hero .wrap { grid-template-columns: 1fr 1fr; }
}

.hero-art {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(31, 36, 48, 0.16);
}
.hero-art img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Shows the colourful right-hand side of the poster artwork. */
  object-position: 72% 50%;
}
@media (min-width: 850px) {
  .hero-art img { aspect-ratio: 3 / 4; }
}

.hero h1 { margin-bottom: 0.35em; }
.hero .runtime {
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 1rem;
}

/* =========================================================================
   FESTIVAL LAURELS
   ========================================================================= */

.laurels {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 1.5rem 2.5rem;
  padding-block: 2rem;
}
.laurels img { max-height: 88px; width: auto; }

/* =========================================================================
   TRAILER  — an iframe with no JavaScript attached
   ========================================================================= */

.video {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(31, 36, 48, 0.22);
}
.video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =========================================================================
   NEWS & SCREENINGS
   ========================================================================= */

.news { list-style: none; margin: 0 0 2rem; padding: 0; }
.news li {
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
  display: grid; gap: 0.15rem 1.75rem;
}
.news li:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 700px) {
  .news li { grid-template-columns: 8.5rem 1fr; }
}
.news .when {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brick); padding-top: 0.3rem;
}
.news .what { font-weight: 650; }
.news .where { color: var(--muted); font-size: 0.95rem; }

/* =========================================================================
   IMAGE GALLERY  — each photo links straight to the full-size version,
   which is why no lightbox JavaScript is needed.
   ========================================================================= */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.gallery a {
  display: block; overflow: hidden; border-radius: var(--radius);
  background: var(--ink);
}
.gallery img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform 0.35s ease, opacity 0.2s ease;
}
.gallery a:hover img { transform: scale(1.04); opacity: 0.92; }

figure { margin: 0; }
figcaption { font-size: 0.88rem; color: var(--muted); margin-top: 0.55rem; }

/* =========================================================================
   CARDS  (used for themes, team bios, press downloads)
   ========================================================================= */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.25rem;
}
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.card h3 { margin-bottom: 0.4rem; }
.card p:last-child { margin-bottom: 0; }
.section--paper .card { background: #fff; }

/* A card keeps its light background even on a dark section, so its text has to
   be dark too. Without this it inherits the cream body colour and the white
   heading colour from .section--ink and all but vanishes against the card. */
.section--ink .card,
.section--ink .card h3 { color: var(--ink); }
.section--ink .card a  { color: var(--brick); }

/* A card whose top edge carries a colour, to break up long lists. */
.card--coral  { border-top: 4px solid var(--coral); }
.card--teal   { border-top: 4px solid var(--teal); }
.card--orange { border-top: 4px solid var(--orange); }
.card--gold   { border-top: 4px solid var(--gold); }

/* Two-column text-and-photo blocks (director bio, Five Sisters, etc.) */
.split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 800px) {
  .split { grid-template-columns: 5fr 7fr; }
  .split--flip > :first-child { order: 2; }
}
.split img { border-radius: var(--radius); width: 100%; }

/* =========================================================================
   PARTNER RIBBON
   ========================================================================= */

/* Six partners laid out as two tidy rows of three, so the row never
   wraps unevenly. Drops to two columns on small screens. */
.partners {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 880px;
  margin-inline: auto;
}
@media (min-width: 720px) {
  .partners { grid-template-columns: repeat(3, 1fr); }
}
.partners a {
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.4rem;
  height: 124px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.partners a:hover { transform: translateY(-3px);
                    box-shadow: 0 10px 24px rgba(31, 36, 48, 0.12); }
.partners img { max-height: 82px; max-width: 100%; width: auto; object-fit: contain; }
/* Five Sisters' logo is a very wide, thin script, so it needs the full
   width of its tile to stay legible. */
.partners img.is-wide { max-height: 100%; }

/* 8Above's logo is supplied only in yellow and white, which are both
   invisible on a white tile. Yellow on dark navy is that brand's own
   treatment, so this tile is deliberately dark. If a dark-coloured
   version of the logo ever arrives, delete this rule. */
.partners a.is-dark { background: var(--ink); border-color: var(--ink); }

/* =========================================================================
   FOOTER
   ========================================================================= */

.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding-block: 3.5rem 2.5rem;
  margin-top: 0;
}
.site-footer a { color: var(--gold); }
.site-footer h4 { color: #fff; font-size: 0.8rem; letter-spacing: 0.12em;
                  text-transform: uppercase; margin-bottom: 0.7rem; }
.footer-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-bottom: 2.5rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.4rem; }
.footer-bottom {
  border-top: 1px solid rgba(239, 231, 219, 0.18);
  padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  align-items: center;
  font-size: 0.87rem; color: rgba(239, 231, 219, 0.7);
}

/* =========================================================================
   CREDITS LIST  (press page)
   ========================================================================= */

.credits { columns: 2 230px; column-gap: 2.5rem; font-size: 0.95rem; }
.credits div { break-inside: avoid; margin-bottom: 1.2rem; }
.credits dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
              text-transform: uppercase; color: var(--brick); margin-bottom: 0.15rem; }
.credits dd { margin: 0; }

.specs { border-collapse: collapse; width: 100%; max-width: 520px; }
.specs th, .specs td { text-align: left; padding: 0.6rem 0;
                       border-bottom: 1px solid var(--line); vertical-align: top; }
.specs th { width: 11rem; font-weight: 700; color: var(--muted);
            font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* =========================================================================
   TAKE ACTION PAGE
   ========================================================================= */

.org-group { margin-bottom: 3.5rem; }
.org-group h3 {
  display: inline-block;
  border-bottom: 3px solid var(--coral);
  padding-bottom: 0.3rem;
  margin-bottom: 0.75rem;
}
.org-group-intro { color: var(--muted); max-width: 62ch; margin-bottom: 1.5rem; }

.org-list { list-style: none; margin: 0; padding: 0; }
.org {
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
}
.org:first-child { border-top: 0; }
.org-name { font-size: 1.05rem; font-weight: 700; }
.org-name a { color: var(--ink); text-decoration: none; }
.org-name a:hover { color: var(--brick); text-decoration: underline; }
.org-url {
  font-size: 0.8rem; color: var(--muted); margin-top: 0.1rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  word-break: break-all;
}
.org-desc { margin: 0.4rem 0 0; font-size: 0.95rem; color: var(--muted); }

/* The choir in the film leads the page, so its entry is set larger and in
   full-strength text. Without this it reads as one more row in a long list.
   Add class="org org--featured" to any entry that should stand out. */
.org--featured { padding-top: 0.25rem; }
.org--featured .org-name { font-size: 1.5rem; line-height: 1.2; }
.org--featured .org-desc { font-size: 1.05rem; color: var(--ink); max-width: 62ch;
                           margin-top: 0.55rem; }

.disclaimer { font-size: 0.85rem; color: var(--muted); margin-top: 2.5rem;
              padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* Skip-to-top of a long page. */
.back-to-top { display: inline-block; margin-top: 2rem; font-size: 0.9rem; }

/* =========================================================================
   PRINT  — so a festival programmer can print the press page cleanly.
   ========================================================================= */

@media print {
  .site-header, .site-footer, .btn-row, .video, .note-sky { display: none; }
  /* Never let a paused fade-in animation print as blank text. */
  *, *::before, *::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body { background: #fff; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
}

/* =========================================================================
   OPTIONAL: using a custom font instead of the computer's built-in one.

   1. Put a .woff2 font file in a new folder called "fonts".
   2. Un-comment the @font-face rule below (remove the two slash-star
      markers that surround it).
   3. At the top of this file, change --font-display to:
        --font-display: "Somebody Display", var(--font-body);

   Nothing else on the site needs to change.
   ========================================================================= */

/*
@font-face {
  font-family: "Somebody Display";
  src: url("fonts/display.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
*/

/* =========================================================================
   CONTACT FORM
   Plain HTML posting to Formspree. No JavaScript: the browser does the POST
   itself. The address it delivers to lives in the Formspree account, never
   in the page, so there is nothing in the HTML for a spam bot to harvest.
   ========================================================================= */

.contact-form { max-width: 34rem; margin-top: 1.75rem; }
.contact-form p { margin: 0 0 1.1rem; }
.contact-form label {
  display: block;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
}
.contact-form textarea { resize: vertical; min-height: 9rem; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-color: var(--teal);
}
.contact-form button { cursor: pointer; font: inherit; }

/* The honeypot. It is hidden from people, so only a spam bot fills it in, and
   Formspree discards anything that arrives with it filled. This is what keeps
   the form free of a CAPTCHA, which would need JavaScript. Never remove it,
   and never make it visible. */
.honeypot {
  position: absolute; left: -9999px;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.form-note { font-size: 0.88rem; color: var(--muted); max-width: 34rem; }

/* =========================================================================
   MOVEMENT
   ------------------------------------------------------------------------
   Two separate mechanisms, on purpose:

   1. THE MUSIC-NOTE PARALLAX is pure CSS. The note layer is position:fixed,
      so it stays put while the page scrolls over it. That IS the parallax,
      and it works in every browser with no JavaScript at all.

   2. THE FADE-IN-ON-SCROLL uses a tiny IntersectionObserver script at the
      bottom of each page (about 12 lines, no library). It has to be
      JavaScript: the CSS-only way of doing this, scroll-driven animations,
      only reached Safari in late 2025 and Firefox in late 2025, so a large
      share of visitors would see no animation at all.

   Safety: the script adds class="js" to <html>. The hidden state below is
   scoped to .js, so if the script never runs — old browser, JS disabled,
   an error — every element simply stays visible. Nothing can vanish.
   ========================================================================= */

/* ---- 1. The drifting field of music notes ----------------------------- */

/* One fixed layer per page, sitting behind everything. Sections with their
   own background colour (--paper, --ink) cover it; the plain cream sections
   are transparent, so the notes show through there. */
.note-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("images/notes.svg");
  background-size: 330px 330px;
  background-repeat: repeat;
  opacity: 0.42;
  /* Keep the notes away from the middle of the screen, where the words are. */
  -webkit-mask-image: radial-gradient(ellipse 68% 58% at 50% 48%,
                        rgba(0,0,0,0) 8%, rgba(0,0,0,1) 72%);
          mask-image: radial-gradient(ellipse 68% 58% at 50% 48%,
                        rgba(0,0,0,0) 8%, rgba(0,0,0,1) 72%);
}

/* Everything else sits above the note layer. */
.site-header, main, .site-footer { position: relative; z-index: 1; }

/* The cream sections stay transparent so the notes are visible through them.
   .section--paper and .section--ink already paint their own background. */
.hero { background: transparent; }

/* The notes also drift as you scroll, at about a fifth of the page's speed.
   That slow lag is what reads as depth. It is driven by the small script at
   the bottom of each page, which sets background-position-y — the background
   repeats forever, so the pattern can never run out or leave a gap. If the
   script does not run, the layer simply stays put and still looks correct. */

/* ---- 2. Fade and rise on scroll --------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.7, 0.3, 1),
                transform 0.7s cubic-bezier(0.22, 0.7, 0.3, 1);
    will-change: opacity, transform;
  }
  .js .reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* Cards and gallery tiles arrive one after another rather than together. */
  .cards > .reveal:nth-child(2),  .gallery > .reveal:nth-child(2)  { transition-delay: 0.08s; }
  .cards > .reveal:nth-child(3),  .gallery > .reveal:nth-child(3)  { transition-delay: 0.16s; }
  .cards > .reveal:nth-child(4),  .gallery > .reveal:nth-child(4)  { transition-delay: 0.24s; }
  .cards > .reveal:nth-child(5),  .gallery > .reveal:nth-child(5)  { transition-delay: 0.32s; }
  .cards > .reveal:nth-child(6),  .gallery > .reveal:nth-child(6)  { transition-delay: 0.40s; }
}

/* ---- Softer, less blocky surfaces ------------------------------------- */

.card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--coral);
  box-shadow: 0 14px 30px rgba(31, 36, 48, 0.10);
}

/* ---- The first screen ------------------------------------------------- */
/* The hero is already on screen when the page opens, so it gets a plain
   timed animation on load rather than waiting for a scroll. */

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes rule-in {
  from { transform: scaleX(0); transform-origin: left center; }
  to   { transform: scaleX(1); transform-origin: left center; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero .hero-art,
  .hero .reveal {
    animation: reveal-in 0.85s cubic-bezier(0.22, 0.7, 0.3, 1) both;
    /* The hero animates on load, so it must not also wait for the observer. */
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero .hero-art            { animation-delay: 0.05s; }
  .hero .reveal:nth-child(1) { animation-delay: 0.18s; }
  .hero h1.reveal            { animation-delay: 0.26s; }
  .hero .reveal:nth-child(4) { animation-delay: 0.34s; }
  .hero .btn-row.reveal      { animation-delay: 0.42s; }
  .hero .runtime {
    animation: reveal-in 0.85s cubic-bezier(0.22, 0.7, 0.3, 1) 0.30s both;
  }
  .rule { animation: rule-in 1.1s cubic-bezier(0.6, 0, 0.2, 1) 0.55s both; }
}