/* ══ THEME BUTTON ═══════════════════════════════════════ */
.theme-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--border-lt);
  background: var(--surface2);
  color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .98rem; position: relative; overflow: hidden;
  transition: border-color .3s, background .3s, color .3s, box-shadow .3s;
  flex-shrink: 0;
}
.theme-btn:hover {
  border-color: var(--purple-lt);
  color: var(--text);
  box-shadow: 0 0 14px var(--glow);
}
[data-theme="light"] .theme-btn {
  box-shadow: 0 2px 10px var(--glow);
}
.theme-btn-icon {
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.ti-icon-out {
  animation: tiIconOut .3s cubic-bezier(.4,0,.2,1) forwards;
}
.ti-icon-in {
  animation: tiIconIn .42s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes tiIconOut {
  to { transform: rotate(200deg) scale(0); opacity: 0; }
}
@keyframes tiIconIn {
  from { transform: rotate(-160deg) scale(0); opacity: 0; }
  to   { transform: rotate(0) scale(1); opacity: 1; }
}

/* light mode — sun yellow */
[data-theme="light"] .theme-btn .fa-sun { color: #d97706; }

/* ══ INTRO OVERLAY ══════════════════════════════════════ */
#themeIntro {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--ti-bg, #07041a);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; overflow: hidden;
}
#themeIntro.ti-show {
  pointer-events: all;
  animation: tiOverlay 1.38s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes tiOverlay {
  0%  { opacity: 0; }
  12% { opacity: 1; }
  72% { opacity: 1; }
  100%{ opacity: 0; }
}

/* Rings */
.ti-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(109,40,217,.3);
  pointer-events: none; opacity: 0;
}
.ti-ring-1 { width: 260px; height: 260px; border-color: rgba(212,175,55,.3); }
.ti-ring-2 { width: 400px; height: 400px; }
.ti-ring-3 { width: 570px; height: 570px; border-color: rgba(212,175,55,.18); }
.ti-ring-4 { width: 760px; height: 760px; opacity: 0; border-color: rgba(109,40,217,.15); }

.ti-show .ti-ring   { animation: tiRing 1.38s cubic-bezier(.4,0,.2,1) forwards; }
.ti-show .ti-ring-1 { animation-delay: .0s;  }
.ti-show .ti-ring-2 { animation-delay: .06s; }
.ti-show .ti-ring-3 { animation-delay: .12s; }
.ti-show .ti-ring-4 { animation-delay: .18s; }

@keyframes tiRing {
  0%  { transform: scale(.25); opacity: 0; }
  25% { opacity: .9; }
  68% { transform: scale(1);   opacity: .7; }
  100%{ transform: scale(1.2); opacity: 0; }
}

/* Sweep */
.ti-sweep {
  position: absolute; top: 0; left: -65%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  pointer-events: none;
}
.ti-show .ti-sweep { animation: tiSweep 1.38s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes tiSweep { 0%{ left:-65% } 100%{ left:160% } }

/* Canvas */
#themeIntroCanvas { position: absolute; inset: 0; pointer-events: none; }

/* Center */
.ti-center {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0;
}
.ti-show .ti-center {
  animation: tiCenter 1.38s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes tiCenter {
  0%  { opacity: 0; transform: scale(.72) translateY(18px); filter: blur(10px); }
  25% { opacity: 1; transform: scale(1.03) translateY(0);  filter: blur(0); }
  72% { opacity: 1; transform: scale(1) translateY(0);     filter: blur(0); }
  100%{ opacity: 0; transform: scale(1.07) translateY(-10px); filter: blur(5px); }
}

.ti-logo {
  width: clamp(72px, 14vw, 120px);
  height: clamp(72px, 14vw, 120px);
  object-fit: contain; border-radius: 50%;
  filter: drop-shadow(0 0 22px rgba(212,175,55,.5))
          drop-shadow(0 0 50px rgba(109,40,217,.4));
}
.ti-sym {
  font-size: .9rem; color: var(--purple-lt);
  letter-spacing: 18px; opacity: .7;
}
.ti-name {
  font-family: 'Jim Nightshade', cursive;
  font-size: clamp(2.8rem, 8vw, 5.4rem);
  color: var(--gold-lt);
  text-shadow: 0 0 30px rgba(212,175,55,.5), 0 0 70px rgba(212,175,55,.25);
  letter-spacing: 5px; line-height: 1;
}
.ti-mode {
  font-size: .76rem; color: var(--text-muted);
  letter-spacing: 5px; text-transform: uppercase; margin-top: 2px;
}

/* Light mode ring tint */
[data-theme="light"] .ti-ring { border-color: rgba(109,40,217,.2); }