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

:root {
  --bg: #141210;
  --text: #d4c8bc;
  --link: #c49060;
  --link-hover: #ff4632;
  --text-glow: rgba(196, 144, 96, 0.4);
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Georgia', 'Times New Roman', serif;
  overflow: hidden;
}

/* ── Scene ── */
.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.scene::before {
  content: '';
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.032;
  animation: grain-shift 8s steps(1) infinite;
  pointer-events: none;
}

/* ── Orbs ── */
.orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ── Spark ── */
.spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: opacity, transform;
  pointer-events: none;
  animation: spark-pulse 10s ease-in-out infinite;
}

/* ── Main content ── */
main {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 1.1rem;
  text-align: center;
  padding: 2rem;
}

h1 {
  font-size: clamp(2rem, 6vw, 3.8rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--text);
  text-shadow: 0 0 40px var(--text-glow);
  user-select: none;
}

a {
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  color: var(--link);
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: color 0.4s, text-shadow 0.4s;
}

a:hover, a:focus-visible {
  color: var(--link-hover);
  text-shadow: 0 0 24px currentColor;
  outline: none;
}

/* ── Keyframes ── */
@keyframes drift-ne {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, -28px) scale(1.06); }
  100% { transform: translate(55px, -48px) scale(1.12); }
}

@keyframes drift-sw {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-32px, 26px) scale(0.94); }
  100% { transform: translate(-62px, 52px) scale(0.88); }
}

@keyframes drift-nw {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-26px, -30px) scale(1.04); }
  100% { transform: translate(-50px, -58px) scale(1.08); }
}

@keyframes drift-se {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(24px, 32px) scale(1.05); }
  100% { transform: translate(48px, 60px) scale(1.1); }
}

@keyframes drift-slow {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -42px) scale(1.03); }
  66%  { transform: translate(-35px, 22px) scale(0.97); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes drift-float {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(10px, -18px) scale(1.02); }
  100% { transform: translate(18px, -32px) scale(1.04); }
}

@keyframes spark-pulse {
  0%, 100% { opacity: 0.05; transform: translate(-50%, -50%) scale(0.6); }
  44%       { opacity: 0.08; transform: translate(-50%, -50%) scale(0.7); }
  48%, 52%  { opacity: 1;    transform: translate(-50%, -50%) scale(1); }
  56%       { opacity: 0.08; transform: translate(-50%, -50%) scale(0.7); }
}

@keyframes grain-shift {
  0%  { transform: translate(0, 0); }
  10% { transform: translate(-2%, -3%); }
  20% { transform: translate(3%, 1%); }
  30% { transform: translate(-1%, 4%); }
  40% { transform: translate(2%, -2%); }
  50% { transform: translate(-3%, 2%); }
  60% { transform: translate(1%, -4%); }
  70% { transform: translate(4%, 1%); }
  80% { transform: translate(-2%, 3%); }
  90% { transform: translate(2%, -1%); }
}

@media (max-width: 520px) {
  main { gap: 0.8rem; }
}