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

:root {
  color-scheme: light dark;
  --bg: #f4f1ea;
  --fg: #1a1a1a;
  --toggle-bg: rgba(26, 26, 26, 0.06);
  --toggle-border: rgba(26, 26, 26, 0.14);
  --toggle-fg: #1a1a1a;
  --hue: 195;
  --hue-cycle-ms: 18000ms;
  /* Wordmark fill through mask (no CSS filter recolor). */
  --fill-s: 68%;
  --fill-l: 40%;
  --fill-glow: rgba(26, 26, 26, 0.12);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0c0f;
  --fg: #e8e6e1;
  --toggle-bg: rgba(232, 230, 225, 0.06);
  --toggle-border: rgba(232, 230, 225, 0.16);
  --toggle-fg: #e8e6e1;
  --fill-s: 78%;
  --fill-l: 62%;
  --fill-glow: rgba(255, 255, 255, 0.18);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f1ea;
  --fg: #1a1a1a;
  --toggle-bg: rgba(26, 26, 26, 0.06);
  --toggle-border: rgba(26, 26, 26, 0.14);
  --toggle-fg: #1a1a1a;
  --fill-s: 68%;
  --fill-l: 40%;
  --fill-glow: rgba(26, 26, 26, 0.12);
}

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

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

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  overflow: hidden;
}

.stage {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}

.wordmark-shell {
  position: relative;
  width: min(92vw, 1064px);
  aspect-ratio: 1064 / 312;
  line-height: 0;
  background-color: transparent;
}

.wordmark-shell.is-cycling {
  animation: hue-cycle var(--hue-cycle-ms) linear infinite;
}

/*
 * Mask-based recolor: shell fill is hsl(--hue); alpha PNG punches glyphs.
 * Page --bg shows through. Avoids Safari filter/invert blue-plate bugs.
 */
.wordmark-shell.is-masked {
  background-color: hsl(var(--hue) var(--fill-s) var(--fill-l));
  -webkit-mask-image: url("yamizzle-poster.png");
  mask-image: url("yamizzle-poster.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-source-type: alpha;
  filter: drop-shadow(0 0 18px var(--fill-glow));
}

.wordmark-shell.is-masked .wordmark-media {
  opacity: 0;
  pointer-events: none;
}

.wordmark-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border: 0;
  background: transparent;
  user-select: none;
  -webkit-user-drag: none;
}

/*
 * H.264 has no alpha (white glyphs on black). screen blend drops the black
 * plate against --bg so Safari/Chrome MP4 spray is not a solid rectangle.
 * WebM-with-alpha also fine under screen (transparent stays clear).
 */
.wordmark-shell.is-playing #wordmark-video {
  mix-blend-mode: screen;
}

.wordmark-poster[hidden] {
  display: none !important;
}

.wordmark-shell.is-static-poster .wordmark-poster {
  /* Poster img stays opacity 0 under is-masked; shell mask is the visible glyph. */
  display: block !important;
}

.wordmark-shell.is-static-poster #wordmark-video {
  display: none !important;
}

@keyframes hue-cycle {
  from { --hue: 0; }
  to { --hue: 360; }
}

.theme-toggle {
  position: fixed;
  top: max(0.85rem, env(safe-area-inset-top));
  right: max(0.85rem, env(safe-area-inset-right));
  z-index: 10;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--toggle-border);
  background: var(--toggle-bg);
  color: var(--toggle-fg);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.theme-toggle:hover {
  transform: scale(1.04);
}

.theme-toggle:focus-visible {
  outline: 2px solid hsl(var(--hue) 72% 48%);
  outline-offset: 3px;
}

.theme-toggle__icon::before {
  content: "◐";
  font-size: 1.05rem;
  line-height: 1;
}

html[data-theme="light"] .theme-toggle__icon::before {
  content: "☀";
}

html[data-theme="dark"] .theme-toggle__icon::before {
  content: "☾";
}

@media (prefers-reduced-motion: reduce) {
  .wordmark-shell.is-cycling {
    animation: none;
    --hue: 195;
  }

  .theme-toggle {
    transition: none;
  }
}