/* Amen — minimal static page
Palette:
- Warm cream (bg): #F9F7F2
- Muted gold (accent/text): #D9BF99
- Radiant gold (glow): #FCE5BF
- Darker gold (pressed): #B8966B
- Shadow (8% black): rgba(0,0,0,0.08)
Typography: SF Pro where available via system stack.
*/
:root{
  --bg:#F9F7F2;
  --gold:#D9BF99;
  --gold-radiant:#FCE5BF;
  --gold-dark:#B8966B;
  --shadow:0 10px 40px rgba(0,0,0,0.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:rgba(217,191,153,0.92);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.container{
  position:relative;
  display:grid;
  place-items:center;
  min-height:70vh;
  width:100%;
  padding:48px 24px;
}
.title{
  margin:0;
  letter-spacing:0.04em;
  font-weight:700;
  font-size: clamp(64px, 12vw, 160px);
  line-height:1;
  color: rgba(217,191,153,0.96); /* muted gold at high opacity */
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* Golden halo ring with three states */
.halo{
  position:absolute;
  width:min(70vmin, 700px);
  height:min(70vmin, 700px);
  border-radius:50%;
  pointer-events:none;
  /* idle ring: fine-line circle in muted gold @ 20% */
  box-shadow: inset 0 0 0 2px rgba(217,191,153,0.2);
  transition: filter 600ms ease, box-shadow 600ms ease, opacity 600ms ease;
  opacity:1;
  /* subtle idle shimmer */
  animation: idlePulse 6s ease-in-out infinite;
}

@keyframes idlePulse{
  0%,100%{ filter: blur(0px); opacity:1}
  50%{ filter: blur(0.6px); opacity:0.95}
}

/* listening: gentle pulsing radiant-gold glow */
.halo[data-state="listening"]{
  box-shadow:
    inset 0 0 0 2px rgba(217,191,153,0.25),
    0 0 40px 10px rgba(252,229,191,0.35),
    0 0 120px 40px rgba(252,229,191,0.22);
  animation: listeningPulse 3s ease-in-out infinite;
}
@keyframes listeningPulse{
  0%,100%{ transform: scale(1.0); filter: blur(2px) }
  50%{ transform: scale(1.03); filter: blur(3px) }
}

/* speaking: steadier, brighter glow */
.halo[data-state="speaking"]{
  box-shadow:
    inset 0 0 0 2px rgba(217,191,153,0.35),
    0 0 60px 16px rgba(252,229,191,0.55),
    0 0 160px 60px rgba(252,229,191,0.35);
  animation: speakingGlow 2.2s ease-in-out infinite;
}
@keyframes speakingGlow{
  0%,100%{ transform: scale(1.02); filter: blur(3px) }
  50%{ transform: scale(1.05); filter: blur(4px) }
}

.foot{
  width:100%;
  display:flex;
  justify-content:center;
  padding: 12px 16px 24px;
  color: rgba(217,191,153,0.7);
  font-size:14px;
}

/* prefers-reduced-motion: respect accessibility */
@media (prefers-reduced-motion: reduce){
  .halo{ animation: none }
}