:root {
  --cream: #f9f2ed;   /* identiek aan de achtergrond die in het logo zat */
  --navy:  #0d1e28;
  --gold:  #a87f49;

  /* Logo schaalt mee met breedte én hoogte. 2.045 is de beeldverhouding,
     zodat het logo in liggend beeld nooit hoger wordt dan de viewport. */
  --logo-width: min(80vw, 34rem, calc(56svh * 2.045));
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--cream);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Achtergrond: traag driftende lichtvlekken ---------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Zachte vignette geeft diepte en trekt de blik naar het midden. */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%,
                              transparent 40%,
                              rgb(13 30 40 / 0.05) 100%);
}

.glow {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
  animation: drift 90s ease-in-out infinite alternate;
}

/* Radiale gradients zijn van zichzelf al vloeiend — geen blur-filter nodig,
   wat het op mobiel een stuk goedkoper maakt. */
.glow--warm {
  width: 90vmax; aspect-ratio: 1;
  top: -28%; left: -22%;
  background: radial-gradient(circle at 50% 50%,
                              rgb(168 127 73 / 0.16) 0%,
                              rgb(168 127 73 / 0.07) 42%,
                              rgb(168 127 73 / 0) 72%);
  animation-duration: 78s;
}

.glow--sand {
  width: 72vmax; aspect-ratio: 1;
  bottom: -26%; left: 6%;
  background: radial-gradient(circle at 50% 50%,
                              rgb(168 127 73 / 0.12) 0%,
                              rgb(168 127 73 / 0.05) 45%,
                              rgb(168 127 73 / 0) 74%);
  animation-duration: 104s;
  animation-delay: -32s;
}

/* Marineblauw leest veel zwaarder dan goud, dus bewust lager gedoseerd. */
.glow--cool {
  width: 96vmax; aspect-ratio: 1;
  bottom: -34%; right: -26%;
  background: radial-gradient(circle at 50% 50%,
                              rgb(13 30 40 / 0.09) 0%,
                              rgb(13 30 40 / 0.04) 44%,
                              rgb(13 30 40 / 0) 73%);
  animation-duration: 118s;
  animation-delay: -61s;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(7vmax, -5vmax, 0) scale(1.12); }
}

/* ---------- Korrel: papierachtige textuur, statisch ---------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ---------- Logo ---------- */

main {
  position: relative;
  z-index: 2;
  padding: 6vmin;
}

.mark {
  display: block;
  width: var(--logo-width);
  height: auto;
  animation: rise 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .glow, .mark { animation: none; }
}