/* Project hero, from the Dragonfly Desserts redesign prototype (prototypes/dragonfly-redesign).
   Only the hero: everything is scoped to .rd-hero, so the rest of the page keeps styles.css as it is.
   Type, colours, the navigation and the pressed name are the site's own (styles.css); this file sets
   their layout and the hero text's motion (project-hero.js).

   The picture in a band ruled top and bottom, ruled at its sides; the pressed name behind it; below,
   the project in two ruled cells: title, discipline and summary; client beside work done. */

.rd-hero {
  --rd-col: min(80.1vw, 1600px);
  --rd-pad: clamp(16px, 2.2vw, 32px);
  --rd-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --u: calc(100cqw / 1728);
  --screen: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--screen);
  overflow: clip;
  /* closes the frame before the process section */
  border-bottom: var(--line) solid var(--ink);
  container-type: inline-size;
}

@supports (height: 100svh) {
  .rd-hero {
    --screen: 100svh;
  }
}

/* The pressed name stays at the back, at the top edge as on every page; the picture is laid over
   its lower part; the links stay on top */
.rd-hero .cs-emboss {
  z-index: 0;
}

.rd-hero .cs-nav {
  z-index: 3;
}

/* The first screen holds the picture and the whole introduction: the navigation and the ruled cells
   take what they need, the picture band takes the rest */
.rd-hero-band {
  position: relative;
  z-index: 2;
  flex: 1000 1 0;
  min-height: max(220px, var(--screen) * 0.3);
  max-height: calc(500 * var(--u));
  margin-top: max(18px, min(calc(40 * var(--u)), var(--screen) * 0.035));
  border-block: var(--line) solid var(--ink);
}

.rd-hero-image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--rd-col);
  border-inline: var(--line) solid var(--ink);
  transform: translateX(-50%);
}

.rd-hero-image > .site-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* When the picture band has reached its tallest, the hero's leftover height went to empty space under
   the ruled cells, so their rules stopped short of the hairline closing the hero. The cells take
   that space instead: they grow too, but the band's far larger grow factor (1000) keeps almost all
   of it while the band can still grow; once the band is capped, the cells get the rest. */
.rd-hero .rd-intro {
  position: relative;
  z-index: 2;
  flex-grow: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: var(--rd-col);
  margin: 0 auto;
  border-inline: var(--line) solid var(--ink);
  color: var(--ink);
  background: var(--cream);
}

.rd-hero .rd-cell,
.rd-hero .rd-facts {
  padding: var(--rd-pad);
}

.rd-hero .rd-cell--main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rd-hero .rd-facts {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  grid-row: auto;
  grid-column: auto;
  gap: clamp(24px, 2.6vw, 44px);
  border-left: var(--line) solid var(--ink);
}

.rd-hero .cs-fact--client {
  flex: 0 1 auto;
}

.rd-hero .cs-fact--client dd {
  width: auto;
  white-space: nowrap;
}

/* each word sits in a mask, so the title's line box needs the glyphs' full height */
.rd-hero .rd-title {
  line-height: 1;
}

.rd-hero .rd-summary {
  max-width: 560px;
  margin-top: 16px;
}

/* ---------- Hero text motion (after Inspiration/Motion/Text in and out.mov) ----------
   Every word sits in its own mask and rises into it on load, fast then settling, in reading order
   within each block. On scroll the lines slide back up out of their masks, a whole line at a time,
   bottom line first (project-hero.js sets "translate", the entrance uses "transform", so they never
   fight). */
.rd-hero .rd-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

/* the title's line is set tight, so its masks reach a little above and below to keep the letters
   whole */
.rd-hero .rd-title .rd-w {
  margin: -0.18em 0 -0.24em;
  padding: 0.18em 0 0.24em;
}

.rd-hero .rd-wi {
  display: inline-block;
  animation: rd-hero-rise 0.95s var(--rd-ease) var(--d, 0s) both;
}

@keyframes rd-hero-rise {
  from {
    transform: translateY(118%);
  }
}

/* ---------- Tablet and phone ---------- */

@media (max-width: 1099px) {
  .rd-hero {
    --rd-col: calc(100vw - 2 * var(--cs-gutter));
  }

  /* Title and summary across the top, client and work done side by side beneath */
  .rd-hero .rd-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .rd-hero .rd-cell--main {
    border-bottom: var(--line) solid var(--ink);
  }

  .rd-hero .rd-facts {
    flex-direction: row;
    border-left: 0;
  }
}

/* Small laptops: the two columns still fit side by side */
@media (min-width: 900px) and (max-width: 1099px) {
  .rd-hero .rd-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .rd-hero .rd-cell--main {
    border-bottom: 0;
  }

  .rd-hero .rd-facts {
    border-left: var(--line) solid var(--ink);
  }

  .rd-hero .cs-fact ul,
  .rd-hero .cs-fact--client dd {
    white-space: normal;
  }
}

/* Phone: a shorter picture, and client beside work done, so the whole introduction is on the first
   screen */
@media (max-width: 699px) {
  .rd-hero-band {
    min-height: max(150px, var(--screen) * 0.2);
  }

  .rd-hero .rd-cell,
  .rd-hero .rd-facts {
    padding: 14px;
  }

  .rd-hero .rd-facts {
    gap: 18px;
  }

  .rd-hero .cs-fact {
    gap: 8px;
  }

  .rd-hero .cs-fact--client {
    flex: 0.8;
  }

  .rd-hero .cs-fact:not(.cs-fact--client) {
    flex: 1.2;
  }

  .rd-hero .cs-fact--client dd {
    width: auto;
    white-space: normal;
  }

  .rd-hero .cs-fact ul {
    white-space: normal;
  }

  .rd-hero .cs-fact li {
    margin-left: 14px;
  }

  .rd-hero .rd-title {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rd-hero .rd-wi {
    animation: none;
  }
}