/* The home. Measures from the Figma file, node 169-424, read at 1440×934. */

/* The copy stands in the middle of what the band leaves it, and the letter's own margin
   is the least it will take: on a tall window the text centres, on a short one the margin
   holds its ground and the page gives way instead. */
.canvas {
  position: relative;
  z-index: 2;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--page-pad-y) var(--mat);
}

/* The block stands where the letter stands it: 40 inside the mat, at the top left. It
   sits a level over the canvas, which covers the same corner and would otherwise take
   the pointer meant for it. */
.mark--corner {
  position: absolute;
  top: calc(var(--mat) + 40px);
  left: calc(var(--mat) + 40px);
  z-index: 3;
}

.mark--corner:hover .mark__block { fill: var(--ember); }

/* On a phone the text sits at the top and whatever is left over falls below it, so the
   band is pushed down the screen instead of following the copy. It starts under the
   block, at the 32 that clears the mat plus the block and the air the letter leaves
   beneath it — the mat is drawn over the page, not around it, so the first 16 of any
   edge is under white and anything less than 32 runs beneath the frame. */
@media (max-width: 899px) {
  .canvas {
    align-items: flex-start;
    padding: calc(var(--mat) * 2 + 32px + 40px) var(--mat) 0;
  }

  .mark--corner {
    top: calc(var(--mat) * 2);
    left: calc(var(--mat) * 2);
  }
}

.column { width: min(var(--measure), 100%); }

/* The statement is the one thing on the page set in Portrait, and it is set large.
   The measures follow the live site's, scaled down: 48 over a 768 column, 32 on a phone. */
.statement {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--statement);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.lede { margin: 0; }
.statement + .lede { margin-top: var(--lede-gap); }

/* The copy arrives rather than appears: it rises as it fades, and the lede comes a beat
   after the statement so the page settles in order instead of all at once. The curve is
   the cards', which is the only easing the site uses for something coming in. */
@keyframes copy-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.statement { animation: copy-in 560ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.lede { animation: copy-in 560ms cubic-bezier(0.2, 0.7, 0.3, 1) 90ms both; }

/* The three marked terms are buttons, so the browser's own styling comes off first. */
.term {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.08em;
  transition: text-decoration-style 120ms ease;
}

.term:hover { text-decoration-style: solid; }

.term:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

/* 32 against the statement's 56, as the live site sets it. */
.marker {
  font-size: 0.57em;
  line-height: 0;
  vertical-align: 0.5em;
}

/* On a phone the first screen ends on the wordmark and the line under it, and the rest
   of the menu waits below the fold. The canvas is what sets where the fold falls: it
   takes the screen less the band, the gap over it, one row and the 32 that keeps that
   row clear of the mat. The rule that opens the next row then falls under the mat
   itself, so the page breaks between two rows and never across one. */
@media (max-width: 899px) {
  .canvas {
    min-height: calc(100dvh - var(--block) - var(--band-gap) - var(--small-leading) - var(--mat) * 2);
  }
}

/* Cards. Each term opens one over a blurred page; any click closes it. */

.cards {
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--mat);
  right: var(--mat);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cards[hidden] { display: none; }

/* Leaving: the whole tray fades and the card settles back the 8 it rose on the way in.
   Slower than it came, because a card going is easy to miss — the scrim is near white
   over a near white page, so the card is the only thing the eye has to follow. The
   curve holds the card up and then drops it: on an even ease it is already down to a
   tenth a third of the way through, which reads as no animation at all.
   Nothing takes a click while it goes. */
.cards.is-leaving {
  pointer-events: none;
  animation: tray-out 280ms cubic-bezier(0.4, 0, 1, 1) both;
}

.cards.is-leaving .card { animation: card-out 280ms cubic-bezier(0.4, 0, 1, 1) both; }

.scrim {
  position: absolute;
  inset: 0;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  animation: scrim-in 240ms ease both;
}

.card {
  position: relative;
  z-index: 2;
  width: min(var(--card), 100vw - var(--card-margin));
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: card-in 320ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.card[hidden] { display: none; }
.card:focus { outline: none; }

.card--lemon { background: var(--lemon); }
.card--cielo { background: var(--cielo); }
.card--sage { background: var(--sage); }

.card__label {
  margin: 0;
  font-size: var(--small);
  line-height: var(--small-leading);
  font-weight: 700;
  color: var(--ardesia-dark);
}

.card__text {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--card-text);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--grafite);
}

@media (max-width: 899px) {
  .card { padding: var(--card-pad-sm); }
}

/* The eight faces around the Firm card. Each one has its own spot, read from the live
   site at 1440×900 and 1920×1080.

   The three that sit closest to the card are measured from the centre instead of from
   a percentage of the window: the card is centred and 600 wide, so only an offset from
   the centre clears it by the same amount whatever the window does. The others are far
   enough out that the window's own edge is all they ever meet. */

.faces {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.faces[hidden] { display: none; }

.face {
  position: absolute;
  width: var(--headshot);
  height: var(--headshot);
  animation: face-in 420ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.face:nth-child(1) { left: calc(37.5% - 460px); top: calc(10% + 77px); animation-delay: 60ms; }
.face:nth-child(2) { left: calc(50% - 65px); top: calc(50% - 320px); animation-delay: 100ms; }
.face:nth-child(3) { left: calc(62.5% + 329px); top: calc(10% + 77px); animation-delay: 140ms; }
.face:nth-child(4) { left: calc(62.5% + 210px); top: calc(36.667% - 8px); animation-delay: 180ms; }
.face:nth-child(5) { left: calc(37.5% - 404px); top: calc(63.333% - 94px); animation-delay: 220ms; }
.face:nth-child(6) { left: calc(62.5% + 329px); top: calc(90% - 180px); animation-delay: 260ms; }
.face:nth-child(7) { left: calc(50% + 320px); top: calc(50% + 122px); animation-delay: 300ms; }
.face:nth-child(8) { left: calc(50% - 300px); top: calc(50% + 190px); animation-delay: 340ms; }

@media (max-width: 899px) {
  .faces { display: none; }
}

/* While a card is open an ember disc follows the pointer: the click closes wherever
   it lands, and the disc is what says so. 24 to the right, clear of the arrow. */

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
  width: var(--cursor-size);
  height: var(--cursor-size);
  border-radius: 50%;
  background: var(--ember);
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: translate3d(-120px, -120px, 0);
}

.cursor[hidden] { display: none; }

.cursor svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: var(--white);
}

body.has-card { overflow: hidden; }

@keyframes scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes tray-out {
  to { opacity: 0; }
}

@keyframes card-out {
  to { transform: translateY(8px); }
}

@keyframes face-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scrim, .card, .face, .cards.is-leaving, .statement, .lede { animation: none; }
  .term { transition-duration: 1ms; }
}