:root {
  --paper: #f4eee3;
  --forest: #1f3d3a;
  --green: #2e6b5e;
  --copper: #c9784a;
  --amber: #e8a23c;
  --mx: 50vw;
  --my: 50vh;
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

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

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

body {
  overflow: hidden;
  background:
    radial-gradient(60vmax 50vmax at 12% 8%, rgba(46, 107, 94, 0.16), transparent 60%),
    radial-gradient(55vmax 45vmax at 92% 96%, rgba(201, 120, 74, 0.20), transparent 62%),
    var(--paper);
  color: var(--forest);
  -webkit-font-smoothing: antialiased;
}

/* paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.24  0 0 0 0 0.23  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* soft warm light that trails the pointer */
.glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
  background: radial-gradient(22rem circle at var(--mx) var(--my), rgba(232, 162, 60, 0.20), transparent 70%);
}
.glow.on { opacity: 1; }

.stage {
  position: relative;
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(0.25rem, 2vmin, 1.25rem);
  padding: 2rem 1rem;
}

.logo {
  width: min(78vw, 30rem);
  height: auto;
  animation: rise 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both, float 7s ease-in-out 1.4s infinite;
  filter: drop-shadow(0 1.5rem 2rem rgba(31, 61, 58, 0.14));
}

.word {
  margin: 0;
  display: flex;
  font-family: var(--display);
  font-size: clamp(4.5rem, 17vw, 11rem);
  font-weight: 560;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  line-height: 0.95;
  letter-spacing: -0.02em;
  /* copper light sweeps across the forest-green letters */
  background: linear-gradient(105deg, var(--forest) 38%, var(--copper) 49%, #f2c14e 52%, var(--copper) 55%, var(--forest) 66%) 0 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 6.5s ease-in-out 2.2s infinite;
}

.word span {
  display: inline-block;
  animation: letter 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(0.55s + var(--i) * 0.08s);
}

canvas#glitter {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 10;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(1.5rem) scale(0.94); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.6rem); }
}

@keyframes letter {
  from { opacity: 0; transform: translateY(0.45em) rotate(4deg); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes sheen {
  0%, 12%  { background-position: 100% 0; }
  58%, 100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .logo, .word, .word span { animation: none; }
  .word { background-position: 0 0; }
  .glow { display: none; }
  canvas#glitter { display: none; }
}