/* One client's section, in three beats over that client's flight. Bare, this is the
   calm stacked page: the same pictures and the same words, one after another. */

/* What each world's dark corners fall to under the words, so a shade reads as the
   film's own and not as a panel laid over it. */
[data-chain="steaky"] { --shade: 34, 6, 10; }
[data-chain="temple"] { --shade: 3, 16, 9; }
[data-chain="ripdrone"] { --shade: 4, 8, 16; }

/* ------------------------------------------------------------------ type -- */
/* The same size and place as Selected Projects, so a section opens like the tab. */
.sec-name {
  font-size: clamp(56px, min(7.3vw, 12.4vh), 136px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.04em;
  text-wrap: balance;
}
[data-chain="temple"] .sec-name { font-size: clamp(46px, min(7.3vw, 12.4vh), 136px); }

/* The type line and the way back share a row, so the name keeps the picture to itself. */
.sec-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 16px;
  margin-top: 10px;
}
.sec-type {
  font-size: clamp(15.5px, 1.25vw, 18px);
  letter-spacing: -.012em;
}

.sec-label {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.006em;
}

.sec-job {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: clamp(25px, 2.35vw, 34px);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -.02em;
  text-wrap: pretty;
}

.sec-does {
  margin-top: 8px;
  font-size: 16.5px;
  line-height: 1.38;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.sec-acts {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 18px;
}

/* The quiet way out, with the underline and arrow of Unseen's project tiles. */
.sec-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
/* Small to look at, full size to a thumb. */
.sec-link::after {
  content: "";
  position: absolute;
  inset: -9px -8px;
}
@media (hover: hover) {
  .sec-link:hover .arrow { transform: translate(1.5px, 1.5px); }
}

/* -------------------------------------------------------------- the calm page -- */
html[data-page="project"]:not(.fly) .nav { position: absolute; }
html[data-page="project"]:not(.fly) .foot {
  position: static;
  flex-wrap: wrap;
  padding-top: 24px;
  background: var(--deep);
}
html[data-page="project"]:not(.fly) .world-link {
  position: static;
  margin: 0 auto;
  transform: none;
}
html[data-page="project"]:not(.fly) .foot small { margin-left: 0; }

html:not(.fly) .beat--name { padding-top: calc(var(--nav-h) + clamp(28px, 5vw, 64px)); }
html:not(.fly) .beat--name .still { margin-top: clamp(24px, 4vw, 48px); margin-bottom: 0; }
html:not(.fly) .sec-job,
html:not(.fly) .sec-does { max-width: 58ch; margin-inline: auto; text-wrap: balance; }

/* ------------------------------------------------------------- the flight -- */
/* The scroll is the timeline, so a scrollbar would only be a second, worse one. */
html.fly[data-page="project"] { scrollbar-width: none; }
html.fly[data-page="project"]::-webkit-scrollbar { display: none; }

/* The words come up out of the haze with the picture, once. */
@keyframes sec-in {
  from { opacity: 0; filter: blur(14px); }
}
html.fly #page.is-lit .beat--name > * { animation: sec-in 1.1s var(--ease) backwards; }
html.fly #page.is-lit .beat--name > :nth-child(2) { animation-delay: .1s; }

html.fly .beat--name { top: clamp(88px, 6.5vw, 104px); }

html.fly .beat--job {
  right: auto;
  bottom: calc(var(--foot-h) + 14px);
  width: min(36vw, 520px);
  text-align: left;
}
/* The corner goes quietly dark under the words: the red floor is too pale for
   white type, and a vignette reads as the film's, not as a panel. */
html.fly .beat--job::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -32vh -36vw calc(-1 * var(--foot-h) - 14px) calc(-1 * var(--gutter));
  background: radial-gradient(100% 100% at 0 100%,
    rgba(var(--shade), .62),
    rgba(var(--shade), .5) 30%,
    rgba(var(--shade), .32) 55%,
    rgba(var(--shade), .14) 76%,
    transparent);
}

/* Beside the laptop, on the wall: lower down, Steaky's paper is too pale for white.
   The beat is as tall as the window, so its shade can sit along the bottom edge,
   where the footer crosses that same paper. */
html.fly .beat--site {
  top: 0;
  right: auto;
  bottom: 0;
  display: grid;
  align-content: center;
  width: min(max(25.5vw, 300px), 372px);
  padding-bottom: 12px;
  text-align: left;
}
html.fly .beat--site::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: calc(-1 * var(--gutter));
  width: 100vw;
  height: calc(var(--foot-h) + 60px);
  background: linear-gradient(to top,
    rgba(var(--shade), .62),
    rgba(var(--shade), .4) 46%,
    transparent);
}
html.fly .sec-acts { justify-items: start; }

/* Steaky's pink is too pale for white, so this one beat is in dark ink. The steak
   fills the frame and starts high, so the name rides above it, in step with the
   window, and the small line sits on frosted pink where it crosses the meat. */
html.fly .beat--dark {
  top: max(6.6vh, 54px);
  color: var(--fog-ink);
  text-shadow: none;
}
html.fly .beat--dark .sec-meta {
  width: fit-content;
  margin-inline: auto;
  padding: 7px 16px 8px;
  border-radius: 999px;
  background: rgba(251, 140, 136, .86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}

/* ------------------------------------------------ taller than it is wide -- */
/* Phones, and anything else held upright. The words take the lower part and the
   laptops stand right there, so the picture rides up to keep them in view. project.js
   sets how far, and holds this same test. */
@media (max-aspect-ratio: 5/4) {
  html.fly[data-page="project"] #stage { transform: translateY(calc(-1 * var(--lift, 0vh))); }

  html.fly .beat--job,
  html.fly .beat--site {
    top: auto;
    right: var(--gutter);
    bottom: calc(var(--foot-h) + 10px);
    display: block;
    width: auto;
    padding-bottom: 0;
  }
  html.fly .beat--site::after { display: none; }

  /* The shade runs the full width and stands well above the words, because the
     site behind them can be almost white. */
  html.fly .beat--job::before,
  html.fly .beat--site::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -130px calc(-1 * var(--gutter)) calc(-1 * var(--foot-h) - 12px);
    background: linear-gradient(to top,
      rgba(var(--shade), .9) 50%,
      rgba(var(--shade), .72) 68%,
      rgba(var(--shade), .34) 84%,
      transparent);
  }
  /* Under the laptop it goes solid before the picture's raised edge, so that edge
     is never seen. */
  html.fly .beat--site::before {
    background: linear-gradient(to top,
      rgb(var(--shade)) 52%,
      rgba(var(--shade), .8) 66%,
      rgba(var(--shade), .36) 84%,
      transparent);
  }

  .sec-does { font-size: 15.5px; }
  .sec-acts { gap: 10px; margin-top: 14px; }
}

/* A phone on its side has no height to stack in, so the words draw in beside the
   laptop, and Steaky's name moves up into the nav's row, the only pink left clear. */
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
  html.fly .beat--dark { top: 10px; }
  html.fly .beat--dark .sec-name { font-size: 42px; }

  html.fly .beat--site { width: min(41vw, 400px); }
  html.fly [data-chain="ripdrone"] .beat--site { width: 29vw; }     /* its laptop's white screen starts sooner */
  .sec-does { font-size: 14.5px; line-height: 1.32; }
  .sec-acts {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
  }
}

/* ---------------------------------------------------------- final touches -- */
/* A lit wall can pass under the white wordmark while the camera goes through a door. */
html.fly[data-page="project"]:not([data-tone="pale"]) .mark { text-shadow: 0 0 12px rgba(4, 9, 38, .6); }
html.fly .beat .pill { text-shadow: none; }
.sec-job, .sec-does { text-wrap: balance; }
.sec-type { text-wrap: balance; }
[data-chain="ripdrone"] .sec-label { color: var(--ink-2); }
@media (hover: hover) {
  .sec-acts .pill:hover .arrow { transform: translate(1.5px, -1.5px); }
}
@media (min-aspect-ratio: 5/4) {
  html.fly [data-chain="ripdrone"] .beat--name { top: clamp(72px, 8vh, 104px); }
}
@media (max-aspect-ratio: 5/4) {
  html.fly #page[data-chain="temple"] .beat--job::before { top: -72px; }
}

/* A finger needs more room than the words take up, without moving them. */
@media (max-width: 860px), (pointer: coarse) {
  .sec-link { padding-block: 10px; margin-block: -10px; }
}