/* ---------- Design tokens (colors derived from the logo) ---------- */
:root {
  --c-bg: #ffffff;
  --c-cyan: hsl(182 85% 55%);
  --c-blue: hsl(212 80% 42%);
  --logo-size: min(420px, 70vw);
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem;
  overflow: hidden;
  isolation: isolate;
}

.hero__title { margin: 0; }

.hero__logo {
  width: var(--logo-size);
  /* blend the JPG's white background into the page */
  mix-blend-mode: multiply;
  animation: reveal 1.2s cubic-bezier(.22, 1, .36, 1) both;
}

/* Subtle colored glow behind the logo */
.glow {
  position: absolute;
  inset: 50% auto auto 50%;
  width: calc(var(--logo-size) * 1.6);
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 40%, color-mix(in srgb, var(--c-cyan) 22%, transparent), transparent 60%),
    radial-gradient(circle at 65% 60%, color-mix(in srgb, var(--c-blue) 16%, transparent), transparent 60%);
  filter: blur(40px);
  animation: breathe 9s ease-in-out infinite alternate;
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(12px) scale(.97); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

@keyframes breathe {
  from { transform: scale(.92) rotate(0deg);  opacity: .8; }
  to   { transform: scale(1.08) rotate(25deg); opacity: 1; }
}

/* Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero__logo,
  .glow { animation: none; }
}