:root {
  color-scheme: light;
  --bg: #FAF9F6;
  --signal: #73726B;
}

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

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

body {
  background: var(--bg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Helvetica Neue", Arial, sans-serif;
}

/* Root container filling the viewport */
.amon-root {
  position: relative;
  width: 100vw;
  height: 100dvh; /* fixes mobile Safari viewport shift */
  overflow: hidden;
}

/* Particle canvas behind everything */
#particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Centered logo layer */
.logo-layer {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-sequence {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-sequence img {
  display: block;
}

/* Icon is the only visible element at first */
.logo-icon {
  width: 22px;
  height: 20px;
  transform-origin: center center;
}

/* Wordmark starts fully masked and transparent; width/margin animated in JS */
.logo-wordmark {
  width: 0;
  height: 20px;
  margin-left: 0;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}


/* Small screen adjustments: keep lockup at 100% */
@media (max-width: 600px) {
  .logo-sequence {
    transform: translateY(-8%) scale(1.2);
    transform-origin: center center;
  }
}

/* Large screen adjustments: scale entire lockup to 140% */
@media (min-width: 1200px) {
  .logo-sequence {
    transform: scale(1.4);
    transform-origin: center center;
  }
}

/* Reduced motion: no animation, just show final state once JS sets it */
@media (prefers-reduced-motion: reduce) {
  .logo-icon,
  .logo-wordmark {
    transition: none !important;
    animation: none !important;
  }
}