.noppon-intro {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 18% 16%, rgba(109, 226, 160, .22), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(217, 164, 65, .2), transparent 28%),
    linear-gradient(145deg, #071c12 0%, #0b3b22 48%, #176c3c 100%);
  font-family: Kanit, system-ui, sans-serif;
  transition: opacity .45s ease, visibility .45s ease;
}
.noppon-intro.is-leaving { opacity: 0; visibility: hidden; }
.noppon-intro::before {
  content: "";
  position: absolute;
  inset: -25%;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(500px) rotateX(58deg) translateY(22%);
  animation: noppon-grid 4s linear infinite;
}
.noppon-intro__stage { position: relative; width: min(86vw, 620px); text-align: center; }
.noppon-intro__mark {
  position: relative;
  width: 116px;
  height: 116px;
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.06));
  box-shadow: 0 24px 70px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.35);
  backdrop-filter: blur(16px);
  animation: noppon-mark .8s cubic-bezier(.2,.8,.2,1) both;
}
.noppon-intro__mark::after {
  content: "";
  position: absolute;
  inset: -11px;
  border: 1px solid rgba(111, 228, 164, .45);
  border-radius: 40px;
  animation: noppon-ring 1.8s ease-out infinite;
}
.noppon-intro__mark span { font-size: 37px; font-weight: 800; letter-spacing: -.08em; transform: translateX(-2px); }
.noppon-intro__eyebrow { color: #80e3ac; font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; animation: noppon-rise .55s .25s both; }
.noppon-intro h1 { margin: 8px 0 4px; font-size: clamp(31px, 7vw, 58px); line-height: 1; letter-spacing: -.045em; animation: noppon-rise .65s .34s both; }
.noppon-intro p { margin: 0; color: rgba(255,255,255,.68); font-size: clamp(13px, 2.8vw, 17px); animation: noppon-rise .65s .44s both; }
.noppon-intro__line { width: min(280px, 72vw); height: 3px; margin: 31px auto 0; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.12); }
.noppon-intro__line i { display: block; height: 100%; width: 100%; transform-origin: left; background: linear-gradient(90deg, #74e1a5, #e2ad4d); animation: noppon-progress 2.25s .12s cubic-bezier(.2,.7,.2,1) both; }
.noppon-intro__symbol { position: absolute; color: rgba(255,255,255,.13); font: 700 clamp(24px, 5vw, 48px)/1 Georgia, serif; animation: noppon-float 3s ease-in-out infinite alternate; }
.noppon-intro__symbol--1 { left: 2%; top: 2%; }
.noppon-intro__symbol--2 { right: 5%; top: 14%; animation-delay: -.9s; }
.noppon-intro__symbol--3 { left: 8%; bottom: 8%; animation-delay: -1.6s; }
.noppon-intro__symbol--4 { right: 2%; bottom: 2%; animation-delay: -.4s; }
.noppon-intro__skip { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); padding: 9px 14px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: rgba(255,255,255,.78); background: rgba(0,0,0,.12); font: 500 13px Kanit, system-ui, sans-serif; cursor: pointer; }
.noppon-intro__skip:focus-visible { outline: 3px solid #e2ad4d; outline-offset: 3px; }
@keyframes noppon-grid { to { transform: perspective(500px) rotateX(58deg) translateY(calc(22% + 44px)); } }
@keyframes noppon-mark { from { opacity: 0; transform: scale(.7) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes noppon-ring { from { opacity: .75; transform: scale(.86); } to { opacity: 0; transform: scale(1.25); } }
@keyframes noppon-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes noppon-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes noppon-float { to { transform: translateY(-14px) rotate(7deg); } }
@media (prefers-reduced-motion: reduce) {
  .noppon-intro *, .noppon-intro::before { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Legacy backend setup helpers are intentionally unavailable in the MySQL-only release. */
.notification-rules-help,
.access-control-rules-help {
  display: none !important;
}