/* ---------- Intro overlay (pure CSS timeline, JS only removes it afterwards) ---------- */
.intro-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  overflow:hidden;
  animation:exoworoIntroGone 0s linear 2.7s forwards;
}

.intro-half{
  position:absolute;
  left:0;
  width:100%;
  height:50%;
}

.intro-top{
  top:0;
  background:var(--color-black);
  animation:exoworoIntroUp .9s cubic-bezier(.76,0,.24,1) 1.7s forwards;
}

.intro-bottom{
  bottom:0;
  background:var(--color-red);
  animation:exoworoIntroDown .9s cubic-bezier(.76,0,.24,1) 1.7s forwards;
}

.intro-text{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-ailerons);
  font-size:clamp(2.5rem,8vw,6rem);
  letter-spacing:.1em;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  opacity:0;
  animation:
    exoworoIntroText .9s var(--ease) .15s forwards,
    exoworoIntroTextOut .5s ease 1.55s forwards;
}

@keyframes exoworoIntroText{
  from{ opacity:0; transform:translate(-50%,-50%) scale(.96); }
  to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}

@keyframes exoworoIntroTextOut{
  to{ opacity:0; transform:translate(-50%,-50%) scale(1.15); }
}

@keyframes exoworoIntroUp{
  to{ transform:translateY(-101%); }
}

@keyframes exoworoIntroDown{
  to{ transform:translateY(101%); }
}

@keyframes exoworoIntroGone{
  to{ visibility:hidden; opacity:0; pointer-events:none; }
}

@media (prefers-reduced-motion:reduce){
  .intro-overlay{
    display:none;
  }
}

/* ---------- Profile ---------- */
.profile{
  padding-block:3rem;
}

.profile-grid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:2rem;
  align-items:start;
}

@media (max-width:800px){
  .profile-grid{
    grid-template-columns:1fr;
  }
}

.profile-side{
  padding:1.75rem 1.5rem;
  text-align:center;
}

.pfp-ring{
  position:relative;
  width:176px;
  height:176px;
  margin:0 auto 1.1rem;
  padding:5px;
  border-radius:50%;
  transition:transform .5s var(--ease);
}

.pfp-ring::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(var(--color-red), #3a0707, var(--color-red-bright), #3a0707, var(--color-red));
  animation:exoworoRingSpin 14s linear infinite;
}

@keyframes exoworoRingSpin{
  to{ transform:rotate(360deg); }
}

.pfp-stack{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  border-radius:50%;
  overflow:hidden;
  background:var(--color-bg-alt);
}

.pfp-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  animation:exoworoPfpFade 9s infinite;
}

.pfp-image:nth-child(1){animation-delay:0s;}
.pfp-image:nth-child(2){animation-delay:3s;}
.pfp-image:nth-child(3){animation-delay:6s;}

@keyframes exoworoPfpFade{
  0%{opacity:0; transform:scale(1.04);}
  12%{opacity:1;}
  33%{opacity:1; transform:scale(1);}
  45%{opacity:0; transform:scale(1);}
  100%{opacity:0; transform:scale(1);}
}

.profile-name{
  font-family:var(--font-jaya);
  text-transform:uppercase;
  font-size:1.25rem;
  letter-spacing:.04em;
  color:var(--color-text);
  margin-bottom:.35rem;
  transition:color .35s var(--ease-soft);
}

.profile-name:hover{
  color:var(--color-red-bright);
}

.profile-name.is-swapping{
  animation:exoworoNameSwap .45s var(--ease);
}

@keyframes exoworoNameSwap{
  0%{ opacity:0; transform:translateY(6px); }
  100%{ opacity:1; transform:none; }
}

.profile-pronouns{
  font-family:var(--font-orbitron);
  font-size:.82rem;
  color:var(--color-text-dim);
  margin-bottom:1rem;
}

.profile-quote{
  font-size:.95rem;
  color:var(--color-text-dim);
  font-style:italic;
  padding-top:1rem;
  border-top:1px solid var(--color-border);
  animation:exoworoFadeIn 1.2s ease .6s both;
}

.profile-quote span{
  display:block;
  margin-top:.35rem;
  font-style:normal;
  font-size:.8rem;
}

@keyframes exoworoFadeIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}

.profile-main{
  padding:2.25rem;
}

@media (max-width:520px){
  .profile-main{
    padding:1.5rem;
  }
}

/* Readable body copy for the bio */
.profile-bio{
  margin-bottom:1.15rem;
  max-width:68ch;
  color:#e9e9e9;
  font-family:var(--font-body);
  font-weight:400;
  font-size:1.08rem;
  line-height:1.85;
  letter-spacing:.005em;
}

.profile-bio a{
  color:var(--color-red-bright);
  background:linear-gradient(currentColor, currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .3s var(--ease);
}

.profile-bio a:hover{
  background-size:100% 1px;
}

.profile-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.75rem;
}

.profile-languages{
  margin-top:2.25rem;
  padding-top:1.5rem;
  border-top:1px solid var(--color-border);
  font-family:var(--font-orbitron);
}

.profile-languages h2{
  font-size:.95rem;
  margin-bottom:1rem;
  color:var(--color-text);
}

.language-flags{
  display:flex;
  gap:1rem;
}

.language-flag{
  position:relative;
  width:46px;
  height:30px;
  border-radius:5px;
  border:1px solid var(--color-border);
  transition:transform .4s var(--ease), border-color .3s var(--ease-soft);
}

.language-flag:hover{
  transform:translateY(-3px);
  border-color:var(--color-red);
}

.language-flag img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:4px;
}

.language-flag::after{
  content:attr(data-language);
  position:absolute;
  bottom:140%;
  left:50%;
  transform:translateX(-50%) translateY(4px);
  background:#000;
  border:1px solid var(--color-border);
  color:#fff;
  font-size:.7rem;
  padding:.25rem .55rem;
  border-radius:5px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .25s var(--ease);
}

.language-flag:hover::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}