/* Stand-in for the legal pages while the real copy is being approved.
   Reused chrome (base.css) — this file only styles the centred "we're
   still drafting this" stage and its pokeable polaroid. */

.under-construction {
  min-height: calc(100svh - 64px - 120px);
  display: grid;
  place-items: center;
  padding-block: clamp(48px, 8vw, 96px);
}

.uc {
  text-align: center;
  max-width: 540px;
  display: grid;
  gap: var(--s24);
  justify-items: center;
}

.uc__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  font-size: 13px;
  color: var(--fg-muted);
  box-shadow: var(--shadow-soft);
}
.uc__chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--sh-rose), var(--sh-lavender), var(--sh-periwinkle),
    var(--sh-sky), var(--sh-mint), var(--sh-rose)
  );
  animation: shimmer-rotate 12s linear infinite;
  box-shadow: 0 0 8px rgba(179, 136, 214, 0.6);
}

.uc__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.uc__title em {
  font-style: italic;
  background: linear-gradient(95deg,
    var(--sh-rose), var(--sh-lavender), var(--sh-periwinkle),
    var(--sh-sky), var(--sh-mint), var(--sh-rose));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer-text 18s linear infinite;
}

.uc__lede {
  font-size: 17px;
  color: var(--fg-muted);
  line-height: 1.6;
  max-width: 46ch;
}

/* The pokeable polaroid — a button so it's keyboard-reachable. */
.uc__polaroid {
  position: relative;
  width: 220px;
  margin-top: var(--s16);
  padding: 14px 14px 32px;
  background: var(--polaroid);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  box-shadow:
    0 22px 38px rgba(63, 47, 85, 0.16),
    0 8px 18px rgba(63, 47, 85, 0.08);
  transform: rotate(-3.5deg);
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 280ms ease;
  cursor: pointer;
  animation: uc-float 5.5s ease-in-out infinite;
}
.uc__polaroid:hover {
  transform: rotate(-1deg) translateY(-6px) scale(1.04);
  box-shadow:
    0 32px 48px rgba(63, 47, 85, 0.22),
    0 12px 22px rgba(63, 47, 85, 0.12);
}
.uc__polaroid:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 6px;
}
html.dark .uc__polaroid {
  box-shadow:
    0 24px 40px rgba(0, 0, 0, 0.6),
    0 6px 14px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.3);
}
@keyframes uc-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

/* Diagonal stripes that drift seamlessly.
   Approach: paint *vertical* stripes (clean 20px period along x) on a
   pseudo-element, then rotate the whole pseudo-element 45° so the stripes
   appear diagonal on screen. The animation moves background-position by
   100px (exactly 5 stripe periods) along the local x-axis, all integer
   pixels — so the loop boundary is mathematically and visually identical
   to the start, with no rounding artefacts. */
.uc__polaroid-photo {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: var(--polaroid);
  position: relative;
  overflow: hidden;
}
.uc__polaroid-photo::before {
  content: '';
  position: absolute;
  /* Oversize so the rotated pattern fully covers the photo window. */
  inset: -50%;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in oklab, var(--sh-lavender) 60%, var(--polaroid)) 0,
    color-mix(in oklab, var(--sh-lavender) 60%, var(--polaroid)) 10px,
    color-mix(in oklab, var(--sh-rose) 55%, var(--polaroid)) 10px,
    color-mix(in oklab, var(--sh-rose) 55%, var(--polaroid)) 20px
  );
  transform: rotate(45deg);
  animation: uc-photo-shift 7s linear infinite;
}
@keyframes uc-photo-shift {
  from { background-position: 0 0; }
  to   { background-position: 100px 0; }
}

.uc__polaroid-caption {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--fg-muted);
  text-align: center;
}

.uc__polaroid-stamp {
  position: absolute;
  top: 22px;
  right: -14px;
  background: color-mix(in oklab, var(--sh-rose) 78%, transparent);
  color: var(--fg-inverse);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  padding: 6px 12px;
  border-radius: 6px;
  transform: rotate(8deg);
  box-shadow: 0 6px 14px rgba(63, 47, 85, 0.2);
}
html.dark .uc__polaroid-stamp {
  color: var(--lilac-900);
  background: color-mix(in oklab, var(--sh-rose) 85%, transparent);
}

.uc__sparkles {
  position: absolute;
  inset: -60px;
  pointer-events: none;
}
.uc__sparkles span {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  color: var(--sh-periwinkle);
  font-size: 18px;
  text-shadow:
    0 0 10px var(--sh-lavender),
    0 0 18px color-mix(in oklab, var(--sh-rose) 60%, transparent);
}
html.dark .uc__sparkles span {
  color: var(--sh-lavender);
  text-shadow:
    0 0 12px var(--sh-lavender),
    0 0 22px color-mix(in oklab, var(--sh-rose) 70%, transparent);
}

.uc__polaroid--poked { animation: uc-wobble 720ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.uc__polaroid--poked .uc__sparkles span { animation: uc-spark 850ms ease-out forwards; }

@keyframes uc-wobble {
  0%   { transform: rotate(-3.5deg) translateY(0)    scale(1);    }
  20%  { transform: rotate(5deg)    translateY(-14px) scale(1.08); }
  45%  { transform: rotate(-6deg)   translateY(-4px)  scale(1.03); }
  70%  { transform: rotate(2deg)    translateY(-2px)  scale(1.02); }
  100% { transform: rotate(-3.5deg) translateY(0)    scale(1);    }
}
@keyframes uc-spark {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
  25%  { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--tx)), calc(-50% + var(--ty)))
      scale(0.6) rotate(220deg);
  }
}

.uc__hint {
  font-size: 13px;
  color: var(--fg-muted);
  margin-top: -4px;
}

.uc__back {
  margin-top: var(--s24);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s24);
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--fg-muted);
}
.uc__back a:hover { color: var(--fg-default); }

@media (prefers-reduced-motion: reduce) {
  .uc__polaroid,
  .uc__polaroid-photo,
  .uc__chip-dot,
  .uc__title em {
    animation: none !important;
  }
}