/* =====================================================================
   PALETTE — edit these variables to recolor the logo and background.
   ---------------------------------------------------------------------
   --fill              : the letters and swoosh
   --ring-1 … --ring-4 : the four traced outline rings, from the INSIDE out
                         (the artwork has exactly four: coral, yellow, teal, navy).
   --ring-5, --ring-6… : optional EXTRA outer rings, added outside the navy edge.
                         Add as many as you like (keep the numbers continuous).
   --ring-N-width      : thickness of an extra ring (artwork px; the logo is
                         ~1020 px wide). Default 16. Ignored for rings 1–4,
                         whose shapes come from the artwork.
   --shadow            : soft drop shadow color (use "transparent" to remove)
   --bg / --bg-edge    : background center / edge color
   --dot               : halftone dot color
   ===================================================================== */
:root {
  --fill:   #fdf3dc;   /* cream letters */

  --ring-1: #ee5b42;   /* coral         */
  --ring-2: #fab832;   /* yellow-orange */
  --ring-3: #2c989b;   /* teal          */
  --ring-4: #032c5c;   /* dark navy     */

  /* Example extra ring — uncomment to add a cream band outside the navy:
  --ring-5: #fdf3dc;
  --ring-5-width: 14;  */

  --shadow: rgba(84, 56, 28, 0.55);
  --bg:      #fef7e7;
  --bg-edge: #fcf3e0;
  --dot:     #e9d8b8;
}
/* ===================================================================== */

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;            /* no scrollbars, ever */
  background: radial-gradient(ellipse at center, var(--bg) 0%, var(--bg-edge) 100%);
  background-color: var(--bg);
  -webkit-text-size-adjust: 100%;
}

#halftone {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(5vmin, env(safe-area-inset-top)) max(5vmin, env(safe-area-inset-right))
           max(5vmin, env(safe-area-inset-bottom)) max(5vmin, env(safe-area-inset-left));
}

#logo {
  width: 100%;
  height: 100%;
  max-width: 1500px;
  overflow: visible;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 1.2s cubic-bezier(0.37, 0, 0.63, 1),
              transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
#logo.ready { opacity: 1; transform: scale(1); }

#logo .layer {
  fill-rule: evenodd;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}
#shadow { fill: var(--shadow); }

/* ?compare : frame the artwork exactly like the original image, no intro */
.compare .stage { padding: 0; }
.compare #logo { max-width: none; transition: none; transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #logo { transition: opacity 0.6s ease-in-out; transform: none; }
}