/* =========================================================================
   Register interest

   A section at the foot of the page rather than a dialog: the hero's call
   to action anchors down to it. Centred, as My SOLUM above it is: the
   headline in the site's headline voice and a word on what it is for,
   then the form, held in a panel of the page's liquid glass. The fields
   keep the site's quiet voice — a label, a line, and nothing drawn
   around them until they are in use. The build is not asked for again:
   a line names it, with a way back up to change it.
   ========================================================================= */

.register {
  position: relative;
  /* After My SOLUM, before the questions. */
  padding: var(--section-pad) var(--gutter-safe);
  background: var(--c-black);
  /* the anchor lands with air above it, not flush to the top of the screen */
  scroll-margin-top: var(--space-6);
}

/* The dividing hairline, at the top of the band. */
.register::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter-safe);
  right: var(--gutter-safe);
  height: 1px;
  background: var(--c-hairline);
  pointer-events: none;
}

/* ---- The headline ---- */
.register__intro {
  max-width: 46rem;
  margin: 0 auto var(--block-gap);
  text-align: center;
}

.register__intro .eyebrow {
  justify-content: center;
  margin: 0 0 var(--space-6);
}

/* "Be first in line to pre-order." in the site's headline voice */
.register__headline {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-headline);
  line-height: 1.04;
  letter-spacing: -0.01em;
  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);
}

.register__headline em {
  font-style: italic;
  white-space: nowrap;   /* never "pre- / order" */
}

.register__note {
  max-width: 34rem;
  margin: var(--space-5) auto 0;
  font-size: var(--fs-headline-line);
  line-height: 1.55;
  color: var(--c-ink-3);
  text-wrap: balance;
}

/* ---- The panel of glass ---- */
/* the colours of the build in its glass (below), crossing from one to the
   next as the build changes */
@property --form-cladding { syntax: "<color>"; inherits: true; initial-value: rgb(150 156 162); }
@property --form-palette { syntax: "<color>"; inherits: true; initial-value: rgb(150 156 162); }
@property --form-joinery { syntax: "<color>"; inherits: true; initial-value: rgb(150 156 162); }

.register__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;   /* the light inside stays inside */
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(var(--space-6), 4vw, 3.5rem);
  border: 1px solid transparent;
  border-radius: 6px;   /* as the questions' glass below */
  /* the cards' frosted glass (tokens.css): its grain and sheen over the
     panel's own dark glass; and along the cut corner (below) a line of
     light, as the rim would draw there were it not cut away */
  background:
    linear-gradient(135deg,
      transparent calc(50% - 0.75px),
      rgb(255 255 255 / 0.13) 50%,
      transparent calc(50% + 0.75px))
      100% 100% / var(--form-cut) var(--form-cut) no-repeat,
    var(--frost-sheen),
    var(--frost-grain),
    linear-gradient(180deg, rgb(20 22 24 / 0.45), rgb(8 9 10 / 0.55));
  -webkit-backdrop-filter: var(--frost-filter);
  backdrop-filter: var(--frost-filter);
  box-shadow:
    var(--frost-rim),
    inset 0 0 0 1px rgb(255 255 255 / 0.05),
    inset 0 0 18px rgb(255 255 255 / 0.03),
    0 40px 90px -40px rgb(0 0 0 / 0.95);
  /* its bottom-right corner cut, as the questions' top-left is, the ends
     of the cut softened */
  --form-cut: 1.5rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--form-cut)), calc(100% - var(--form-cut)) 100%, 0 100%);
  transition:
    --form-cladding 1.2s var(--ease-out),
    --form-palette 1.2s var(--ease-out),
    --form-joinery 1.2s var(--ease-out);
}

@supports (clip-path: shape(from 0 0, line to 1px 1px)) {
  .register__panel {
    --form-r: 0.25rem;
    --form-k: calc(var(--form-r) * 0.7071);
    clip-path: shape(from 0 0,
      line to 100% 0,
      line to 100% calc(100% - var(--form-cut) - var(--form-r)),
      curve to calc(100% - var(--form-k)) calc(100% - var(--form-cut) + var(--form-k)) with 100% calc(100% - var(--form-cut)),
      line to calc(100% - var(--form-cut) + var(--form-k)) calc(100% - var(--form-k)),
      curve to calc(100% - var(--form-cut) - var(--form-r)) 100% with calc(100% - var(--form-cut)) 100%,
      line to 0 100%,
      close);
  }
}

/* The light within the glass is the build's own: the cladding's colour
   from the top right, the palette's from the bottom left, the joinery's
   low along the foot, each a soft wash (--form-*, my-solum.js, from the
   choices however they were made: on the cards, in My SOLUM, from the
   tray). Until something is chosen, plain light. */
.register__panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 92% 0%, color-mix(in oklab, var(--form-cladding) 28%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 55% at 12% 100%, color-mix(in oklab, var(--form-palette) 30%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 35% at 62% 100%, color-mix(in oklab, var(--form-joinery) 20%, transparent), transparent 70%);
  pointer-events: none;
}

/* ---- Form ---- */
/* Two fields to a row, and the build, the message, the button and the
   small print across both. One column while there is not room for two. */
.register__form {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 40rem) {
  .register__form {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(var(--space-5), 4vw, var(--space-7));
  }

  .field--wide,
  .register__build,
  .register__submit,
  .register__status {
    grid-column: 1 / -1;
  }
}

/* The small print, under the panel: the terms, then the privacy line. */
.register__legal {
  display: grid;
  gap: var(--space-3);
  max-width: 44rem;
  margin: var(--space-6) auto 0;
}

/* The build, named in a line: what was chosen, each finish with its
   colour, and the way back up to change it. Filled by
   src/js/ui/my-solum.js. */
.register__build {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--c-hairline);
  border-bottom: 1px solid var(--c-hairline);
}

.register__build-label {
  grid-column: 1 / -1;
  margin: 0;
}

.register__build-value {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  font-size: var(--fs-input, 1rem);
  color: var(--c-ink);
}

.register__build-value.is-empty {
  color: var(--c-ink-4);
}

.register__build-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.register__build-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 10px -2px var(--dot);
}

.register__build-link {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--c-gold);
  text-decoration: none;
  border-bottom: 1px solid rgb(214 179 106 / 0.4);
  padding-bottom: 2px;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

@media (hover: hover) {
  .register__build-link:hover {
    color: var(--c-ink);
    border-bottom-color: var(--c-ink);
  }
}

/* The collection notice under the button: small print, its link quiet
   until it is wanted. */
.register__notice {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  text-align: center;
  color: var(--c-ink-4);
}

/* The terms come first and the privacy line closes them, as one block of
   small print: a measure short enough to read centred, and the privacy
   line a step closer to the terms than the terms are to the button. */
.register__terms {
  max-width: 40rem;
  margin-inline: auto;
  text-wrap: balance;
}


.register__notice a {
  color: var(--c-ink-3);
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.25);
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}

@media (hover: hover) {
  .register__notice a:hover {
    color: var(--c-ink);
    text-decoration-color: currentColor;
  }
}

/* Furnishings and appliances: the page's swatches, as toggles, with a line
   of small print under them saying what choosing one means. */
.register__interests {
  margin: 0;
  padding: 0;
  border: 0;
}

.register__interests legend {
  padding: 0;
  margin-bottom: var(--space-2);
}

.register__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Set a little closer than the page's chips, at every width. At their full
   tracking the seven left "All" alone on a line of its own (six and one
   from a tablet to a small laptop); this close they share one line from a
   tablet up. It was the desktop's setting alone. */
.register__chip {
  letter-spacing: 0.16em;
  padding-inline: 0.55rem calc(0.55rem - 0.16em);
}

/* A phone has room for three at most (four need 317px of a 269px line at
   375), and seven never divide evenly: the rooms go in equal columns,
   three or two as the width allows, and All, which takes them all, has
   the last line to itself, the width of the rest. */
@media (max-width: 47.99rem) {
  .register__chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  }

  .register__chip {
    text-align: center;
  }

  .register__chip[data-interest="all"] {
    grid-column: 1 / -1;
  }
}

.register__fine {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-ink-4);
  text-wrap: pretty;
}

.field {
  position: relative;      /* the arrival sheen is drawn against this */
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.field__label {
  color: var(--c-ink-3);
}

.field__optional {
  letter-spacing: 0.1em;
  text-transform: none;
}

.field__input {
  width: 100%;
  height: 2.75rem;
  padding: 0 2px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-input);
  color: var(--c-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--field-colour, var(--c-hairline));
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.4s;
}

/* =========================================================================
   A field that holds a finish takes that finish's colour

   The line under Cladding and Palette answers in whatever has been chosen,
   so the form agrees with the swatches further up the page. No script is
   needed: the option a select is showing matches :checked, and :has lets
   the field read it.

   --field-colour is only set for the values that are colours. Everything
   else falls through to the defaults, so Model, Setting and State keep the
   page's gold.
   ========================================================================= */

.field:has(option[value="burgundy"]:checked) { --field-colour: var(--c-burgundy); }
.field:has(option[value="sage"]:checked)     { --field-colour: var(--c-sage); }
.field:has(option[value="tide"]:checked)     { --field-colour: var(--c-tide); }
.field:has(option[value="vine"]:checked)     { --field-colour: var(--c-vine); }
.field:has(option[value="oak"]:checked)      { --field-colour: var(--c-oak); }
.field:has(option[value="walnut"]:checked)   { --field-colour: var(--c-walnut); }
.field:has(option[value="obsidian"]:checked) { --field-colour: var(--c-obsidian); }
.field:has(option[value="ivory"]:checked)    { --field-colour: var(--c-ivory); }
.field:has(option[value="forge"]:checked)    { --field-colour: var(--c-forge); }
.field:has(option[value="char"]:checked)     { --field-colour: var(--c-char); }
.field:has(option[value="amber"]:checked)    { --field-colour: var(--c-amber); }

.field__input:hover {
  border-bottom-color: var(--field-colour, rgb(220 240 255 / 0.3));
}

/* Gold on the line being filled, as on the swatch in use — or the colour
   itself, where one has been chosen. */
.field__input:focus {
  border-bottom-color: var(--field-colour, var(--c-gold));
}

.field__input[aria-invalid="true"] {
  border-bottom-color: var(--c-error);
}

.field__input--select {
  padding-right: 1.25rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-ink-2) 50%),
    linear-gradient(135deg, var(--c-ink-2) 50%, transparent 50%);
  background-position: calc(100% - 8px) 50%, calc(100% - 3px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.field__input--select option {
  color: var(--c-ink);
  background: #0b0f13;
}

/* The message: the same underline, given room to write in. */
.field__input--area {
  height: auto;
  min-height: 6.5rem;
  padding: var(--space-3) 2px;
  line-height: 1.6;
  resize: vertical;
}

.field__error {
  font-size: var(--fs-small);
  color: var(--c-error);
}

/* Model, cladding and palette read as one question, so they sit together
   on a row of their own rather than pairing off with unrelated fields. */
/* The build's four choices (.field-group) are kept in the form, in step
   with My SOLUM and sent with it, but hidden: the line naming the build
   (.register__build) stands for them. */

/* =========================================================================
   Arriving from an enquiry button

   The field that was filled in on someone's behalf greets them with the
   same gesture the buttons use — a sheen crossing it and a short lift —
   so it is read as the thing that was just chosen rather than as a default
   that was always sitting there.

   src/js/ui/variants.js holds this back until the field is actually on
   screen; played on the press it would happen while the page is still
   scrolling, and nobody would see it.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .field.is-prefilled {
    --field-glow: color-mix(in oklab,
      var(--field-colour, rgb(180 210 255)) 55%, transparent);

    overflow: hidden;      /* keeps the sheen inside the field */
    animation: field-lift 1.9s var(--ease-out);
  }

  .field.is-prefilled::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45%;
    width: 38%;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.16), transparent);
    pointer-events: none;
    animation: field-sheen 1.05s cubic-bezier(0.2, 0.7, 0.3, 1) 0.15s both;
  }

  .field.is-prefilled .field__input {
    animation: field-filled 1.9s var(--ease-out);
  }
}

/* Where motion is not wanted, the line simply holds the gold for a moment. */
@media (prefers-reduced-motion: reduce) {
  .field.is-prefilled .field__input {
    border-bottom-color: var(--c-gold);
  }
}

@keyframes field-sheen {
  from { left: -45%; }
  to   { left: 115%; }
}

@keyframes field-lift {
  0%   { transform: translateY(0);    box-shadow: 0 0 0 0 rgb(180 210 255 / 0); }
  18%  { transform: translateY(-2px); box-shadow: 0 12px 26px -16px var(--c-black),
                                                  0 0 26px -12px var(--field-glow); }
  68%  { transform: translateY(-2px); box-shadow: 0 12px 26px -16px var(--c-black),
                                                  0 0 26px -12px var(--field-glow); }
  100% { transform: translateY(0);    box-shadow: 0 0 0 0 rgb(180 210 255 / 0); }
}

@keyframes field-filled {
  0%   { border-bottom-color: var(--field-colour, var(--c-gold)); }
  70%  { border-bottom-color: var(--field-colour, var(--c-gold)); }
  100% { border-bottom-color: var(--field-colour, var(--c-hairline)); }
}

/* the full width of the panel */
.register__submit {
  justify-self: stretch;
  width: 100%;
  margin-top: var(--space-2);
}

.register__status {
  min-height: 1lh;
  font-size: var(--fs-small);
  color: var(--c-error);
}

.register__status:empty {
  display: none;
}

/* ---- Once they are on the register ---- */
.register__done {
  text-align: center;
  outline: none;
}

.register__done p {
  max-width: 26rem;
  margin-inline: auto;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-ink-2);
}

.register__done strong {
  color: var(--c-ink);
  font-weight: 400;
}

.register__done-rule {
  display: block;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  height: 1px;
  margin-bottom: var(--space-5);
  background: var(--c-gold);
  box-shadow: 0 0 12px 1px var(--c-gold-glow);
  transform-origin: 0 50%;
  animation: draw-line 1.6s var(--ease-draw) both;
}

@keyframes draw-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* =========================================================================
   On a wide screen: one screen's worth

   The headline and its word to the left, and under them, level with the
   foot of the form, the small print the button is pressed against; the
   form to the right, set closer, so the whole section is seen at once on
   a laptop. On a phone it stays one column, as above.
   ========================================================================= */
@media (min-width: 75rem) {
  .register {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "intro panel"
      "legal panel";
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }

  .register__intro {
    grid-area: intro;
    max-width: 30rem;
    margin: 0;
    text-align: left;
  }

  .register__intro .eyebrow {
    justify-content: flex-start;
    margin-bottom: var(--space-5);
  }

  .register__headline {
    font-size: clamp(2.5rem, 1rem + 2.6vw, 3.75rem);
  }

  .register__note {
    max-width: 26rem;
    margin: var(--space-5) 0 0;
    font-size: var(--fs-body);
    text-wrap: pretty;
  }

  .register__panel {
    grid-area: panel;
    max-width: none;
    margin: 0;
    padding: clamp(var(--space-5), 2.2vw, 2.25rem);
  }

  .register__form {
    row-gap: var(--space-4);
  }

  .register .field__input {
    height: 2.25rem;
  }

  .register .field__input--area {
    min-height: 3rem;
    height: 3rem;
  }

  .register__build {
    padding-block: var(--space-3);
  }

  .register__fine {
    line-height: 1.45;
  }

  .register__chips {
    flex-wrap: nowrap;
  }

  .register__legal {
    grid-area: legal;
    align-self: end;
    max-width: 30rem;
    margin: 0;
  }

  .register__legal .register__notice {
    text-align: left;
  }

  .register__terms {
    margin-inline: 0;
    text-wrap: pretty;
  }
}