/*
 * Ember & Vine in the Cioffi Concepts portfolio: the work-in-progress indicator
 * (npm run ember-vine adds it to every page). A pill at the bottom left, in the
 * site's own espresso, ivory and serif, that opens a note on what the demo is
 * and the way back to the portfolio. It sits under the site's toasts and
 * dialogs, and over its phone action bar.
 */
.cc-wip {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 60;
  font-family: var(--sans, "DM Sans", "Segoe UI", sans-serif);
}

.cc-wip > summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 16px 0 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--espresso, #302b25) 92%, transparent);
  color: var(--ivory, #fffdf7);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  user-select: none;
  box-shadow:
    0 12px 30px -14px rgb(48 43 37 / 0.6),
    inset 0 0 0 1px rgb(255 253 247 / 0.09);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 200ms ease, transform 200ms ease;
}

.cc-wip > summary::-webkit-details-marker {
  display: none;
}

.cc-wip > summary:hover {
  background: var(--espresso, #302b25);
}

.cc-wip > summary:active {
  transform: scale(0.97);
}

.cc-wip > summary:focus-visible {
  outline: 2px solid var(--clay, #a56b4e);
  outline-offset: 3px;
}

/* An ember, breathing. */
.cc-wip-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e38b52;
  box-shadow: 0 0 0 0 rgb(227 139 82 / 0.55);
  animation: cc-wip-ember 2.6s ease-out infinite;
}

@keyframes cc-wip-ember {
  0% {
    box-shadow: 0 0 0 0 rgb(227 139 82 / 0.55);
  }

  70%,
  100% {
    box-shadow: 0 0 0 7px rgb(227 139 82 / 0);
  }
}

.cc-wip-note {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: min(330px, calc(100vw - 40px));
  padding: 20px 22px 18px;
  border: 1px solid var(--border, #d9d3c7);
  border-radius: 10px;
  background: var(--ivory, #fffdf7);
  color: var(--ink, #35342b);
  font-size: 13px;
  line-height: 1.6;
  box-shadow: 0 28px 70px -30px rgb(48 43 37 / 0.5);
  animation: cc-wip-open 220ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.cc-wip-note strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--espresso, #302b25);
}

.cc-wip-note p {
  margin: 0 0 14px;
  color: var(--muted, #756f64);
}

.cc-wip-note a {
  color: var(--olive, #48543c);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes cc-wip-open {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Phones: over the site's quick-action bar. */
@media (max-width: 540px) {
  .cc-wip {
    left: 12px;
    bottom: calc(74px + env(safe-area-inset-bottom));
  }

  .cc-wip > summary {
    height: 30px;
    padding: 0 13px 0 11px;
    gap: 8px;
    font-size: 8.5px;
    letter-spacing: 1.4px;
  }

  .cc-wip-note {
    width: calc(100vw - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-wip-dot,
  .cc-wip-note {
    animation: none;
  }
}

/* The site's own "Reduce motion" choice. */
html[data-motion="reduced"] .cc-wip-dot,
html[data-motion="reduced"] .cc-wip-note {
  animation: none;
}

@media print {
  .cc-wip {
    display: none;
  }
}