/* ==========================================================================
   Chapters — pinned section: heading + description on the left, a frame with
   one still image per chapter on the right (stacked <picture> layers that
   crossfade), four chapters that switch as the visitor scrolls.
   js/chapters.js drives:
     --chap-in       0..1 frame + nav fade in
     --chap-expand   0..1 frame grows from square to full width
     .home-chapter__layer--on / .home-chapter__nav-item--on   active chapter
   The section is tall (250vh) and .home-chapter__pin sticks while it scrolls.
   ========================================================================== */
.home-chapter {
  --chap-expand: 0;
  --chap-in: 0;
  --chap-cat-size: 1rem;
  --chap-head: 5.17rem;              /* sticky offset below the header */
  --chap-copy: 13rem;
  --chap-gap: 0rem;
  --chap-pad: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  --chap-h: calc(100svh - var(--chap-head) - var(--chap-copy) - var(--chap-gap) - var(--chap-pad));
  background: transparent;
  flex-shrink: 0;
  height: 120vh;
  min-height: 120vh;
  overflow-anchor: none;
  position: relative;
  z-index: 5;
}

.home-chapter__pin {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--chap-gap);
  height: calc(100svh - var(--chap-head));
  justify-content: flex-start;
  overflow: visible;
  overflow-anchor: none;
  padding: 0 1.5rem var(--chap-pad);
  position: sticky;
  top: var(--chap-head);
}

.home-chapter__copy {
  flex: 0 0 auto;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Copy: rotating heading + rotating description
   -------------------------------------------------------------------------- */
.home-philosophy {
  align-items: center;
  background: transparent;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 1rem;
  position: relative;
  text-align: center;
  z-index: 2;
}

.home-philosophy__heading {
  align-items: center;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  width: max-content;
}

/* the heading sits in a slot sized by an invisible copy of the same text (the
   sizer); when the chapter changes the slot animates to the new height (JS) */
.home-philosophy__role-slot {
  display: block;
  isolation: isolate;
  max-width: 100%;
  overflow: hidden;
  perspective: 600px;
  position: relative;
  transition: height .55s var(--home-ease);
  width: max-content;
}

.home-philosophy__role-sizer {
  display: block;
  pointer-events: none;
  visibility: hidden;
}

.home-philosophy__role {
  display: block;
  inset: 0;
  position: absolute;
  transform-origin: center;
  transition: opacity .55s var(--home-ease), filter .55s var(--home-ease);
  will-change: transform, opacity, filter;
}

.home-philosophy__role.is-enter-from,
.home-philosophy__role.is-leave-to {
  filter: blur(8px);
  opacity: 0;
}

.home-philosophy__copy {
  font-family: var(--font-display);
  font-size: 18px;
  isolation: isolate;
  letter-spacing: -.01em;
  line-height: 26px;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  perspective: 600px;
  position: relative;
  transform: translateY(1rem);
  transition: opacity .7s var(--home-ease), transform .7s var(--home-ease);
  width: min(100%, 64rem);
}

.home-philosophy__copy--in {
  opacity: 1;
  transform: none;
}

/* invisible copy of every description keeps the paragraph at its tallest height */
.home-philosophy__copy-sizer {
  display: grid;
  pointer-events: none;
  visibility: hidden;
}

.home-philosophy__copy-sizer-item {
  grid-area: 1 / 1;
  text-wrap: pretty;
}

.home-philosophy__category {
  block-size: 100%;
  color: #ffffffb8;
  display: block;
  inset: 0;
  position: absolute;
  text-wrap: pretty;
  transform-origin: center;
  transition: opacity .55s var(--home-ease), transform .55s var(--home-ease);
  will-change: transform, opacity;
}

/* wheel transition: forward = new text comes from below, backward = from above */
.home-philosophy__category.is-enter-from.is-forward,
.home-philosophy__category.is-leave-to.is-backward {
  opacity: 0;
  transform: translateY(1.1rem);
}

.home-philosophy__category.is-enter-from.is-backward,
.home-philosophy__category.is-leave-to.is-forward {
  opacity: 0;
  transform: translateY(-1.1rem);
}

.home-philosophy__category-text,
.home-philosophy__category-line {
  display: block;
  text-wrap: pretty;
}

.home-philosophy__category-line + .home-philosophy__category-line {
  margin-top: .45em;
}

/* --------------------------------------------------------------------------
   Stage: film frame with stacked chapter layers and the icon nav
   -------------------------------------------------------------------------- */
.home-chapter__stage {
  container-type: inline-size;
  flex: 1 1 0;
  height: auto;
  margin-inline: auto;
  max-width: 1180px;
  min-height: 0;
  overflow: visible;
  pointer-events: none;
  position: relative;
  width: 100%;
}

.home-chapter__frame {
  background: #000;
  border-radius: 16px;
  height: 100%;
  isolation: isolate;
  left: 50%;
  max-width: 100%;
  opacity: var(--chap-in);
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity .9s var(--home-ease);
  translate: -50% 0;
  width: calc(var(--chap-h) + (100% - var(--chap-h)) * var(--chap-expand));
  will-change: width, opacity;
  z-index: 1;
}

.home-chapter__layer {
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity .7s var(--home-ease);
  width: 100%;
}

.home-chapter__layer--on {
  opacity: 1;
}

.home-chapter__still {
  display: block;
  height: 100%;
  inset: 0;
  max-width: none;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

/* Nav: one icon per chapter, on the left edge of the frame */
.home-chapter__nav {
  align-items: center;
  display: flex;
  flex-direction: column;
  left: .2rem;
  opacity: var(--chap-in);
  padding: .45rem .4rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity .9s var(--home-ease);
  z-index: 5;
}

.home-chapter__nav--in .home-chapter__nav-item {
  pointer-events: auto;
}

/* faster icon swap while paging quickly */
.home-chapter__nav--page .home-chapter__nav-dot,
.home-chapter__nav--page .home-chapter__nav-glyph {
  transition-delay: 0s !important;
  transition-duration: .18s !important;
}

.home-chapter__nav-item {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: #ffffff6b;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  min-height: 28px;
  outline: none;
  overflow: visible;
  padding: calc(3px + .175rem) 3px;
  pointer-events: none;
  position: relative;
  width: 28px;
  -webkit-tap-highlight-color: transparent;
}

.home-chapter__nav-item--on {
  color: #fff;
}

.home-chapter__nav-mark {
  display: grid;
  flex: 0 0 22px;
  height: 22px;
  place-items: center;
  position: relative;
  width: 22px;
}

.home-chapter__nav-dot,
.home-chapter__nav-glyph {
  display: grid;
  grid-area: 1 / 1;
  place-items: center;
  transition: opacity .32s var(--home-ease), transform .32s var(--home-ease), background .32s var(--home-ease), filter .32s var(--home-ease);
}

.home-chapter__nav-dot {
  background: #ffffff59;
  border-radius: 999px;
  height: 12px;
  pointer-events: none;
  width: 12px;
}

.home-chapter__nav-glyph {
  color: #fff;
  pointer-events: none;
}

.home-chapter__nav-glyph,
.home-chapter__nav-item--on .home-chapter__nav-dot {
  opacity: 0;
  transform: scale(.45);
}

.home-chapter__nav-item--on .home-chapter__nav-glyph {
  filter: drop-shadow(0 0 8px rgb(255 232 188 / .95)) drop-shadow(0 0 18px rgb(255 210 140 / .55));
  opacity: 1;
  transform: scale(1);
}

.home-chapter-icon {
  display: block;
  height: 18px;
  width: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .home-chapter__nav--in {
    pointer-events: auto;
  }

  /* hovering the nav shows all icons */
  .home-chapter__nav:hover .home-chapter__nav-dot,
  .home-chapter__nav:focus-within .home-chapter__nav-dot {
    opacity: 0;
    transform: scale(.45);
  }

  .home-chapter__nav:hover .home-chapter__nav-glyph,
  .home-chapter__nav:focus-within .home-chapter__nav-glyph {
    opacity: .42;
    transform: scale(1);
  }

  .home-chapter__nav:hover .home-chapter__nav-item--on .home-chapter__nav-glyph,
  .home-chapter__nav:focus-within .home-chapter__nav-item--on .home-chapter__nav-glyph {
    filter: drop-shadow(0 0 8px rgb(255 232 188 / .95)) drop-shadow(0 0 18px rgb(255 210 140 / .55));
    opacity: 1;
  }

  .home-chapter__nav-item:hover:not(.home-chapter__nav-item--on) .home-chapter__nav-glyph,
  .home-chapter__nav-item:focus-visible:not(.home-chapter__nav-item--on) .home-chapter__nav-glyph {
    filter: drop-shadow(0 0 6px rgb(255 232 188 / .55)) drop-shadow(0 0 12px rgb(255 210 140 / .28));
    opacity: .9;
  }
}

/* --------------------------------------------------------------------------
   Tablet and up
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .home-chapter {
    --chap-head: calc(var(--home-header-offset) - .85rem);
    --chap-copy: 5.25rem;
    --chap-gap: .75rem;
    --chap-pad: 1rem;
    --chap-cat-size: 1.25rem;
    --chap-h: calc(100svh - var(--chap-head) - var(--chap-copy) - var(--chap-gap) - var(--chap-pad));
    height: 250vh;
    min-height: 250vh;
  }

  .home-chapter__pin {
    height: calc(100svh - var(--chap-head) - var(--chap-pad));
    justify-content: flex-start;
    padding: 0 6.25rem;
  }

  .home-chapter__stage {
    container-type: size;              /* cqh: the frame is fitted to the stage height */
    flex: 1 1 0;
    height: auto;
    max-height: none;
  }

  /* the stills are 4:3 designs (1600×1200): the frame keeps that ratio, fits
     the stage and sits centred in it, so nothing is cropped */
  .home-chapter__frame {
    aspect-ratio: 4 / 3;
    border-radius: 36px;
    height: auto;
    left: 50%;
    top: 50%;
    transition: none;
    translate: -50% -50%;
    width: min(100%, calc(100cqh * 4 / 3));
    will-change: opacity;
  }

  .home-chapter__still {
    object-position: center;
  }

  .home-chapter__nav {
    left: .4rem;
    transition: none;
  }

  .home-philosophy {
    gap: .5rem;
  }

  .home-philosophy__copy {
    font-size: 22px;
    line-height: 32px;
  }

  .home-philosophy__category-line {
    white-space: normal;
  }
}

/* Desktop: copy column on the left, frame on the right (below 1280px the 4:3
   frame would be too small next to the copy column, so tablets stack) */
@media (min-width: 1280px) {
  .home-chapter {
    --chap-copy: 0rem;
    --chap-gap: 3.25rem;
    --chap-h: calc(100svh - var(--chap-head) - var(--chap-pad));
  }

  .home-chapter__pin {
    align-items: stretch;
    flex-direction: row;
  }

  .home-chapter__copy {
    align-items: stretch;
    display: flex;
    flex: 0 0 28rem;
    flex-direction: column;
    justify-content: center;
    max-width: 28rem;
    width: 28rem;
  }

  .home-chapter__stage {
    margin-inline: 0;
    max-width: none;
    width: auto;
  }

  .home-chapter__still {
    object-position: center;
  }

  .home-philosophy {
    align-items: flex-start;
    align-self: center;
    gap: 1.15rem;
    min-width: 0;
    text-align: left;
    width: 100%;
  }

  .home-philosophy__heading {
    align-items: flex-start;
    max-width: 100%;          /* long headings wrap inside the copy column */
  }

  .home-philosophy__role,
  .home-philosophy__category {
    transform-origin: left center;
  }

  .home-philosophy__copy {
    font-size: 20px;
    line-height: 28px;
    text-align: left;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Phones: copy above a portrait frame
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .home-chapter {
    --chap-pad: .65rem;
    --chap-gap: .7rem;
    --chap-copy-measure: 21.5625rem;
    --chap-cat-size: 1.125rem;
    --chap-copy: 7.75rem;
    --chap-film-ratio: 2 / 3;
    --chap-h: calc(var(--chap-mobile-vh, var(--home-vh, 100lvh)) - var(--chap-head) - var(--chap-copy) - var(--chap-gap) - var(--chap-pad));
    /* 3.5 screens of scroll: ~0.6 for the intro, then about one screen per chapter
       flip (the split is in js/chapters.js, onProgressCoarse) */
    height: calc(var(--chap-mobile-vh, var(--home-vh, 100lvh)) * 3.5);
    min-height: calc(var(--chap-mobile-vh, var(--home-vh, 100lvh)) * 3.5);
  }

  .home-chapter__pin {
    --chap-pin-top: calc(var(--home-header-offset) - 1rem);
    backface-visibility: hidden;
    height: calc(var(--chap-mobile-vh, var(--home-vh, 100lvh)) - var(--chap-pin-top));
    min-height: 0;
    padding: .15rem 1.5rem var(--chap-pad);
    top: var(--chap-pin-top);
    touch-action: pan-y;
  }

  .home-chapter__frame,
  .home-chapter__nav {
    transition: none;
  }

  .home-chapter__copy {
    display: flex;
    flex: 0 0 auto;
    font-size: var(--chap-cat-size);
    min-height: min-content;
    width: 100%;
    -webkit-text-size-adjust: 100%;
  }

  .home-chapter__stage {
    container-type: size;
    display: grid;
    flex: 1 1 0;
    height: auto;
    margin-inline: auto;
    min-height: 0;
    place-items: start center;
    width: 100%;
  }

  .home-chapter__frame {
    align-self: start;
    aspect-ratio: var(--chap-film-ratio);
    border-radius: 24px;
    height: auto;
    justify-self: center;
    left: auto;
    max-height: none;
    max-width: min(100cqi, 66.66667cqh);
    position: relative;
    top: auto;
    translate: none;
    width: min(100cqi, 66.66667cqh);
  }

  .home-chapter__layer {
    width: 100%;
  }

  .home-chapter__nav {
    opacity: 0;
  }

  .home-chapter__nav--in {
    opacity: 1;
  }

  .home-philosophy {
    flex: 0 0 auto;
    gap: var(--chap-gap, .7rem);
    min-height: 0;
    width: 100%;
  }

  .home-philosophy__heading {
    flex: 0 0 auto;
    font-size: 30px;
    line-height: 1.08;
  }

  .home-philosophy__copy {
    font-size: 1em;
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.375;
    margin-inline: auto;
    max-width: var(--chap-copy-measure, 100%);
    text-wrap: wrap;
    width: 100%;
  }

  .home-philosophy__copy-sizer {
    box-sizing: content-box;
    text-wrap: wrap;
    width: 100%;
  }

  .home-philosophy__copy-sizer-item {
    font-size: inherit;
    line-height: inherit;
    text-wrap: wrap;
    width: 100%;
  }

  .home-philosophy__category {
    display: grid;
    place-items: center;
    text-wrap: wrap;
    width: 100%;
  }

  .home-philosophy__category-text,
  .home-philosophy__category-line {
    font-size: inherit;
    line-height: inherit;
    max-width: none;
    text-wrap: wrap;
    width: 100%;
  }
}

@media (max-width: 380px) {
  .home-chapter {
    --chap-film-ratio: 4 / 3;
  }

  .home-chapter__stage {
    place-items: start stretch;
  }

  .home-chapter__frame {
    aspect-ratio: 4 / 3;
    max-height: 100%;
    max-width: 100%;
    min-width: 100%;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-chapter {
    height: auto;
    min-height: 0;
  }

  .home-chapter__pin {
    height: auto;
    padding: 0 1.5rem;
    position: relative;
  }

  .home-chapter__frame {
    opacity: 1;
    width: 100%;
  }

  .home-chapter__layer,
  .home-chapter__nav-item {
    filter: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}