/* ============================================================
 * intro.css — giao diện màn hình mở đầu. Nội dung chữ và thời gian
 * tải nằm ở js/config/intro.data.js để chỉnh sửa riêng, dễ tìm.
 * ============================================================ */
.intro-screen{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;
  background:radial-gradient(circle at 22% 18%,rgba(122,168,255,.16),transparent 34%),
    radial-gradient(circle at 80% 85%,rgba(231,201,138,.09),transparent 32%),rgba(5,7,13,.96);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  transition:opacity .42s var(--ease),visibility .42s var(--ease)}
.intro-screen.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.intro-card{width:min(510px,100%);padding:clamp(1.7rem,5vw,3rem);border:1px solid rgba(191,219,254,.18);border-radius:24px;
  background:linear-gradient(145deg,rgba(18,28,50,.88),rgba(7,11,22,.9));box-shadow:0 32px 100px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.05);
  position:relative;overflow:hidden}
.intro-card:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(143,227,234,.08),transparent 36%,rgba(122,168,255,.07));opacity:.85}
.intro-card>*{position:relative;z-index:1}
.intro-kicker{margin:0 0 .7rem;font:500 .65rem/1 var(--mono);letter-spacing:.16em;color:var(--cyan)}
.intro-title{margin:0;font-family:var(--display);font-size:clamp(2rem,7vw,3.5rem);line-height:1;letter-spacing:-.06em;
  background:linear-gradient(100deg,#fff 10%,#bcd4ff 58%,#8fe3ea);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro-subtitle{margin:.8rem 0 2rem;color:var(--muted);font-size:.92rem}
.intro-loader{display:grid;gap:.55rem}
.intro-status-row{display:flex;justify-content:space-between;gap:1rem;font:500 .7rem/1 var(--mono);color:#c8d6ee}
.intro-status-group{display:inline-flex;align-items:center;gap:.48rem;min-width:0;color:var(--blue);transition:color .25s var(--ease)}
.intro-status-dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;animation:statusPulse 1.15s ease-in-out infinite}
.intro-status-group[data-tone="cyan"]{color:var(--cyan)}
.intro-status-group[data-tone="gold"]{color:var(--gold)}
.intro-status-group[data-tone="green"]{color:#76dfad}
@keyframes statusPulse{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.intro-percent{color:var(--cyan)}
.intro-progress{height:5px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.intro-progress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 14px rgba(143,227,234,.75);transition:width .08s linear}
.intro-detail{min-height:2.5em;margin:.1rem 0 0;color:#9aa9c2;font-size:.73rem;line-height:1.55}
.intro-enter{width:100%;margin-top:1.6rem;padding:.83rem 1rem;border:1px solid rgba(143,227,234,.38);border-radius:12px;
  background:linear-gradient(135deg,rgba(122,168,255,.14),rgba(143,227,234,.12));color:#eef8ff;font:600 .78rem/1 var(--mono);letter-spacing:.04em;
  cursor:pointer;opacity:0;transform:translateY(9px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.intro-screen.is-ready .intro-enter{opacity:1;transform:translateY(0);pointer-events:auto}
.intro-enter:disabled{cursor:wait}.intro-enter:not(:disabled):hover,.intro-enter:not(:disabled):focus-visible{border-color:var(--cyan);background:linear-gradient(135deg,rgba(122,168,255,.28),rgba(143,227,234,.23));outline:none}
@media(max-width:480px){.intro-card{border-radius:20px}.intro-subtitle{margin-bottom:1.6rem}}