/* The star customizer: thumbnails you can fall in love with.
   Lifted out of my.html so the world's art house and /my wear the same clothes. */

.cust-label {
  font-size: .64rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); margin: 18px 0 4px; text-align: center;
}
.sw-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.sw {
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--glass-border); background: rgba(8,12,26,.55);
  display: flex; align-items: center; justify-content: center; font-size: 1.45rem;
  transition: border-color .25s, box-shadow .25s, transform .2s;
}
.sw:hover { transform: scale(1.08); }
.sw.sel { border-color: var(--gold); box-shadow: 0 0 18px rgba(214,178,133,.65); }
.sw .light { width: 30px; height: 30px; border-radius: 50%; }
.sw .ring { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center; font-size: .85rem; }
/* little wings on the frame thumbnails */
.sw .ring.wings { position: relative; overflow: visible; border-color: var(--wedge); }
.sw .ring.wings::before, .sw .ring.wings::after { filter: drop-shadow(0 0 4px var(--wglow)); }
.mus-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.mus {
  padding: 9px 16px; border-radius: 999px; cursor: pointer; font-size: .78rem;
  border: 1px solid var(--glass-border); background: rgba(8,12,26,.55);
  color: var(--ivory); font-family: var(--serif); font-style: italic;
  transition: border-color .25s, box-shadow .25s;
}
.mus.sel { border-color: var(--gold); box-shadow: 0 0 14px rgba(214,178,133,.55); color: var(--champagne); }

/* whose star is being dressed: only shown to someone with more than one */
.cust-dogs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.cust-dog {
  padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: .8rem;
  border: 1px solid var(--glass-border); background: rgba(8,12,26,.55);
  color: var(--ivory); font-family: var(--serif); font-style: italic;
  transition: border-color .25s, box-shadow .25s, color .25s;
}
.cust-dog.sel { border-color: var(--gold); box-shadow: 0 0 14px rgba(214,178,133,.55); color: var(--champagne); }

/* the popup reads as one centred column: the title, the line beneath it and
   the two buttons all share the same axis as the swatch grids above them */
#custModal .modal { text-align: center; }
#custModal .modal > h2, #custModal .modal > p { text-align: center; }
#custModal .m-actions {
  justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
#custModal .m-actions .btn { flex: 0 1 auto; min-width: 168px; }
#custModal #custLock { text-align: center; }
#custModal #custLock .btn { min-width: 168px; }

/* ---------- what you are actually choosing ----------
   Swatches say what a colour IS; they cannot say what the star will look
   like hanging in a night sky, or how their face sits inside a frame. Both
   stand here and change as the choices are made. */
/* ---------- the preview is the sky ----------
   A small square of night inside a wider panel read as a cropped window with
   dead ground either side. The night now fills the whole panel, with its own
   drift of far stars, and the thing being chosen sits in the middle of it. */
.cust-preview {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin: 14px 0 6px; min-height: 168px; padding: 14px; border-radius: 16px;
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(52,62,116,.55), transparent 70%),
    linear-gradient(168deg, rgba(14,20,44,.96), rgba(5,8,20,.99));
  border: 1px solid rgba(176,132,71,.2);
}
/* the starry night behind everything: two drifting fields, near and far */
.cust-preview::before, .cust-preview::after {
  content: ''; position: absolute; inset: -20%; pointer-events: none;
}
.cust-preview::before {
  opacity: .55;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 31% 68%, #e8eaff, transparent),
    radial-gradient(1.6px 1.6px at 54% 14%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 73% 46%, #ffeccd, transparent),
    radial-gradient(1.4px 1.4px at 88% 76%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 22% 88%, #dfe6ff, transparent),
    radial-gradient(1.3px 1.3px at 64% 84%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 43% 38%, #fff, transparent);
  animation: cpDriftA 26s linear infinite;
}
.cust-preview::after {
  opacity: .3;
  background-image:
    radial-gradient(.9px .9px at 8% 54%, #fff, transparent),
    radial-gradient(.9px .9px at 38% 8%, #fff, transparent),
    radial-gradient(.9px .9px at 61% 62%, #ffeccd, transparent),
    radial-gradient(.9px .9px at 82% 30%, #fff, transparent),
    radial-gradient(.9px .9px at 94% 58%, #dfe6ff, transparent),
    radial-gradient(.9px .9px at 17% 74%, #fff, transparent);
  animation: cpDriftB 41s linear infinite;
}
@keyframes cpDriftA {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-6%, 3%, 0); }
}
@keyframes cpDriftB {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(5%, -4%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cust-preview::before, .cust-preview::after { animation: none; }
}
/* the real star, turning, where the world can lend it */
.cp-canvas { position: relative; z-index: 1; width: 150px; height: 150px; display: block; }
/* a little patch of night for the star to hang in */
.cp-sky {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
}
/* the scattered far-off stars are gone: nothing should compete with the one
   star being chosen */
.cp-star {
  position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: cpBreathe 3.4s ease-in-out infinite;
}
.cp-star.glyph { font-size: 2.2rem; line-height: 1; width: auto; height: auto; }
@keyframes cpBreathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.07); filter: brightness(1.18); }
}
/* their face, in the frame that will surround it */
.cp-portrait { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.cp-portrait .portrait,
.cp-portrait .portrait-placeholder {
  width: 104px; height: 104px; font-size: 2.3rem;
}
@media (max-width: 430px) {
  .cust-preview { padding: 12px; min-height: 142px; }
  .cp-canvas { width: 124px; height: 124px; }
  .cp-portrait .portrait, .cp-portrait .portrait-placeholder { width: 88px; height: 88px; }
}
@media (prefers-reduced-motion: reduce) { .cp-star { animation: none; } }