:root{
  --black:        #060504;
  --black-deep:   #020202;
  --gold:         #c9a24a;
  --gold-light:   #f2d998;
  --gold-dim:     #7a611f;
  --ink:          #e9e0cb;
  --ink-dim:      #9a8f78;
  --line:         rgba(201,162,74,0.28);
  --ease: cubic-bezier(.16,.8,.24,1);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  min-height:100svh;
  background:
    radial-gradient(120% 90% at 50% -10%, #141009 0%, var(--black) 45%, var(--black-deep) 100%);
  color: var(--ink);
  font-family: 'Tajawal', sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-x:hidden;
  position:relative;
}

/* subtle film grain */
.noise{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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");
}

.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  box-shadow: inset 0 0 22vw 2vw rgba(0,0,0,0.85);
}

.stage{
  position:relative; z-index:2;
  width:100%;
  max-width:560px;
  padding: 8vh 28px 6vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* ---------- crest / logo ---------- */
.crest{
  position:relative;
  width: min(46vw, 220px);
  aspect-ratio:1/1;
  border-radius:50%;
  margin-bottom: 18px;
  animation: rise 1.1s var(--ease) both;
}
.crest::before{
  content:"";
  position:absolute; inset:-22%;
  border-radius:50%;
  background: radial-gradient(circle, rgba(201,162,74,0.35) 0%, rgba(201,162,74,0) 68%);
  filter: blur(2px);
  animation: pulse-glow 4.5s ease-in-out infinite;
  z-index:-1;
}
.crest-img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
  box-shadow:
    0 0 0 1px rgba(201,162,74,0.55),
    0 0 0 6px rgba(6,5,4,0.9),
    0 0 0 7px rgba(201,162,74,0.18),
    0 18px 50px -10px rgba(0,0,0,0.85);
}

@keyframes pulse-glow{
  0%,100%{ opacity:.55; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.06); }
}

/* ---------- wordmark ---------- */
.wordmark{
  font-family:'Cinzel', serif;
  font-weight:700;
  font-size: clamp(2.1rem, 7vw, 3.1rem);
  letter-spacing: 0.22em;
  margin: 0 0 8px;
  padding-inline-start: 0.22em; /* optical centering for letter-spacing */
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 18px rgba(201,162,74,0.25));
  animation: rise 1.1s .1s var(--ease) both;
}

.eyebrow{
  margin:0;
  font-family:'Tajawal', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  direction: ltr;
  animation: rise 1.1s .2s var(--ease) both;
}

.hairline{
  width:64px; height:1px;
  margin: 26px 0 22px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: widen 1.2s .3s var(--ease) both;
}

@keyframes widen{
  from{ width:0; opacity:0; }
  to{ width:64px; opacity:1; }
}

/* ---------- copy ---------- */
.lede{
  max-width: 440px;
  font-size: 1.02rem;
  line-height: 1.9;
  color: var(--ink);
  font-weight:300;
  margin: 0 0 34px;
  animation: rise 1.1s .35s var(--ease) both;
}
.lede-accent{
  color: var(--gold-light);
  font-weight:500;
}

/* ---------- CTA ---------- */
.cta{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 18px 52px;
  min-width: 280px;
  text-decoration:none;
  font-family:'Tajawal', sans-serif;
  font-weight:700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: #14100a;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 65%, var(--gold-dim));
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 12px 30px -8px rgba(201,162,74,0.55);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  animation: rise 1.1s .45s var(--ease) both;
}
.cta:hover{
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.45) inset,
    0 16px 40px -8px rgba(201,162,74,0.75);
}
.cta:active{ transform: translateY(0); }
.cta:focus-visible{
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
}
.cta-label{ position:relative; z-index:2; }
.cta-shine{
  position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  animation: shine 3.6s ease-in-out infinite;
  animation-delay: 1.4s;
}
@keyframes shine{
  0%{ left:-60%; }
  35%{ left:130%; }
  100%{ left:130%; }
}

/* ---------- discord handle ---------- */
.handle{
  margin-top: 26px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background: rgba(201,162,74,0.06);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: 'Tajawal', monospace, sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  direction: ltr;
  padding: 11px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .2s var(--ease);
  animation: rise 1.1s .55s var(--ease) both;
}
.handle:hover{
  border-color: var(--gold);
  background: rgba(201,162,74,0.1);
}
.handle:active{ transform: scale(0.98); }
.handle:focus-visible{
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}
.handle-dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  flex-shrink:0;
}
.handle-text{ color: var(--gold-light); font-weight:500; }
.handle-icon{ display:flex; color: var(--ink-dim); }
.handle.copied .handle-icon{ color: var(--gold-light); }

.handle-note{
  margin: 10px 0 0;
  font-size: 0.74rem;
  color: var(--ink-dim);
  min-height: 1em;
  transition: color .3s var(--ease);
  animation: rise 1.1s .6s var(--ease) both;
}
.handle-note.copied{ color: var(--gold-light); }

/* ---------- footer ---------- */
.foot{
  margin-top: 8vh;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: rgba(154,143,120,0.5);
  animation: rise 1.1s .7s var(--ease) both;
}

/* ---------- entrance ---------- */
@keyframes rise{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media (max-width: 380px){
  .cta{ min-width: 0; width:100%; padding:16px 20px; }
  .handle{ width:100%; justify-content:center; }
}