/* =========================================================================
   The choice of model

   SOLUM Plus or SOLUM Studio, chosen once for the whole page (src/js/ui/
   model.js). An introduction to the choice, then the toggle — and then,
   with no rule between, the exteriors (exteriors.css), which are the
   first thing the choice changes and stand in for pictures of the two.

   The toggle is a glass track with a lit pill that slides to the choice:
   the pill is the track's own ::before, moved by the model held on <html>,
   so it travels between the two rather than one button lighting as the
   other goes out.
   ========================================================================= */

.models {
  /* Short at the foot: the exteriors follow as part of the same choice,
     with no rule between, and bring their own padding. */
  padding: var(--section-pad) var(--gutter-safe) 0;
  background: var(--c-black);
}

/* ---- The introduction ----
   Before the choice, a word on what is being chosen: the two names as one
   large line, what separates them and what does not, set centred over the
   toggle in the manner of a product launch. The large type carries a cool
   gradient, from the page's ink into the obsidian of the cladding swatch,
   so it reads as lit rather than printed. The paragraph is held down, with
   the one phrase that matters brought up. */
.models__intro {
  max-width: 62rem;
  margin: 0 auto clamp(var(--space-7), 7vw, 6rem);
  text-align: center;
}

.models__eyebrow {
  justify-content: center;
  margin-bottom: var(--space-6);
}

.models__headline,
.models__lede {
  background: linear-gradient(100deg, #f4f8fb 0%, #c9d6e0 45%, var(--c-obsidian) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-ink);
}

.models__headline {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.2rem + 5.4vw, 6.25rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.models__headline-line {
  display: block;
}

.models__lede {
  margin: clamp(var(--space-6), 4vw, var(--space-7)) auto 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
}

/* Each part rises into place as it comes into view, one after another,
   tied to the scroll so it moves as fast as the reader does. Without a
   scroll timeline, or with less motion asked for, it is simply there. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .models__intro > * {
      animation: models-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
  }
}

@keyframes models-rise {
  from {
    opacity: 0;
    translate: 0 1.5rem;
  }
  to {
    opacity: 1;
    translate: none;
  }
}

@supports not (background-clip: text) {
  .models__headline,
  .models__lede {
    -webkit-text-fill-color: currentColor;
  }
}

/* ---- The toggle ----
   A pill of the page's glass (tokens.css, liquid glass), and in it, for
   the model chosen, a milkier pill of the same glass, in which the name
   is lit. The names in the cards' typeface (Tomorrow). */
.models__toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 19.5rem);
  margin: 0 auto;
  padding: 5px;
  border-radius: 999px;
  background: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}


/* the lit pill */
.models__toggle::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 5px);
  border-radius: 999px;
  background: var(--glass-lit-frost);
  box-shadow: var(--glass-lit-edge), var(--glass-lit-shadow);
  transition: translate 0.55s var(--ease-out);
}


/* the Studio is on the left, so the pill crosses for the Plus */
:root[data-model="standard"] .models__toggle::before {
  translate: 100% 0;
}

.models__option {
  position: relative;      /* over the pill */
  padding: 0.8rem 1rem;
  font-family: var(--font-tech);
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  /* the tracking leaves a space after the last letter; this recentres */
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  transition: color 0.4s ease;
}

.models__option.is-selected {
  color: var(--c-ink);
}

@media (hover: hover) {
  .models__option:not(.is-selected):hover {
    color: var(--c-ink-2);
  }
}

.models__option:focus-visible {
  outline-offset: -4px;
}

/* ---- The two, side by side ----
   Each model's paragraph over its picture, the whole side a button that
   chooses it (model.js marks the chosen one). The one chosen is in
   colour, its words in the page's ink; the other is held back in grey,
   its words dimmed, and comes up a little under the pointer. The pictures
   take the page's cut corner, mirrored on the right so the two face each
   other across the middle. */
.models__duo {
  display: grid;
  gap: clamp(var(--space-6), 4vw, var(--space-7));
  margin-top: clamp(var(--space-6), 6vh, 4rem);
}

@media (min-width: 48rem) {
  .models__duo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(var(--space-4), 2.6vw, 2.5rem);
  }
}

.models__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--space-5), 4vh, var(--space-7));
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.models__side.is-selected {
  cursor: default;
}

.models__side:focus-visible {
  outline: 1px solid var(--c-led-core);
  outline-offset: 6px;
}

.models__copy {
  display: block;
  max-width: 32rem;
  font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
  line-height: 1.55;
  color: var(--c-ink-4);
  text-wrap: pretty;
  transition: color 0.6s var(--ease-out);
}

.models__copy strong {
  font-weight: 400;
  color: var(--c-ink-3);
  transition: color 0.6s var(--ease-out);
}

.models__side.is-selected .models__copy,
.models__side.is-selected .models__copy strong {
  color: var(--c-ink);
}

.models__picture {
  display: block;
  width: 100%;
  aspect-ratio: 2.6 / 1;
  overflow: hidden;
  border-radius: var(--img-radius) var(--img-radius) 0 var(--img-radius);
  clip-path: var(--img-notch-clip);
  background: var(--c-black);
}

/* the right-hand picture's cut corner on its inner side */
.models__side:last-child .models__picture {
  border-radius: var(--img-radius) var(--img-radius) var(--img-radius) 0;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    var(--img-notch) 100%,
    0 calc(100% - var(--img-notch)));
}

.models__picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.6);
  transition: filter 0.7s var(--ease-out);
}

.models__side.is-selected .models__picture img {
  filter: none;
}

@media (hover: hover) {
  .models__side:not(.is-selected):hover .models__picture img {
    filter: grayscale(1) brightness(0.78);
  }

  .models__side:not(.is-selected):hover .models__copy {
    color: var(--c-ink-3);
  }
}

/* ---- The pair, on a phone ----
   Stacked, the Plus's words and picture came after the Studio's, dimmed
   and in grey, and read as something not to be had. On a phone the two
   pictures sit side by side instead, each the way to choose its model,
   and only the chosen one's words follow, across the width of the two.
   (Chosen from a study, tag chooser-study, docs/studies/chooser/.) */
@media (max-width: 47.99rem) {
  .models__duo {
    --pair-gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--pair-gap);
    align-items: start;
  }

  .models__side {
    position: relative;
    gap: var(--space-6);
  }

  .models__picture {
    order: -1;
    aspect-ratio: 4 / 3;
  }

  /* the words, from the Studio's column across both, or from the Plus's
     reaching back over the Studio's */
  .models__copy {
    align-self: flex-start;
    width: calc(200% + var(--pair-gap));
    max-width: none;
  }

  .models__side:last-child .models__copy {
    margin-left: calc(-100% - var(--pair-gap));
  }

  /* the other's words out of the flow, crossing out as the chosen one's
     cross in */
  .models__side:not(.is-selected) .models__copy {
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  .models__side.is-selected .models__copy {
    opacity: 1;
    visibility: visible;
    transition: color 0.6s var(--ease-out), opacity 0.6s ease 0.1s, visibility 0s;
  }
}

/* ---- The two on a card ----
   From a tablet up the two sit on a card of their own, the width of the
   finish cards below it and with their corners (finish-card.css), so the
   choice reads as the first of the set: each picture across the head of
   its side, its paragraph under it. The card is graphite at the top,
   sinking to black, so it has a top and sides but no foot; behind the
   model chosen, a soft light, which crosses the card as the choice does.
   The picture chosen is lifted off the card a little; the pictures take
   the card's tight rounding, and a smaller cut than the card's on the
   corner nearest its own
   (Studio's top-left, Plus's top-right). The cut is on the photograph, so
   the picture's ring and lift are drop-shadows, which follow it. */
@property --duo-light {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 25%;
}

@media (min-width: 48rem) {
  .models__duo {
    --duo-light: 25%;
    position: relative;
    isolation: isolate;
    container-type: inline-size;
    padding: clamp(1rem, 2.4vw, 2.25rem) clamp(1rem, 2.4vw, 2.25rem) clamp(1.25rem, 2.6vw, 2.5rem);
    transition: --duo-light 0.9s var(--ease-out);
  }

  :root[data-model="standard"] .models__duo {
    --duo-light: 75%;
  }

  .models__duo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--card-radius);
    clip-path: var(--card-notch-clip);
    background:
      var(--frost-sheen),
      linear-gradient(180deg, transparent 36%, rgb(0 0 0 / 0.62) 66%, rgb(0 0 0 / 0.95) 88%),
      var(--frost-grain),
      radial-gradient(34cqw 20cqw at var(--duo-light) 14cqw,
        rgb(236 242 247 / 0.1),
        rgb(236 242 247 / 0.03) 55%,
        transparent),
      linear-gradient(180deg, rgb(31 33 36 / 0.62), rgb(20 21 23 / 0.6) 55%),
      rgb(0 0 0 / 0.42);
    /* frosted, as the finish cards are (tokens.css) */
    -webkit-backdrop-filter: var(--frost-filter);
    backdrop-filter: var(--frost-filter);
    box-shadow: var(--frost-rim);
  }

  .models__side .models__picture {
    order: -1;
    /* shorter where the screen is short (scene.js) */
    max-height: var(--models-pic-h, none);
    border-radius: 0.4cqw;
    clip-path: none;
    background: none;
    filter:
      drop-shadow(0 0 0.5px rgb(255 255 255 / 0.06))
      drop-shadow(0 14px 14px transparent)
      drop-shadow(0 0 18px transparent);
    transition:
      translate 0.7s var(--ease-out),
      filter 0.7s var(--ease-out);
  }

  .models__side:last-child .models__picture {
    border-radius: 0.4cqw;
    clip-path: none;
  }

  .models__side .models__picture img {
    background: var(--c-black);
    clip-path: polygon(0 1cqw, 1cqw 0, 100% 0, 100% 100%, 0 100%);
  }

  .models__side:last-child .models__picture img {
    clip-path: polygon(0 0, calc(100% - 1cqw) 0, 100% 1cqw, 100% 100%, 0 100%);
  }

  @supports (clip-path: shape(from 0 0, line to 1px 1px)) {
    .models__side .models__picture img {
      clip-path: shape(from 0 100%,
        line to 0 calc(1cqw + 0.25cqw),
        curve to calc(0.25cqw * 0.7071) calc(1cqw - calc(0.25cqw * 0.7071)) with 0 1cqw,
        line to calc(1cqw - calc(0.25cqw * 0.7071)) calc(0.25cqw * 0.7071),
        curve to calc(1cqw + 0.25cqw) 0 with 1cqw 0,
        line to 100% 0,
        line to 100% 100%,
        close);
    }

    .models__side:last-child .models__picture img {
      clip-path: shape(from 0 100%,
        line to 0 0,
        line to calc(100% - 1cqw - 0.25cqw) 0,
        curve to calc(100% - 1cqw + calc(0.25cqw * 0.7071)) calc(0.25cqw * 0.7071) with calc(100% - 1cqw) 0,
        line to calc(100% - calc(0.25cqw * 0.7071)) calc(1cqw - calc(0.25cqw * 0.7071)),
        curve to 100% calc(1cqw + 0.25cqw) with 100% 1cqw,
        line to 100% 100%,
        close);
    }
  }

  .models__side.is-selected .models__picture {
    translate: 0 -3px;
    filter:
      drop-shadow(0 0 0.5px rgb(255 255 255 / 0.12))
      drop-shadow(0 14px 14px rgb(0 0 0 / 0.75))
      drop-shadow(0 0 18px rgb(236 242 247 / 0.08));
  }

  .models__side .models__copy {
    max-width: 34rem;
    padding-inline: clamp(0rem, 1vw, 1rem);
  }
}

/* Over the toggle: what the choice does, before it is made. */
.models__note {
  margin: 0 0 var(--space-5);
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.1875rem);
  line-height: 1.4;
  color: var(--c-ink-2);
  text-align: center;
}

/* Under the toggle: an invitation to read on, naming the model on show,
   with a small chevron drifting down. */
.models__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--c-ink-3);
  text-align: center;
}

/* where it has to wrap, two even lines, and the model's name kept whole */
.models__more > span {
  text-wrap: balance;
}

.models__more [data-model-name] {
  white-space: nowrap;
}

.models__cue {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  rotate: 45deg;
  opacity: 0.8;
}

@media (prefers-reduced-motion: no-preference) {
  .models__cue {
    animation: models-cue 2.4s ease-in-out infinite;
  }
}

@keyframes models-cue {
  0%, 100% { translate: 0 -2px; opacity: 0.35; }
  50%      { translate: 0 4px;  opacity: 0.9; }
}

/* ---- The model named in a section's label ----
   "An inside look · SOLUM Studio": quieter than the label, so it reads as
   the answer to which rather than as part of the heading. */
.eyebrow__model {
  color: var(--c-ink-3);
  text-shadow: none;
}

.eyebrow__model::before {
  content: "·";
  margin-inline: 0.9em 0.4em;
}

/* Phones: the label's wide tracking leaves no room for the model beside
   it, so the model takes the line beneath, a little closer set. */
@media (max-width: 47.99rem) {
  .eyebrow:has(.eyebrow__model) {
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }

  .eyebrow__model {
    flex-basis: 100%;
    letter-spacing: var(--track-mono);
  }

  .eyebrow__model::before {
    content: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .models__toggle::before {
    transition: none;
  }
}