/* Die Garderobe als Schminkplatz (js/spiegel.js): ein Spiegel im Holzrahmen mit Glühbirnen, davor der Tisch mit
   Mienen und Kippschalter. Die Birnen zählen das Fotoshooting; wie viel davon brennt, steht in --licht (0 bis 1)
   und macht Glas und Puppe heller. Dazu die Kategorien als Stoffe am Bügel; die Tür zum Tonstudio steht in tonstudio.css. */

@property --licht { syntax: "<number>"; inherits: true; initial-value: 0; }

.schminkplatz { --licht: 0; position: relative; display: grid; color: var(--tinte); transition: --licht 1.8s var(--aus); }
.schminkplatz .unsichtbar { position: absolute; }

/* der Rahmen: Holz mit Maserung, oben angestrahlt; im Holz stecken die Birnen */
.spiegel-rahmen {
  position: relative; z-index: 1; padding: 30px; border: var(--kante) solid var(--tinte); border-radius: 16px 16px 8px 8px;
  background:
    var(--korn),
    repeating-linear-gradient(91deg, rgba(40, 18, 4, .26) 0 1.5px, transparent 1.5px 6px, rgba(255, 220, 170, .08) 6px 7.5px, transparent 7.5px 13px),
    linear-gradient(180deg, #8E6235 0%, #6A4524 36%, #4E3018 100%);
  background-blend-mode: soft-light, normal, normal;
  box-shadow: var(--versatz);
}
.spiegel-birnen { position: absolute; z-index: 3; pointer-events: none; }
/* der Schein der Spiegelbirnen reicht über den Rand: seitlich schneidet die Garderobe ihn ab, statt sich verschieben zu lassen */
.garderobe { overflow-x: hidden; }

/* das Glas: der dunkle Saal im Spiegel, ein Hauch Silber, schräge Glanzstreifen */
.spiegel-glas {
  position: relative; aspect-ratio: 5 / 4; overflow: hidden; border: var(--kante) solid var(--tinte); border-radius: 6px;
  background:
    radial-gradient(120% 70% at 50% 120%, color-mix(in srgb, var(--wurf) 70%, transparent), transparent 62%),
    linear-gradient(158deg, color-mix(in srgb, var(--saal) 58%, #C4BDD6) 0%, color-mix(in srgb, var(--saal) 78%, #8C84A6) 36%, color-mix(in srgb, var(--saal) 92%, #4A4266) 70%, var(--saal) 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16), inset 0 12px 26px color-mix(in srgb, var(--wurf) 55%, transparent);
}
/* was die Birnen ins Glas werfen: warm an den Rändern, so stark, wie viel brennt */
.spiegel-glas::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--licht); mix-blend-mode: screen;
  background:
    radial-gradient(90% 55% at 50% -12%, rgba(255, 226, 150, .7), transparent 72%),
    radial-gradient(42% 85% at -10% 52%, rgba(255, 206, 126, .6), transparent 72%),
    radial-gradient(42% 85% at 110% 52%, rgba(255, 206, 126, .6), transparent 72%);
}
.spiegel-glanz {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(118deg, transparent 17%, rgba(255, 255, 255, .17) 23%, rgba(255, 255, 255, .04) 30%, transparent 33%, transparent 61%, rgba(255, 255, 255, .1) 65%, transparent 69%);
}
/* die eigene Puppe, seitenverkehrt; im Dunkeln matt, im vollen Licht warm */
.spiegel-puppe {
  position: absolute; left: 50%; bottom: 0; z-index: 1; transform-origin: 50% 100%;
  transform: translateX(-50%) scale(var(--s, 1)) scaleX(-1);
  filter: brightness(calc(.5 + var(--licht) * .56)) saturate(calc(.7 + var(--licht) * .36)) sepia(calc(var(--licht) * .28));
  transition: translate 90ms linear;
}

/* der Tisch davor: Holzplatte, auf die das Spiegellicht fällt, vorn die dunklere Kante */
.schminktisch {
  position: relative; display: grid; gap: 14px; margin: -8px 12px 0; padding: 24px 18px 26px;
  border: var(--kante) solid var(--tinte); border-top: 0; border-radius: 0 0 10px 10px;
  background:
    var(--korn),
    repeating-linear-gradient(180deg, rgba(70, 36, 10, .14) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #C2925A 0%, #B08048 60%, #9A6C3A 100%);
  background-blend-mode: soft-light, normal, normal;
  box-shadow: var(--versatz);
}
.schminktisch::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--licht); border-radius: inherit;
  background: radial-gradient(85% 70% at 50% 0%, rgba(255, 230, 160, .85), transparent 78%);
}
.schminktisch::after {
  content: ""; position: absolute; left: -3px; right: -3px; bottom: -3px; height: 14px; border: var(--kante) solid var(--tinte); border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #7A522A, #4E3018); pointer-events: none;
}
.schminktisch > * { position: relative; z-index: 1; }
.schminktisch-stand { margin: 0; max-width: 62ch; font: 600 15px/1.45 var(--schrift); color: var(--tinte); }
.schminktisch-zahl { display: block; font: 900 19px/1.15 var(--schrift-schild); text-transform: uppercase; text-wrap: balance; }
.schminktisch .knopf.haupt { justify-self: start; white-space: nowrap; }
.schminktisch-mienen { display: flex; flex-wrap: wrap; gap: 8px; }
.schminktisch-mienen .wahl { box-shadow: var(--versatz-klein); }

/* der Kippschalter: Bakelit, oben „An“, unten „Aus“ eingraviert; der Hebel kippt mit Feder, an leuchtet „An“ warm */
.kippschalter { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font: 700 16px/1.2 var(--schrift); color: var(--tinte); }
.kippschalter-platte { position: relative; display: grid; flex: none; }
.kippschalter input {
  appearance: none; -webkit-appearance: none; position: relative; width: 48px; height: 84px; margin: 0; cursor: pointer;
  border: var(--kante) solid var(--tinte); border-radius: 9px;
  background:
    radial-gradient(circle at 50% 50%, #B9B2C6 0 5px, var(--tinte) 5.2px 7px, transparent 7.2px),
    linear-gradient(180deg, #4E3A2C, #2B1E16 60%, #1C130E);
  box-shadow: var(--versatz-klein);
}
.kippschalter input::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 20px; margin-left: -6px;
  border: 2px solid var(--tinte); border-radius: 6px 6px 4px 4px; transform-origin: 50% 0;
  background: linear-gradient(90deg, #8F88A0, #F4F1F8 45%, #B9B2C6 70%, #6F6884);
  transition: transform .32s var(--feder);
}
.kippschalter input:checked::after { transform: scaleY(-1); }
.kippschalter-platte i {
  position: absolute; left: 0; right: 0; pointer-events: none; text-align: center;
  font: 900 10px/1 var(--schrift-schild); font-style: normal; text-transform: uppercase; letter-spacing: .12em;
  color: #E4DCCB; opacity: .42; transition: opacity .2s var(--aus), color .2s var(--aus), text-shadow .2s var(--aus);
}
.kippschalter-platte .an { top: 9px; }
.kippschalter-platte .aus { bottom: 9px; }
.kippschalter input:checked ~ .an { opacity: 1; color: #FFE7A4; text-shadow: 0 0 6px rgba(255, 214, 110, .85); }
.kippschalter input:not(:checked) ~ .aus { opacity: .95; }

/* am Rechner ist der Spiegel breiter als die Tafeln darunter und das Glas flacher; der Tisch hat zwei Reihen */
@media (min-width: 900px) {
  /* breiter als die Spalte, ohne sie mitzunehmen: nach beiden Seiten gleich weit hinaus */
  .schminkplatz { margin-inline: min(0px, calc((100% - min(100vw - 48px, 1000px)) / 2)); }
  .spiegel-rahmen { padding: 38px; }
  .spiegel-glas { aspect-ratio: 16 / 8.4; }
  .schminktisch {
    margin: -8px 18px 0; padding: 28px 30px 32px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "stand knopf" "mienen schalter";
    align-items: center; gap: 20px 30px;
  }
  .schminktisch-stand { grid-area: stand; }
  .schminktisch .knopf.haupt { grid-area: knopf; justify-self: end; }
  .schminktisch .kippschalter { grid-area: schalter; justify-self: end; }
  .schminktisch-mienen { grid-area: mienen; }
}

/* ---- Kategorien: Stoffe am Bügel; wer die Farbe wechselt, bringt den Bügel zum Schwingen ---- */

.kat-liste .farbknopf {
  position: relative; width: 48px; height: 56px; padding: 0; border: 0; border-radius: 0; background: none; transform-origin: 50% 2px;
  transition: rotate .3s var(--feder);
  /* die Tintenkante um Bügel und Stoff, auch an den Zacken, dazu ein weicher Wurf nach unten */
  filter: drop-shadow(1.5px 0 0 var(--tinte)) drop-shadow(-1.5px 0 0 var(--tinte)) drop-shadow(0 1.5px 0 var(--tinte)) drop-shadow(0 -1.5px 0 var(--tinte))
    drop-shadow(0 4px 4px color-mix(in srgb, var(--wurf) 40%, transparent));
}
.kat-liste .farbknopf::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: var(--tinte);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 22'%3E%3Cpath d='M24 10V7.4a3.4 3.4 0 1 0-3.4-3.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M24 10 4.5 19.5h39Z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 22'%3E%3Cpath d='M24 10V7.4a3.4 3.4 0 1 0-3.4-3.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M24 10 4.5 19.5h39Z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* der Stoff hängt über der Stange, so breit wie der Bügel, unten mit der Zackenschere geschnitten, in der Mitte die Falte */
.kat-liste .farbknopf::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 17px; bottom: 1px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 18%, rgba(255, 255, 255, .26) 36%, rgba(0, 0, 0, 0) 47%, rgba(0, 0, 0, .26) 50%, rgba(0, 0, 0, 0) 53%, rgba(255, 255, 255, .18) 66%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, .22)),
    linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 4px),
    var(--kf);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 38' preserveAspectRatio='none'%3E%3Cpath d='M0 0H40V33L37.5 38 35 33 32.5 38 30 33 27.5 38 25 33 22.5 38 20 33 17.5 38 15 33 12.5 38 10 33 7.5 38 5 33 2.5 38 0 33Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 38' preserveAspectRatio='none'%3E%3Cpath d='M0 0H40V33L37.5 38 35 33 32.5 38 30 33 27.5 38 25 33 22.5 38 20 33 17.5 38 15 33 12.5 38 10 33 7.5 38 5 33 2.5 38 0 33Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
@media (hover: hover) { .kat-liste .farbknopf:hover { rotate: 5deg; } }
.kat-liste .farbknopf.schwingt { animation: buegel 1.2s var(--aus); }
@keyframes buegel { 0% { rotate: 0deg; } 14% { rotate: 16deg; } 34% { rotate: -10deg; } 54% { rotate: 6deg; } 74% { rotate: -2.5deg; } 100% { rotate: 0deg; } }
.kat-liste li:has(input.aus) .farbknopf { opacity: .45; }

@media (prefers-reduced-motion: reduce) {
  .schminkplatz { transition: none; }
  .kippschalter input::after { transition: none; }
  .kat-liste .farbknopf.schwingt { animation: none; }
}