/* Adriano Jewelry: the booking page's own dress.
   Loaded only by /book-appointment/, after site.css, which owns the tokens
   and the book__ form itself; this sheet adds what v0.4.6 asked for, the
   confirmation pop-up and a little motion, without touching the shared
   sheet (which carries the form's base styles for the whole site's sake).
   The no-hue rule binds here as everywhere: white, black, greys, nothing
   else. Every rule below holds from 320px to wide desktop.

   MOTION POLICY, same as the landing page's: decoration moves only for
   readers who have not asked it to stop. Everything animated in this file
   sits inside the prefers-reduced-motion: no-preference fence, so a reduced
   reader gets the finished layout in one paint, and the pop-up under
   reduced motion is a plain appearance with no travel. */

/* ------------------------------------------------------ page entrance */

@media (prefers-reduced-motion: no-preference) {
  @keyframes book-rise {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* The head, the lead, the form and the phone line walk in one after
     another. Animating the article's CHILDREN rather than the article is
     what keeps position: fixed honest for the dialog, which lives outside
     the article for exactly that reason (an animated ancestor's transform
     becomes the containing block of any fixed descendant). */
  .book > * {
    animation: book-rise 0.6s cubic-bezier(0.22, 0.7, 0.25, 1) both;
  }

  .book > :nth-child(2) {
    animation-delay: 0.08s;
  }

  .book > :nth-child(3) {
    animation-delay: 0.16s;
  }

  .book > :nth-child(n + 4) {
    animation-delay: 0.24s;
  }
}

/* ------------------------------------------------------------- fields */

.book__hint {
  margin-top: 0.1rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--pewter-deep);
}

/* The hint carrying real news rather than a footnote (every slot on the
   chosen day already gone by) steps up the same ramp .book__status.is-error
   uses, and no further: this palette has no red to reach for, and the whole
   site's argument is that a lit step IS the emphasis. */
.book__hint.is-error {
  color: var(--page-fg);
}

/* A time already gone by today reads as struck, not merely dim, so the
   reason it refuses the click is visible in the list itself. */
.book__input option:disabled {
  color: var(--pewter-deep);
  text-decoration: line-through;
}

/* The submit's quiet heartbeat while a request is on the wire. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes book-busy {
    0%,
    100% {
      opacity: 0.55;
    }
    50% {
      opacity: 0.8;
    }
  }

  .book__submit.is-busy[disabled] {
    animation: book-busy 1.2s ease-in-out infinite;
  }
}

/* ------------------------------------------------------------ pop-up */

/* THE POP-UP MUST ACTUALLY LEAVE, and this is the FOURTH time this repo has
   paid for the same sentence, after .studio-view, the landing page's scroll
   cue and the Studio's own gate. .book-pop is fixed at inset 0 with a z-index
   of 80, and booking.js hides it by setting the hidden PROPERTY; an author's
   display: flex at specificity (0,1,0) beats the UA's [hidden] { display:
   none } at exactly the same specificity, so the author won and the pop-up
   covered the WHOLE VIEWPORT from the first paint of every visit. Its veil
   sits at opacity 0, and an invisible element is still hit-tested, so nothing
   on this page could be pressed at all. Measured at 1265x720 before the fix:
   hidden true, computed display flex, rect 1265x720, and elementFromPoint
   returned bk-pop-card over the name field and bk-pop-copy over the middle of
   the screen. Every field, both dropdowns, the submit and the phone links
   were behind a dialog nobody could see. A DISPLAY RULE ON A [hidden] ELEMENT
   BEATS THE UA's display: none. */
.book-pop[hidden] {
  display: none !important;
}

.book-pop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2rem);
  padding-bottom: calc(clamp(1rem, 4vw, 2rem) + env(safe-area-inset-bottom));
}

.book-pop__veil {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 6, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.book-pop__card {
  position: relative;
  width: 100%;
  max-width: 26rem;
  max-height: calc(100svh - 2rem);
  overflow-y: auto;
  padding: clamp(1.75rem, 6vw, 2.5rem) clamp(1.25rem, 5vw, 2rem);
  border: 1px solid var(--footer-rule);
  border-radius: 6px;
  /* Solid rather than the translucent --paper-raised: a dialog floats over
     whatever the page was, and copy must not fight the form through it. */
  background: #0a0a0b;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  text-align: center;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity 0.4s cubic-bezier(0.22, 0.7, 0.25, 1),
    transform 0.4s cubic-bezier(0.22, 0.7, 0.25, 1);
}

.book-pop.is-on .book-pop__veil {
  opacity: 1;
}

.book-pop.is-on .book-pop__card {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .book-pop__veil,
  .book-pop__card {
    transition: none;
  }

  .book-pop__card {
    transform: none;
  }
}

/* The stone over the headline, drawn rather than dropped in: each facet
   line runs its own length as the card arrives. The dash length only needs
   to exceed the longest path; the offset is what animates. */
.book-pop__mark {
  display: block;
  width: 64px;
  height: 44px;
  margin: 0 auto 1.1rem;
}

.book-pop__facet {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.book-pop__facet--inner {
  stroke: var(--pewter-deep);
  stroke-width: 1;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes book-facet {
    from {
      stroke-dashoffset: 220;
    }
    to {
      stroke-dashoffset: 0;
    }
  }

  .book-pop.is-on .book-pop__facet {
    stroke-dasharray: 220;
    animation: book-facet 1.1s cubic-bezier(0.3, 0, 0.2, 1) 0.15s both;
  }

  .book-pop.is-on .book-pop__facet--inner {
    animation-delay: 0.4s;
    animation-duration: 0.9s;
  }
}

.book-pop__title {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--page-fg);
}

.book-pop__copy {
  margin: 0 auto 0.75rem;
  max-width: 22rem;
  color: var(--page-fg);
  font-size: 0.95rem;
  line-height: 1.7;
}

.book-pop__note {
  margin: 0 auto 1.4rem;
  max-width: 22rem;
  color: var(--page-muted);
  font-size: 0.82rem;
  line-height: 1.65;
}

.book-pop__ok {
  min-width: 9rem;
}