/* Intro splash shared by the user panel and the admin console — same video,
   logo and settings as the public website (Admin Console > Website). */
.ot-intro {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, #0A0B2E 0%, #120C3A 40%, #1A0E3F 70%, #07122E 100%);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif; color: #EDF1FF;
  transition: opacity .7s ease, visibility .7s;
}
:root[data-theme="light"] .ot-intro { background: linear-gradient(180deg, #E9E7FF 0%, #E4F4FF 45%, #F7E8FB 100%); color: #0E1433; }
.ot-intro::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 400px at 50% 45%, rgba(139, 92, 246, .35), transparent 70%),
              radial-gradient(500px 300px at 15% 90%, rgba(34, 211, 238, .25), transparent 70%),
              radial-gradient(500px 300px at 85% 90%, rgba(236, 72, 153, .22), transparent 70%);
}
.ot-intro.done { opacity: 0; visibility: hidden; pointer-events: none; }
.ot-intro video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .5s; }
.ot-intro.has-video video { opacity: 1; }
.ot-intro.has-video .ot-intro-logo { opacity: 0; }
.ot-intro-logo { position: relative; display: grid; place-items: center; gap: 16px; text-align: center; transition: opacity .4s; }
.ot-intro-mark {
  width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, #22D3EE, #A855F7 55%, #EC4899); color: #fff;
  font: 800 40px "Plus Jakarta Sans", "Inter", sans-serif;
  box-shadow: 0 0 60px -6px rgba(139, 92, 246, .8), 0 30px 60px -20px rgba(236, 72, 153, .6);
  animation: ot-pop 1s cubic-bezier(.2, 1.4, .4, 1) both;
}
.ot-intro-mark.has-img { background: #fff; padding: 6px; }
.ot-intro-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.ot-intro-logo h1 { margin: 0; font: 800 44px "Plus Jakarta Sans", "Inter", sans-serif; letter-spacing: -.02em; animation: ot-rise .8s .35s both; }
.ot-intro-logo h1 b {
  background: linear-gradient(90deg, #22D3EE, #A78BFA 55%, #F472B6); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ot-intro-logo p { margin: 0; opacity: .7; animation: ot-rise .8s .55s both; }
.ot-intro-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: linear-gradient(90deg, #22D3EE, #A855F7, #EC4899); box-shadow: 0 0 14px rgba(168, 85, 247, .7); }
.ot-intro-btns { position: absolute; right: 22px; bottom: 22px; display: flex; gap: 8px; }
.ot-intro-btns button {
  height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer; font: 700 14px "Inter", sans-serif;
  color: inherit; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(8px);
}
.ot-intro-btns button:hover { border-color: #22D3EE; }
.ot-intro [hidden] { display: none !important; }
@keyframes ot-pop { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }
@keyframes ot-rise { from { transform: translateY(18px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ot-intro-mark, .ot-intro-logo h1, .ot-intro-logo p { animation: none; } }