/*
 * Color Roll — visitor-facing accent randomizer.
 *
 * Floating button bottom-right on desktop, compact on mobile. The button
 * deliberately uses a neutral dark glassy chrome (not the brand accent)
 * so it remains legible AS the accent rotates. The current accent is
 * shown only inside the swatch.
 */

.aed-color-roll {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 70;

  display: inline-flex;
  align-items: center;
  gap: 0.6rem;

  padding: 0.55rem 0.95rem 0.55rem 0.55rem;
  margin: 0;

  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;

  color: #ffffff;
  background: rgba(20, 22, 24, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;

  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    0 12px 32px -10px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.25);

  transition:
    transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2),
    box-shadow 0.25s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.aed-color-roll:hover {
  transform: translateY(-2px);
  background: rgba(28, 30, 33, 0.96);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 18px 38px -10px rgba(0, 0, 0, 0.65),
    0 4px 10px rgba(0, 0, 0, 0.3);
}

.aed-color-roll:active { transform: translateY(0); }

.aed-color-roll:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* Swatch — circle filled with the current accent. Acts as the visual
   anchor: visitors see "this is the color we're working with", and the
   button label tells them what clicking does. */
.aed-cr-swatch {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent, #b3d855);
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.25) inset,
    0 2px 4px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  transition: background-color 0.35s ease;
}

.aed-cr-text {
  display: inline-flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.15;
}

.aed-cr-label {
  font-weight: 700;
  font-size: 0.875rem;
}

.aed-cr-hint {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  opacity: 0.72;
  margin-top: 1px;
}

.aed-cr-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  margin-left: 0.05rem;
  transition: transform 0.4s ease, opacity 0.2s ease;
}
.aed-color-roll:hover .aed-cr-icon { opacity: 0.95; }
.aed-color-roll.is-rolling .aed-cr-icon {
  transform: rotate(540deg);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset link — sits above the main pill so it doesn't disrupt the
   primary CTA placement. Hidden until the visitor has rolled at least
   once (no surface area for "reset" before there's anything to reset). */
.aed-color-roll-reset {
  position: fixed;
  right: 1.4rem;
  bottom: calc(1.25rem + 54px);
  z-index: 70;

  padding: 0.3rem 0.7rem;
  margin: 0;

  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.005em;

  color: rgba(255, 255, 255, 0.85);
  background: rgba(20, 22, 24, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;

  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.aed-color-roll-reset:hover {
  color: #ffffff;
  background: rgba(28, 30, 33, 0.95);
  border-color: rgba(255, 255, 255, 0.2);
}
.aed-color-roll-reset:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Mobile: pin to bottom-right but tighten and drop the trailing icon
   so the touch target stays comfortable without dominating the screen. */
@media (max-width: 540px) {
  .aed-color-roll {
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.5rem 0.8rem 0.5rem 0.5rem;
    gap: 0.5rem;
  }
  .aed-cr-swatch { width: 24px; height: 24px; }
  .aed-cr-label  { font-size: 0.8125rem; }
  .aed-cr-hint   { font-size: 0.65rem; }
  .aed-cr-icon   { display: none; }

  .aed-color-roll-reset {
    right: 0.9rem;
    bottom: calc(0.75rem + 48px);
    font-size: 0.68rem;
    padding: 0.28rem 0.6rem;
  }
}

/* Very narrow screens: hide the hint to keep the pill compact. */
@media (max-width: 380px) {
  .aed-cr-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aed-color-roll,
  .aed-color-roll:hover,
  .aed-color-roll:active,
  .aed-cr-swatch,
  .aed-cr-icon,
  .aed-color-roll.is-rolling .aed-cr-icon {
    transition: none;
    transform: none;
  }
}

@media print {
  .aed-color-roll,
  .aed-color-roll-reset { display: none !important; }
}