:root{
  --bg:#08080a;
  --fg:#f4f1ea;
  --dim:#84828a;
  --line:rgba(244,241,234,0.16);
  --line-soft:rgba(244,241,234,0.08);
  --accent:#e2b46a;
  --mx:50%;
  --my:42%;
}

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

html,body{
  height:100%;
  background:var(--bg);
  color:var(--fg);
}

body{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  overflow:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ambient layers */

.grid{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 78%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 78%);
  opacity:.55;
}

.glow{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(480px 480px at var(--mx) var(--my), rgba(226,180,106,0.10), transparent 62%);
  transition:background-position .1s linear;
}

.grain{
  position:fixed;
  inset:-20%;
  z-index:5;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* frame + corners */

.frame{
  position:relative;
  z-index:2;
  height:100dvh;
  padding:clamp(20px,4vw,44px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.corner{
  position:absolute;
  width:clamp(22px,3vw,32px);
  height:clamp(22px,3vw,32px);
  opacity:0;
  animation:fade-in .9s ease forwards;
  animation-delay:.15s;
}
.corner--tl{ top:clamp(20px,4vw,44px); left:clamp(20px,4vw,44px); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.corner--tr{ top:clamp(20px,4vw,44px); right:clamp(20px,4vw,44px); border-top:1px solid var(--line); border-right:1px solid var(--line); text-align:right; }
.corner--bl{ bottom:clamp(20px,4vw,44px); left:clamp(20px,4vw,44px); border-bottom:1px solid var(--line); border-left:1px solid var(--line); }
.corner--br{ bottom:clamp(20px,4vw,44px); right:clamp(20px,4vw,44px); border-bottom:1px solid var(--line); border-right:1px solid var(--line); text-align:right; }

.mark{
  position:absolute;
  top:10px;
  left:10px;
  font-family:'Fraunces',serif;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--dim);
}

.meta{
  position:absolute;
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
  white-space:nowrap;
}
.corner--tr .meta{ top:10px; right:10px; }
.corner--bl .meta{ bottom:10px; left:10px; }
.corner--br .meta{ bottom:10px; right:10px; }

/* center stage */

.stage{
  display:flex;
  align-items:center;
  gap:clamp(20px,4vw,40px);
  opacity:0;
  animation:rise 1s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:.35s;
}

.bar{
  width:3px;
  align-self:stretch;
  border-radius:2px;
  background:linear-gradient(180deg,#e2b46a,#7fd6c4 45%,#b090e6 75%,#e2b46a);
  background-size:100% 300%;
  animation:hologram 7s ease-in-out infinite;
  opacity:.85;
}

.name{
  font-family:'Fraunces',serif;
  font-weight:420;
  font-optical-sizing:auto;
  font-size:clamp(2.6rem,8.6vw,6.4rem);
  line-height:.98;
  letter-spacing:-.01em;
  display:flex;
  flex-direction:column;
}
.name span{display:block;}

.tag{
  margin-top:clamp(14px,2vw,20px);
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dim);
}

.links{
  margin-top:clamp(24px,3.6vw,36px);
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.links a{
  color:var(--fg);
  text-decoration:none;
  position:relative;
  padding-bottom:3px;
  transition:color .25s ease;
}
.links a::after{
  content:"";
  position:absolute;
  left:0; right:100%;
  bottom:0;
  height:1px;
  background:var(--accent);
  transition:right .3s cubic-bezier(.16,1,.3,1);
}
.links a:hover{color:var(--accent);}
.links a:hover::after{right:0;}

.dot{color:var(--dim);}

/* motion */

@keyframes fade-in{to{opacity:1;}}
@keyframes rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
@keyframes hologram{
  0%,100%{background-position:0 0%;}
  50%{background-position:0 100%;}
}

@media (max-width:520px){
  .stage{flex-direction:row; gap:16px;}
  .corner--tr .meta, .corner--bl .meta, .corner--br .meta{font-size:8.5px;}
}

@media (prefers-reduced-motion:reduce){
  .corner,.stage{animation:none; opacity:1;}
  .bar{animation:none;}
}