/* Logo colours come from ../homelab/media/jwnet-logos/README.md. */
:root,
[data-theme="website"] {
  color-scheme: dark;
  --bg: #1b2015;
  --line: #f5e0c5;
  --spark: #859f4e;
  --shadow: rgb(0 0 0 / 0.5);
  --jw-tile: #859f4e;
  --jw-text: #25231f;
  --net-tile: #f5e0c5;
  --net-text: #25231f;
}

[data-theme="olive-charcoal"] {
  color-scheme: dark;
  --bg: #161512;
  --line: #859f4e;
  --spark: #d6e8a4;
  --shadow: rgb(0 0 0 / 0.55);
  --jw-tile: #859f4e;
  --jw-text: #25231f;
  --net-tile: #25231f;
  --net-text: #859f4e;
}

[data-theme="pine-mint"] {
  color-scheme: dark;
  --bg: #0d251b;
  --line: #cdebb5;
  --spark: #f1fce6;
  --shadow: rgb(0 0 0 / 0.45);
  --jw-tile: #1b4332;
  --jw-text: #cdebb5;
  --net-tile: #cdebb5;
  --net-text: #1b4332;
}

[data-theme="petrol-ice"] {
  color-scheme: dark;
  --bg: #0b2731;
  --line: #c7edf0;
  --spark: #f2fdfe;
  --shadow: rgb(0 0 0 / 0.45);
  --jw-tile: #16495a;
  --jw-text: #c7edf0;
  --net-tile: #c7edf0;
  --net-text: #16495a;
}

[data-theme="plum-lilac"] {
  color-scheme: dark;
  --bg: #1f1522;
  --line: #e5c7f0;
  --spark: #f9eefc;
  --shadow: rgb(0 0 0 / 0.5);
  --jw-tile: #49324e;
  --jw-text: #e5c7f0;
  --net-tile: #e5c7f0;
  --net-text: #49324e;
}

[data-theme="clay-sand"] {
  color-scheme: dark;
  --bg: #26130f;
  --line: #c4553f;
  --spark: #7a3024;
  --shadow: rgb(0 0 0 / 0.5);
  --jw-tile: #a44533;
  --jw-text: #f7dfc0;
  --net-tile: #f7dfc0;
  --net-text: #a44533;
}

:root {
  --logo-width: min(76vw, 40rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--bg);
  overscroll-behavior: none;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
}

.background {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
  touch-action: pinch-zoom;
  /* Keeps the scene quiet around the logo. */
  mask-image: radial-gradient(
    ellipse calc(var(--logo-width) * 0.95) calc(var(--logo-width) * 0.62) at 50% 50%,
    transparent 48%,
    #000 100%
  );
}

.background.is-ready {
  opacity: 1;
}

main {
  position: relative;
  pointer-events: none;
}

.logo {
  margin: 0;
  line-height: 0;
}

.logo svg {
  display: block;
  width: var(--logo-width);
  height: auto;
  filter: drop-shadow(0 calc(var(--logo-width) * 0.03) calc(var(--logo-width) * 0.07) var(--shadow));
}

.logo-jw-tile {
  fill: var(--jw-tile);
}

.logo-jw-text {
  fill: var(--jw-text);
}

.logo-net-tile {
  fill: var(--net-tile);
}

.logo-net-text {
  fill: var(--net-text);
}

.motion-toggle {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--line) 28%, transparent);
  border-radius: 50%;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  color: var(--line);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.motion-toggle[hidden] {
  display: none;
}

.motion-toggle svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.motion-toggle[aria-pressed="false"] .motion-toggle-play,
.motion-toggle[aria-pressed="true"] .motion-toggle-pause {
  display: none;
}

.motion-toggle:focus-visible {
  outline: 2px solid var(--line);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .motion-toggle:hover {
    background: color-mix(in oklab, var(--line) 14%, var(--bg));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .logo {
    animation: logo-enter 900ms var(--ease-out) backwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo {
    animation: logo-fade 400ms ease backwards;
  }
}

@keyframes logo-enter {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.97);
  }
}

@keyframes logo-fade {
  from {
    opacity: 0;
  }
}