/* ==========================================================================
   EDIT ME: colors and sizes for the room and the mirror.

   The page is a single empty mirror hanging on a wall. The glass uses soft
   gradients to read as reflective silver; everything else stays plain.
   ========================================================================== */

:root {
  color-scheme: dark;

  --color-wall: #16181a;
  --color-wall-shade: #0c0d0e;
  --color-frame: #b9b3a6;
  --color-frame-edge: #6f6a60;
  --color-glass-light: #e4e8ea;
  --color-glass-mid: #b7bec2;
  --color-glass-dark: #8b9398;
  --color-text-muted: #8a867d;

  --mirror-width: min(22rem, 72vw);
  --mirror-ratio: 3 / 5;
  --frame: 0.75rem;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --color-wall: #e9e6e0;
    --color-wall-shade: #d6d2ca;
    --color-frame: #8a8272;
    --color-frame-edge: #5b5549;
    --color-text-muted: #6b665c;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: radial-gradient(
    ellipse at 50% 40%,
    var(--color-wall) 0%,
    var(--color-wall-shade) 100%
  );
}

.room {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  min-height: 100%;
  padding: 2rem;
}

/* Frame: an arched top over straight sides, like a tall standing mirror. */
.mirror {
  width: var(--mirror-width);
  aspect-ratio: var(--mirror-ratio);
  max-height: calc(100vh - 10rem);
  padding: var(--frame);
  border-radius: 50% 50% 0.5rem 0.5rem / 30% 30% 0.5rem 0.5rem;
  background: linear-gradient(
    145deg,
    var(--color-frame) 0%,
    var(--color-frame-edge) 100%
  );
  box-shadow:
    0 1.5rem 3rem rgb(0 0 0 / 0.35),
    inset 0 0 0 1px rgb(255 255 255 / 0.15);
}

/* The glass: cool silver, brighter where light would hit it, nothing in it. */
.mirror__glass {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(
    160deg,
    var(--color-glass-light) 0%,
    var(--color-glass-mid) 45%,
    var(--color-glass-dark) 100%
  );
  box-shadow:
    inset 0 0 2.5rem rgb(0 0 0 / 0.25),
    inset 0 0 0 1px rgb(0 0 0 / 0.2);
}

/* The webcam reflection, flipped like a real mirror. Hidden until allowed. */
.mirror__reflection {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  opacity: 0;
  filter: saturate(0.85) contrast(0.95) brightness(1.05);
}

.is-reflecting .mirror__reflection {
  opacity: 0.92;
}

/* Diagonal streaks of reflected light. */
.mirror__sheen {
  position: absolute;
  top: -20%;
  height: 140%;
  background: rgb(255 255 255 / 0.35);
  filter: blur(6px);
  transform: rotate(24deg);
}

.mirror__sheen--wide {
  left: 18%;
  width: 22%;
}

.mirror__sheen--thin {
  left: 48%;
  width: 6%;
  background: rgb(255 255 255 / 0.25);
}

/* A slow drift of the light across the glass, only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .mirror__sheen {
    animation: drift 9s ease-in-out infinite alternate;
  }

  .mirror__reflection {
    transition: opacity 1.2s ease;
  }
}

@keyframes drift {
  from {
    translate: -12% 0;
  }
  to {
    translate: 12% 0;
  }
}

/* The webcam toggle, below the mirror. */
.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  font-family: system-ui, sans-serif;
}

.controls__button {
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--color-frame-edge);
  border-radius: 999px;
  background: linear-gradient(
    145deg,
    var(--color-frame) 0%,
    var(--color-frame-edge) 100%
  );
  color: var(--color-wall-shade);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.controls__button:hover {
  filter: brightness(1.08);
}

.controls__button:focus-visible {
  outline: 2px solid var(--color-glass-light);
  outline-offset: 3px;
}

.controls__button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.controls__note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.controls__note--problem {
  max-width: 24rem;
  color: var(--color-frame);
  font-weight: 600;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}