/* The reflection is painted behind the content, clipped to the glass surface. */
body.landing-page .mirror > .card {
  --mirror-colour-1: #c4f1e9;
  --mirror-colour-2: #d0e7ff;
  --mirror-colour-3: #e1d4fa;
  --mirror-colour-4: #f6d9ed;
  --mood-halo: #a78bfa;
  --reflection-x: 50%;
  --reflection-y: 50%;
  --reflection-light: rgba(255, 255, 255, 0.48);
  background-color: #e5e8fa;
  background-image:
    linear-gradient(125deg, transparent 32%, var(--reflection-light) 48%, transparent 64%),
    linear-gradient(115deg, var(--mirror-colour-1) 0%, var(--mirror-colour-2) 25%, var(--mirror-colour-3) 50%, var(--mirror-colour-4) 75%, var(--mirror-colour-1) 100%);
  background-size: 200% 200%, 300% 300%;
  background-position: var(--reflection-x) var(--reflection-y), 0% 50%;
  background-repeat: no-repeat;
  transition: background-position 650ms ease-out, --mirror-colour-1 1s ease, --mirror-colour-2 1s ease, --mirror-colour-3 1s ease, --mirror-colour-4 1s ease;
}

body.landing-page.dark-mode .mirror > .card {
  --mirror-colour-1: #084c50;
  --mirror-colour-2: #203f78;
  --mirror-colour-3: #493078;
  --mirror-colour-4: #602c58;
  --reflection-light: rgba(167, 196, 255, 0.12);
  background-color: #162b4d;
  background-image:
    linear-gradient(125deg, transparent 32%, var(--reflection-light) 48%, transparent 64%),
    linear-gradient(115deg, var(--mirror-colour-1) 0%, var(--mirror-colour-2) 25%, var(--mirror-colour-3) 50%, var(--mirror-colour-4) 75%, var(--mirror-colour-1) 100%);
  color: #f4f2ed;
  border-color: #73808c;
  box-shadow:
    inset 1px 1px 0 rgba(220, 233, 245, 0.35),
    inset -1px -1px 0 rgba(0, 0, 0, 0.85),
    0 14px 32px rgba(0, 0, 0, 0.65);
}

body.landing-page .card .checkin-subtitle,
body.landing-page .card .form-group label,
body.landing-page .card #moodSelectionHint {
  color: #343b43;
}

body.landing-page.dark-mode .card .checkin-brand,
body.landing-page.dark-mode .card .form-group label {
  color: #f4f2ed !important;
}

body.landing-page.dark-mode .card .checkin-subtitle,
body.landing-page.dark-mode .card #moodSelectionHint {
  color: #e0e4e8;
}

body.landing-page .card .form-control { background-color: #fff; }

/* Let the glass show around the circular control in both themes. */
body.landing-page .card #moodPicker {
  background: transparent;
  border-color: transparent;
}

body.landing-page.dark-mode .card .form-control {
  background-color: #1b222a;
  color: #f4f2ed;
  border-color: #84909c;
  color-scheme: dark;
}

/* Continuous colour movement works without hover, including on touch screens.
   Teal, blue and violet echo the check-in energy and vision palettes. */
@media (prefers-reduced-motion: no-preference) {
  body.landing-page .mirror > .card {
    animation: mirror-colour-flow 12s ease-in-out infinite;
  }
  body.landing-page .mirror > .card:has(input:focus, textarea:focus, select:focus) {
    animation-play-state: paused;
  }
}

@keyframes mirror-colour-flow {
  0%, 100% {
    background-position: calc(var(--reflection-x) - 25%) var(--reflection-y), 0% 30%;
  }
  50% {
    background-position: calc(var(--reflection-x) + 25%) var(--reflection-y), 100% 70%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.landing-page .mirror > .card { transition: none; animation: none; }
}

/* Registered colours let a new mood blend in while the background keeps moving. */
@property --mirror-colour-1 { syntax: '<color>'; inherits: true; initial-value: #c4f1e9; }
@property --mirror-colour-2 { syntax: '<color>'; inherits: true; initial-value: #d0e7ff; }
@property --mirror-colour-3 { syntax: '<color>'; inherits: true; initial-value: #e1d4fa; }
@property --mirror-colour-4 { syntax: '<color>'; inherits: true; initial-value: #f6d9ed; }

body.landing-page .mirror > .card[data-reflection-mood="q1"] {
  --mirror-colour-1: #fff1bf; --mirror-colour-2: #ffe2b8;
  --mirror-colour-3: #f6d7c6; --mirror-colour-4: #ffebcc; --mood-halo: #eab308;
}
body.landing-page .mirror > .card[data-reflection-mood="q2"] {
  --mirror-colour-1: #f8d2dc; --mirror-colour-2: #f8d0c5;
  --mirror-colour-3: #eed4f3; --mirror-colour-4: #f5d0df; --mood-halo: #f87171;
}
body.landing-page .mirror > .card[data-reflection-mood="q3"] {
  --mirror-colour-1: #c9e6fb; --mirror-colour-2: #ccd9fa;
  --mirror-colour-3: #dad7f8; --mirror-colour-4: #c2e9f1; --mood-halo: #60a5fa;
}
body.landing-page .mirror > .card[data-reflection-mood="q4"] {
  --mirror-colour-1: #c4f1df; --mirror-colour-2: #c2eae8;
  --mirror-colour-3: #d3edc7; --mirror-colour-4: #c6f1dc; --mood-halo: #34d399;
}
body.landing-page.dark-mode .mirror > .card[data-reflection-mood="q1"] {
  --mirror-colour-1: #634511; --mirror-colour-2: #693c22;
  --mirror-colour-3: #56304d; --mirror-colour-4: #614515;
}
body.landing-page.dark-mode .mirror > .card[data-reflection-mood="q2"] {
  --mirror-colour-1: #602c48; --mirror-colour-2: #682f38;
  --mirror-colour-3: #493078; --mirror-colour-4: #602c58;
}
body.landing-page.dark-mode .mirror > .card[data-reflection-mood="q3"] {
  --mirror-colour-1: #16476b; --mirror-colour-2: #203f78;
  --mirror-colour-3: #393779; --mirror-colour-4: #084c50;
}
body.landing-page.dark-mode .mirror > .card[data-reflection-mood="q4"] {
  --mirror-colour-1: #12523f; --mirror-colour-2: #084c50;
  --mirror-colour-3: #365125; --mirror-colour-4: #124d43;
}

body.landing-page .reflection-date {
  padding: 2px;
  border-radius: 10px;
  background: linear-gradient(100deg, #6366f1, #00c9a7, #d5c5ff, #6366f1);
  background-size: 300% 100%;
}
body.landing-page .reflection-date #checkin_date { border-color: transparent; }
body.landing-page .reflection-date:focus-within {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
body.landing-page.dark-mode .reflection-date:focus-within { outline-color: #93c5fd; }
body.landing-page .reflection-date #checkin_date:focus { box-shadow: none; }
body.landing-page .card .mood-chart {
  box-shadow: 0 0 0 2px var(--mood-halo);
}
@media (prefers-reduced-motion: no-preference) {
  body.landing-page .reflection-date { animation: date-border-flow 6s ease-in-out infinite; }
  body.landing-page .reflection-date:focus-within { animation-play-state: paused; }
  body.landing-page .card .mood-chart { animation: mood-halo-breathe 4s ease-in-out infinite; }
}
@keyframes date-border-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes mood-halo-breathe {
  0%, 100% { box-shadow: 0 0 0 2px var(--mood-halo), 0 0 5px var(--mood-halo); }
  50% { box-shadow: 0 0 0 4px var(--mood-halo), 0 0 12px var(--mood-halo); }
}