:root{
  --bg: #121210;
  --bg-2: #1b1a15;
  --paper: #ece6d8;
  --paper-dim: #b9b09b;
  --accent: #a78a52;
  --line: rgba(236,230,216,0.14);
  --glow: rgba(167,138,82,0.16);
}

*{ box-sizing:border-box; }

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

body{
  background:
    radial-gradient(1200px 800px at 50% 45%, var(--bg-2) 0%, var(--bg) 70%);
  color:var(--paper);
  font-family:'Shippori Mincho', serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* faint paper grain, purely decorative */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode:overlay;
  background-image:
    repeating-linear-gradient(0deg, #fff 0px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, #fff 0px, transparent 1px, transparent 2px);
}

.stage{
  position:relative;
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.glow{
  position:absolute;
  width:min(60vw, 520px);
  height:min(60vw, 520px);
  border-radius:50%;
  background:radial-gradient(circle, var(--glow) 0%, transparent 70%);
  filter:blur(6px);
  animation:breathe 6s ease-in-out infinite;
  pointer-events:none;
}

@keyframes breathe{
  0%, 100%{ opacity:0.55; transform:scale(0.96); }
  50%{ opacity:1; transform:scale(1.04); }
}

.mark{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px, 3vw, 28px);
}

.name{
  margin:0;
  display:flex;
  gap:clamp(6px, 2vw, 18px);
  font-weight:500;
  font-size:clamp(2.6rem, 9vw, 6.2rem);
  letter-spacing:clamp(4px, 1.2vw, 14px);
  color:var(--paper);
  text-shadow:0 0 40px rgba(167,138,82,0.25);
}

.ch{
  display:inline-block;
  opacity:0;
  transform:translateY(14px);
  animation:rise 1.1s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(0.28s + var(--i) * 0.22s);
}

@keyframes rise{
  to{ opacity:1; transform:translateY(0); }
}

.stroke{
  width:clamp(120px, 22vw, 220px);
  height:12px;
  overflow:visible;
}

.stroke path{
  fill:none;
  stroke:var(--accent);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-dasharray:260;
  stroke-dashoffset:260;
  animation:draw 1.4s cubic-bezier(.65,0,.35,1) forwards;
  animation-delay:1.05s;
}

@keyframes draw{
  to{ stroke-dashoffset:0; }
}

.corner{
  position:absolute;
  width:26px;
  height:26px;
  border:1px solid var(--line);
  opacity:0;
  animation:fadein 1.4s ease forwards;
  animation-delay:1.6s;
}
.corner--tl{ top:28px; left:28px; border-right:none; border-bottom:none; }
.corner--tr{ top:28px; right:28px; border-left:none; border-bottom:none; }
.corner--bl{ bottom:28px; left:28px; border-right:none; border-top:none; }
.corner--br{ bottom:28px; right:28px; border-left:none; border-top:none; }

@keyframes fadein{
  to{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .ch, .stroke path, .corner, .glow{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    stroke-dashoffset:0 !important;
  }
}

@media (max-width: 480px){
  .corner{ width:18px; height:18px; }
  .corner--tl, .corner--tr{ top:18px; }
  .corner--bl, .corner--br{ bottom:18px; }
  .corner--tl, .corner--bl{ left:18px; }
  .corner--tr, .corner--br{ right:18px; }
}