:root {
  color-scheme: dark;
  --bg: #09080d;
  --ink: #f3ede3;
  --muted: rgba(243, 237, 227, 0.62);
  --line: rgba(255,255,255,0.18);
  --warm: #c9a678;
  --cool: #9d8fc5;
  --size: min(52vw, 410px);
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
}

body {
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}

button { font: inherit; }

#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stage {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  isolation: isolate;
}

.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 47%, rgba(157,143,197,0.08), transparent 28%),
    radial-gradient(circle at 50% 62%, rgba(201,166,120,0.06), transparent 36%),
    linear-gradient(to bottom, rgba(255,255,255,0.018), transparent 35%, rgba(0,0,0,0.15));
  pointer-events: none;
}

.portal {
  position: relative;
  width: min(92vw, 920px);
  min-height: min(82svh, 760px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 34px;
  text-align: center;
  transform-style: preserve-3d;
}

.halo {
  position: absolute;
  left: 50%;
  top: 43%;
  width: calc(var(--size) * 1.55);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.22;
}

.halo-a {
  border: 1px solid rgba(255,255,255,0.09);
  animation: haloTurn 26s linear infinite;
}

.halo-a::before,
.halo-a::after,
.halo-b::before,
.halo-b::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.055);
}

.halo-a::after { inset: 23%; }

.halo-b {
  width: calc(var(--size) * 1.28);
  border: 1px dashed rgba(201,166,120,0.12);
  animation: haloTurnReverse 19s linear infinite;
}

.halo-b::before { inset: 14%; border-style: dashed; }
.halo-b::after { inset: 31%; }

.sigil {
  position: relative;
  width: var(--size);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  padding: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 44% 35%, rgba(255,255,255,0.12), transparent 16%),
    radial-gradient(circle at 54% 61%, rgba(157,143,197,0.15), transparent 26%),
    radial-gradient(circle at 50% 50%, rgba(10,9,15,0.96) 0 53%, rgba(201,166,120,0.08) 54% 57%, rgba(10,9,15,0.99) 58% 100%);
  cursor: pointer;
  outline-offset: 10px;
  transform: translateZ(0) scale(1);
  transition: transform 600ms cubic-bezier(.2,.8,.2,1), filter 600ms ease;
  box-shadow:
    inset 0 0 70px rgba(255,255,255,0.025),
    0 0 80px rgba(157,143,197,0.08);
}

.sigil::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background:
    conic-gradient(from 12deg,
      transparent 0 14%,
      rgba(201,166,120,0.12) 18%,
      transparent 26% 54%,
      rgba(157,143,197,0.12) 60%,
      transparent 68% 100%);
  filter: blur(8px);
  animation: breathe 7s ease-in-out infinite;
}

.sigil:hover,
.sigil:focus-visible {
  transform: scale(1.025);
  filter: brightness(1.08);
}

.sigil-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  pointer-events: none;
}

.ring-outer { inset: 2%; border-color: rgba(255,255,255,0.12); }
.ring-mid { inset: 11%; border-color: rgba(201,166,120,0.16); animation: ringPulse 5.5s ease-in-out infinite; }
.ring-inner { inset: 24%; border-color: rgba(157,143,197,0.14); animation: ringPulse 5.5s 1.1s ease-in-out infinite; }

.monogram {
  position: absolute;
  inset: 17%;
  width: 66%;
  height: 66%;
  overflow: visible;
  filter: url(#softGlow);
}

.glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 0;
  opacity: 0.96;
  transition: stroke 700ms ease, opacity 700ms ease;
}

.glyph-p { stroke: rgba(243,237,227,0.96); }
.glyph-d { stroke: rgba(201,166,120,0.93); }

.seed {
  fill: var(--ink);
  transform-origin: center;
  animation: seedPulse 3.8s ease-in-out infinite;
}
.seed-b { fill: var(--warm); animation-delay: 1.9s; }

.copy {
  display: grid;
  gap: 10px;
  max-width: 640px;
  opacity: 0.94;
  transform: translateY(0);
  transition: opacity 900ms ease, transform 900ms cubic-bezier(.2,.8,.2,1);
}

.eyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.36em;
  color: rgba(243,237,227,0.68);
}

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 4.65rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.subcopy {
  margin: 4px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--muted);
}

.whisper {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  font-size: 0.69rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(243,237,227,0.38);
  transition: color 600ms ease, opacity 600ms ease;
}

body.awake .sigil {
  transform: scale(1.055) rotate(0.001deg);
}

body.awake .glyph {
  stroke-dashoffset: -340;
  transition: stroke-dashoffset 1500ms cubic-bezier(.6,0,.2,1), stroke 700ms ease;
}

body.awake .copy {
  opacity: 0;
  transform: translateY(12px);
}

body.awake .halo-a { animation-duration: 7s; }
body.awake .halo-b { animation-duration: 5s; }
body.awake .whisper { color: rgba(243,237,227,0.82); }

body.reveal .glyph {
  stroke-dashoffset: 0;
}

@keyframes haloTurn {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes haloTurnReverse {
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes breathe {
  0%,100% { opacity: 0.42; transform: scale(0.98) rotate(0deg); }
  50% { opacity: 0.82; transform: scale(1.04) rotate(8deg); }
}

@keyframes ringPulse {
  0%,100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.025); opacity: 1; }
}

@keyframes seedPulse {
  0%,100% { transform: scale(0.75); opacity: 0.55; }
  50% { transform: scale(1.35); opacity: 1; }
}

@media (max-width: 640px) {
  :root { --size: min(78vw, 340px); }
  .portal { min-height: 84svh; gap: 28px; }
  .halo { top: 41%; }
  .eyebrow { letter-spacing: 0.28em; }
  .whisper { bottom: 1%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}