/* Design tokens and color themes */
:root {
  --color-bg: #0f1e36;
  --color-circle: #eec241;
  --color-wordmark: #fff;
  --safe-top: max(12px, env(safe-area-inset-top));
  --safe-right: max(12px, env(safe-area-inset-right));
  --safe-bottom: max(12px, env(safe-area-inset-bottom));
  --safe-left: max(12px, env(safe-area-inset-left));
  --available-width: calc(100vw - var(--safe-left) - var(--safe-right));
  --available-height: calc(100vh - var(--safe-top) - var(--safe-bottom));
  --diameter: min(
    100px,
    calc(var(--available-width) * 0.9 / 3.91),
    calc(var(--available-height) * 0.9 / 4.18)
  );
  --logo-width: calc(var(--diameter) * 3.50533);
  --selection-color: rgba(238, 194, 65, 0.24);
  --selection-strength: 24%;
  --theme-transition: 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-theme="simple"] {
  --color-bg: #fff;
  --color-circle: #000;
  --color-wordmark: #000;
  --selection-color: rgba(0, 0, 0, 0.14);
  --selection-strength: 14%;
}

body[data-theme="elegant"] {
  --color-bg: #111;
  --color-circle: #eec241;
  --color-wordmark: #fff;
}

body[data-theme="royal"] {
  --color-bg: #1c3828;
  --color-circle: #eec241;
  --color-wordmark: #fff;
}

body[data-theme="organic"] {
  --color-bg: #f6f4ef;
  --color-circle: #a07828;
  --color-wordmark: #000;
  --selection-color: rgba(160, 120, 40, 0.2);
  --selection-strength: 20%;
}

/* Viewport and page layout */
@supports (height: 100dvh) {
  :root {
    --available-height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
  }
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  overflow: hidden;
  background: var(--color-bg);
  transition: background-color var(--theme-transition);
  -webkit-font-smoothing: antialiased;
}

body.is-booting .coming-soon {
  visibility: hidden;
}

/* Logo geometry and primary typography */
.logo {
  position: relative;
  width: var(--logo-width);
  height: calc(var(--diameter) * 1.972815);
  -webkit-user-select: none;
  user-select: none;
}

.logo__circles {
  position: relative;
  width: 100%;
  height: var(--diameter);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.logo.is-voice .logo__circles {
  transform: translateY(calc(var(--diameter) * -0.18));
}

.logo.is-voice .logo__wordmark {
  transform: translate(-50%, calc(var(--diameter) * 0.32));
}

.logo.is-voice .coming-soon {
  transform: translate(-50%, calc(var(--diameter) * 0.32));
}

/* Keep rapidly resized capsules on stable layers in iOS Safari. */
.logo.is-voice .circle {
  border-radius: 999px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: top, height;
}

.circle {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: var(--color-circle);
  transition:
    background-color var(--theme-transition),
    opacity 0.12s ease;
}

.logo__circles.is-bouncing .circle {
  transform-origin: center bottom;
  will-change: transform;
}

.logo__circles.is-bouncing.is-bouncing-up .circle {
  transform-origin: center top;
}

.logo__circles.is-bouncing .circle--lg {
  transform: none !important;
}

.circle--lg {
  top: 0;
  left: calc(var(--diameter) * 1.252665);
  width: var(--diameter);
  height: var(--diameter);
  border-radius: calc(var(--diameter) * 0.5);
}

.circle--md-l,
.circle--md-r {
  width: calc(var(--diameter) * 0.614077);
  height: calc(var(--diameter) * 0.614077);
  border-radius: calc(var(--diameter) * 0.3070385);
}

.circle--md-l {
  top: calc(var(--diameter) * 0.385924);
  left: calc(var(--diameter) * 0.512256);
}

.circle--md-r {
  top: 0;
  left: calc(var(--diameter) * 2.378999);
}

.circle--sm-l,
.circle--sm-r {
  top: calc(var(--diameter) * 0.307039);
  width: calc(var(--diameter) * 0.385922);
  height: calc(var(--diameter) * 0.385922);
  border-radius: calc(var(--diameter) * 0.192961);
}

.circle--sm-l {
  left: 0;
}

.circle--sm-r {
  left: calc(var(--diameter) * 3.119408);
}

.logo__wordmark {
  position: relative;
  z-index: 2;
  left: 50%;
  width: max-content;
  margin: calc(var(--diameter) * 0.15) 0 0;
  transform: translateX(-50%);
  color: var(--color-wordmark);
  font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--diameter) * 0.822815);
  font-weight: 100;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  transition:
    color var(--theme-transition),
    opacity 0.18s ease,
    transform 0.5s ease;
}

.letter--small {
  font-size: 81.5%;
}

.coming-soon {
  position: absolute;
  z-index: 2;
  top: calc(100% + var(--diameter) * 0.28);
  left: 50%;
  width: max-content;
  margin: 0;
  transform: translateX(-50%);
  color: var(--color-circle);
  font-family: "American Typewriter", "Courier New", serif;
  font-size: calc(var(--diameter) * 0.493689);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  transition:
    color var(--theme-transition),
    opacity 0.18s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Editor-style text, selections, and cursor */
.text-char {
  position: relative;
  display: inline-block;
  z-index: 1;
  transform: scale(1);
  transform-origin: center bottom;
  will-change: transform, opacity;
}

/* Subtle word-by-word emphasis without changing the text layout. */
.logo.is-lyrics .circle {
  transform-origin: center;
  will-change: transform, opacity;
}

.text-char.is-selected {
  background: transparent;
}

.selection-fill {
  position: absolute;
  top: -1px;
  bottom: -1px;
  z-index: 0;
  display: block;
  background: color-mix(in srgb, var(--color-circle) var(--selection-strength), var(--color-bg));
  pointer-events: none;
}

.selection-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: max(1px, calc(var(--diameter) * 0.02));
  border-radius: 9999px;
  background: var(--color-circle);
  pointer-events: none;
}

.selection-handle::after {
  position: absolute;
  left: 50%;
  width: calc(var(--diameter) * 0.15);
  height: calc(var(--diameter) * 0.15);
  border-radius: 50%;
  background: var(--color-circle);
  content: "";
}

.selection-handle--left::after {
  top: 0;
  transform: translate(-50%, -80%);
}

.selection-handle--right::after {
  bottom: 0;
  transform: translate(-50%, 80%);
}

.multiline-selection {
  position: absolute;
  z-index: 1;
  display: none;
  background: color-mix(in srgb, var(--color-circle) var(--selection-strength), var(--color-bg));
  color: var(--color-circle);
  pointer-events: none;
}

.multiline-selection.is-visible {
  display: block;
}

.editor-cursor {
  position: absolute;
  z-index: 2;
  display: inline-block;
  width: max(1px, calc(var(--diameter) * 0.018));
  height: 1em;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--color-circle);
  vertical-align: top;
  animation: cursor-blink 0.62s step-end infinite;
}

.editor-cursor.is-paused {
  animation: none;
  opacity: 1;
}

.typed-dot {
  display: inline-block;
  white-space: pre;
}

.typed-dot--placeholder {
  height: calc(var(--diameter) * 0.0461);
  opacity: 0;
  vertical-align: baseline;
}

.prepared-char {
  opacity: 0;
}

.prepared-char.is-visible {
  opacity: 1;
}

/* Welcome sequence */
.welcome-scene {
  position: absolute;
  top: calc(var(--diameter) * 0.506311);
  left: 50%;
  z-index: 5;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--diameter) * 0.15);
  width: max-content;
  opacity: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

.welcome-scene.is-visible {
  visibility: visible;
  opacity: 1;
}

.welcome-scene__line,
.welcome-scene__wordmark {
  margin: 0;
  white-space: nowrap;
}

.welcome-scene__line {
  position: relative;
  height: calc(var(--diameter) * 0.493689);
  color: var(--color-circle);
  font-family: "American Typewriter", "Courier New", serif;
  font-size: calc(var(--diameter) * 0.493689);
  font-weight: 300;
  line-height: 1;
  transition: color var(--theme-transition);
}

.welcome-scene__text {
  --handle-w: calc(var(--diameter) * 0.02);
  --handle-gap: 2px;
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.welcome-scene__text::after {
  position: absolute;
  inset: 0 calc(var(--handle-w) * -0.5 - var(--handle-gap));
  content: "";
  background: color-mix(in srgb, var(--color-circle) var(--selection-strength), var(--color-bg));
  transform: scaleX(0);
  transform-origin: right;
  pointer-events: none;
}

.welcome-scene__text.is-highlighting::after {
  animation: welcome-highlight-sweep calc(0.4s * 0.67) steps(10) forwards;
}

.welcome-scene__text.is-highlighting .selection-handle--left {
  animation: welcome-handle-left calc(0.4s * 0.67) steps(10) forwards;
}

.welcome-scene__text.is-highlighting .selection-handle--right {
  animation: welcome-handle-right calc(0.08s * 0.67) ease-out forwards;
}

@keyframes welcome-highlight-sweep {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes welcome-handle-left {
  from { left: calc(100% + var(--handle-gap)); opacity: 1; }
  to { left: calc(-1 * var(--handle-w) - var(--handle-gap)); opacity: 1; }
}

@keyframes welcome-handle-right {
  from { opacity: 0; }
  to { opacity: 1; }
}

.welcome-scene__wordmark {
  position: relative;
  height: calc(var(--diameter) * 0.822815);
  color: var(--color-wordmark);
  font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--diameter) * 0.822815);
  font-weight: 100;
  line-height: 1;
  transition: color var(--theme-transition);
}

/* JavaScript-controlled transition states */
.logo__circles.is-preparing .circle--lg {
  top: calc(var(--diameter) * -0.54915005);
  height: calc(var(--diameter) * 2.0983001);
}

.logo__circles.is-preparing .circle--md-l,
.logo__circles.is-preparing .circle--md-r {
  top: calc(var(--diameter) * -0.1929625);
  height: calc(var(--diameter) * 1.385925);
}

.logo__circles.is-preparing .circle--sm-l,
.logo__circles.is-preparing .circle--sm-r {
  top: 0;
  height: var(--diameter);
}

.logo__circles.is-preparing .circle {
  transition:
    top 0.25s ease-in-out,
    height 0.25s ease-in-out,
    background-color var(--theme-transition);
}

.logo__circles.is-resetting .circle {
  transition:
    top 0.5s ease-in-out,
    height 0.5s ease-in-out,
    transform 0.5s ease-in-out,
    background-color var(--theme-transition);
}

@keyframes cursor-blink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

/* Respect the operating system's motion accessibility preference. */
@media (prefers-reduced-motion: reduce) {
  body,
  .circle,
  .logo__wordmark,
  .coming-soon,
  .welcome-scene__line,
  .welcome-scene__wordmark {
    transition-duration: 0.01ms !important;
  }

  .editor-cursor {
    animation: none;
  }
}