/* H&L出海 intro overlay — flashy glow edition (preview module; not wired to prod yet) */
:root{
  --hl-red:#E11D2E;
  --hl-red-soft:#FF4D5A;
  --hl-ink:#E8E8E8;
  --hl-muted:#8A8A8A;
  --hl-faint:#5C5C5C;
  --hl-bg:#050505;
  --hl-panel:#0C0C0C;
  --hl-line:#1f1f1f;
  --hl-light:#F5F5F7;
  --hl-light-ink:#111;
  --hl-glow:rgba(225,29,46,.55);
  --hl-glow-soft:rgba(255,77,90,.35);
  --hl-glow-white:rgba(255,255,255,.35);
}
.hl-intro{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 80% 55% at 50% 35%, rgba(225,29,46,.18), transparent 58%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255,255,255,.04), transparent 55%),
    var(--hl-bg);
  color:var(--hl-ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC","PingFang SC",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  opacity:1;transition:opacity .9s ease;
}
.hl-intro.is-done{opacity:0;pointer-events:none}
.hl-intro[hidden]{display:none!important}
.hl-intro-bloom{
  pointer-events:none;position:absolute;inset:-20%;
  background:
    radial-gradient(circle at 50% 42%, rgba(225,29,46,.22), transparent 42%),
    radial-gradient(circle at 30% 70%, rgba(255,77,90,.1), transparent 35%),
    radial-gradient(circle at 70% 25%, rgba(255,255,255,.06), transparent 28%);
  filter:blur(18px);opacity:.95;animation:hlBloomPulse 4.5s ease-in-out infinite;
}
.hl-intro-vignette{
  pointer-events:none;position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.55) 100%);
}
.hl-intro-grain{
  pointer-events:none;position:absolute;inset:0;opacity:.1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.hl-intro-scan{
  pointer-events:none;position:absolute;inset:0;opacity:.14;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.035) 3px);
}
.hl-intro-shell{
  position:relative;z-index:1;width:min(560px,92vw);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:18px;padding:28px 20px 24px;
}
.hl-intro-top{
  position:absolute;top:18px;left:20px;right:20px;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--hl-faint);font-weight:600;
  text-shadow:0 0 12px rgba(255,255,255,.15);
}
.hl-intro-skip{
  appearance:none;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:var(--hl-muted);
  font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:999px;cursor:pointer;
  backdrop-filter:blur(8px);box-shadow:0 0 16px rgba(225,29,46,.12);
}
.hl-intro-skip:hover{color:var(--hl-ink);border-color:rgba(225,29,46,.5);box-shadow:0 0 20px rgba(225,29,46,.35)}
.hl-intro-beat{display:none;width:100%;flex-direction:column;align-items:center;gap:16px;animation:hlIntroIn .65s cubic-bezier(.2,.8,.2,1) both}
.hl-intro-beat.is-on{display:flex}
@keyframes hlIntroIn{
  from{opacity:0;transform:translateY(14px) scale(.98);filter:blur(4px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes hlBloomPulse{
  0%,100%{opacity:.75;transform:scale(1)}
  50%{opacity:1;transform:scale(1.04)}
}
@keyframes hlLogoPulse{
  0%,100%{filter:drop-shadow(0 0 10px rgba(225,29,46,.45)) drop-shadow(0 0 28px rgba(225,29,46,.35)) drop-shadow(0 0 48px rgba(255,255,255,.12))}
  50%{filter:drop-shadow(0 0 16px rgba(225,29,46,.75)) drop-shadow(0 0 42px rgba(255,77,90,.55)) drop-shadow(0 0 64px rgba(255,255,255,.22))}
}
@keyframes hlTextShine{
  0%,100%{text-shadow:0 0 8px rgba(225,29,46,.35),0 0 22px rgba(225,29,46,.2)}
  50%{text-shadow:0 0 14px rgba(225,29,46,.7),0 0 36px rgba(255,77,90,.4),0 0 2px rgba(255,255,255,.5)}
}
@keyframes hlBtnGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 28px rgba(225,29,46,.45),0 0 40px rgba(225,29,46,.35)}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.25),0 10px 36px rgba(225,29,46,.65),0 0 60px rgba(255,77,90,.5)}
}
@keyframes hlRingAura{
  0%,100%{filter:drop-shadow(0 0 8px rgba(225,29,46,.45)) drop-shadow(0 0 24px rgba(225,29,46,.3))}
  50%{filter:drop-shadow(0 0 16px rgba(225,29,46,.85)) drop-shadow(0 0 40px rgba(255,77,90,.55))}
}
@keyframes hlBarShine{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(220%)}
}

.hl-intro-mark{
  width:96px;height:70px;display:grid;place-items:center;
  animation:hlLogoPulse 2.8s ease-in-out infinite;
}
.hl-intro-mark svg{width:96px;height:70px;display:block}
.hl-intro-title{
  margin:0;font-size:clamp(30px,5.2vw,44px);line-height:1.15;font-weight:750;letter-spacing:.12em;
  text-shadow:0 0 18px rgba(255,255,255,.18),0 2px 24px rgba(0,0,0,.55);
}
.hl-intro-title .hl-accent{
  color:var(--hl-red);
  text-shadow:0 0 10px rgba(225,29,46,.8),0 0 28px rgba(225,29,46,.55),0 0 48px rgba(255,77,90,.35);
  animation:hlTextShine 2.6s ease-in-out infinite;
}
.hl-intro-tag{
  margin:0;font-size:13px;line-height:1.55;color:var(--hl-muted);letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  text-shadow:0 0 12px rgba(255,255,255,.12);
}
.hl-intro-kicker{
  margin:0;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--hl-red);font-weight:800;
  text-shadow:0 0 10px rgba(225,29,46,.7),0 0 24px rgba(225,29,46,.4);
}
.hl-intro-h{
  margin:0;font-size:clamp(20px,3.6vw,28px);line-height:1.3;font-weight:700;letter-spacing:.06em;
  text-shadow:0 0 16px rgba(255,255,255,.12),0 0 28px rgba(225,29,46,.15);
}
.hl-intro-p{margin:0;font-size:13px;line-height:1.6;color:var(--hl-muted);max-width:42ch}
.hl-intro-panel{
  width:100%;border:1px solid rgba(225,29,46,.22);border-radius:18px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),
    rgba(12,12,12,.72);
  padding:18px 16px;text-align:left;
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 12px 40px rgba(0,0,0,.35),
    0 0 40px rgba(225,29,46,.12);
}
.hl-intro.is-light{
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(225,29,46,.1), transparent 55%),
    radial-gradient(ellipse 50% 35% at 80% 90%, rgba(255,77,90,.06), transparent 50%),
    var(--hl-light);
  color:var(--hl-light-ink);
}
.hl-intro.is-light .hl-intro-bloom{
  background:
    radial-gradient(circle at 50% 40%, rgba(225,29,46,.16), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(255,77,90,.08), transparent 40%);
  opacity:.85;
}
.hl-intro.is-light .hl-intro-vignette{
  background:radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.08) 100%);
}
.hl-intro.is-light .hl-intro-top,
.hl-intro.is-light .hl-intro-p,
.hl-intro.is-light .hl-intro-tag{color:#6B6B6B}
.hl-intro.is-light .hl-intro-skip{
  border-color:rgba(225,29,46,.2);color:#5C5C5C;background:rgba(255,255,255,.7);
  box-shadow:0 4px 16px rgba(225,29,46,.1);
}
.hl-intro.is-light .hl-intro-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));
  border-color:rgba(225,29,46,.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.8) inset,
    0 14px 36px rgba(225,29,46,.1),
    0 8px 28px rgba(0,0,0,.06);
}
.hl-intro.is-light .hl-intro-scan{opacity:.05;mix-blend-mode:multiply}
.hl-intro.is-light .hl-intro-h{
  color:#111;
  text-shadow:0 0 18px rgba(225,29,46,.12);
}
.hl-intro.is-light .hl-intro-kicker{
  color:var(--hl-red);
  text-shadow:0 0 12px rgba(225,29,46,.45);
}

.hl-intro-bar{
  position:relative;width:100%;height:4px;border-radius:999px;
  background:rgba(255,255,255,.08);overflow:hidden;margin-top:6px;
  box-shadow:0 0 12px rgba(225,29,46,.15) inset;
}
.hl-intro.is-light .hl-intro-bar{background:rgba(0,0,0,.08)}
.hl-intro-bar > i{
  position:relative;display:block;height:100%;width:0%;border-radius:inherit;
  background:linear-gradient(90deg,#8B101A,var(--hl-red),var(--hl-red-soft),#fff);
  box-shadow:0 0 12px rgba(225,29,46,.85),0 0 24px rgba(255,77,90,.55);
  transition:width .25s linear;
  overflow:hidden;
}
.hl-intro-bar > i::after{
  content:"";position:absolute;inset:0;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:hlBarShine 1.4s linear infinite;
}
.hl-intro-checks{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.hl-intro-checks li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:12px;letter-spacing:.04em;color:var(--hl-muted);
}
.hl-intro.is-light .hl-intro-checks li{color:#333}
.hl-intro-checks .st{font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.hl-intro-checks .st.ok{
  color:#1FA971;
  text-shadow:0 0 8px rgba(31,169,113,.65),0 0 16px rgba(31,169,113,.35);
}
.hl-intro-checks .st.wait{
  color:var(--hl-red);
  text-shadow:0 0 8px rgba(225,29,46,.75),0 0 16px rgba(255,77,90,.4);
}

.hl-intro-btn{
  appearance:none;border:none;cursor:pointer;font:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:13px 24px;border-radius:999px;
  background:linear-gradient(135deg,var(--hl-red-soft),var(--hl-red) 45%,#B01020);
  color:#fff;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0,0,0,.25),0 0 12px rgba(255,255,255,.25);
  animation:hlBtnGlow 2.4s ease-in-out infinite;
  transition:transform .15s ease,filter .15s ease;
}
.hl-intro-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.hl-intro-btn:active{transform:none}
.hl-intro-btn.ghost{
  background:transparent;color:inherit;border:1px solid currentColor;box-shadow:none;animation:none;opacity:.7;font-weight:700;
}
.hl-intro-fields{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.hl-intro-field{
  display:grid;grid-template-columns:88px 1fr;gap:10px;align-items:center;
  padding:10px 12px;border-radius:12px;border:1px solid rgba(225,29,46,.18);
  background:rgba(0,0,0,.28);
  box-shadow:0 0 16px rgba(225,29,46,.06) inset;
}
.hl-intro.is-light .hl-intro-field{
  background:linear-gradient(180deg,#fff,#F7F7F8);
  border-color:rgba(225,29,46,.14);
  box-shadow:0 4px 14px rgba(225,29,46,.06);
}
.hl-intro-field label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hl-faint);font-weight:700}
.hl-intro.is-light .hl-intro-field label{color:#8A8A8A}
.hl-intro-field .val{font-size:14px;font-weight:700;letter-spacing:.04em}
.hl-intro-badge{
  display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.14em;
  background:rgba(225,29,46,.16);color:var(--hl-red);border:1px solid rgba(225,29,46,.35);
  box-shadow:0 0 12px rgba(225,29,46,.25);text-shadow:0 0 8px rgba(225,29,46,.35);
}
.hl-intro-ring-wrap{
  position:relative;width:132px;height:132px;margin:8px auto;
  filter:drop-shadow(0 0 18px rgba(225,29,46,.45));
}
.hl-intro-ring-wrap::before{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  background:radial-gradient(circle, rgba(225,29,46,.28),transparent 68%);
  filter:blur(8px);animation:hlBloomPulse 2.2s ease-in-out infinite;z-index:0;
}
.hl-intro-ring{
  position:relative;z-index:1;width:132px;height:132px;border-radius:50%;
  background:
    radial-gradient(circle at center, transparent 52%, rgba(225,29,46,.2) 54% 57%, transparent 59%),
    conic-gradient(from -90deg, #fff 0%, var(--hl-red-soft), var(--hl-red) var(--p,0%), rgba(255,255,255,.08) 0);
  -webkit-mask:radial-gradient(circle at center, transparent 56%, #000 57.5%);
  mask:radial-gradient(circle at center, transparent 56%, #000 57.5%);
  animation:hlRingAura 2s ease-in-out infinite;
}
.hl-intro-ring-core{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  font-size:14px;font-weight:800;letter-spacing:.18em;color:var(--hl-red);
  text-shadow:0 0 10px rgba(225,29,46,.85),0 0 24px rgba(255,77,90,.5),0 0 2px #fff;
}
.hl-intro-welcome{
  font-size:clamp(22px,4.2vw,34px);letter-spacing:.18em;font-weight:780;margin:0;
  text-shadow:0 0 18px rgba(255,255,255,.2),0 0 32px rgba(225,29,46,.2);
}
.hl-intro-welcome em{
  font-style:normal;color:var(--hl-red);
  text-shadow:0 0 12px rgba(225,29,46,.85),0 0 32px rgba(255,77,90,.55),0 0 48px rgba(225,29,46,.35);
  animation:hlTextShine 2.4s ease-in-out infinite;
}
.hl-intro-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
.hl-intro-foot{
  margin-top:4px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--hl-faint);
  text-shadow:0 0 10px rgba(255,255,255,.1);
}
.hl-intro.is-light .hl-intro-foot{color:#8A8A8A}

.hl-intro.is-hold .hl-intro-beat{animation:none!important;opacity:1;transform:none;filter:none}
.hl-intro.is-hold .hl-intro-mark,
.hl-intro.is-hold .hl-intro-title .hl-accent,
.hl-intro.is-hold .hl-intro-btn,
.hl-intro.is-hold .hl-intro-ring,
.hl-intro.is-hold .hl-intro-bloom,
.hl-intro.is-hold .hl-intro-ring-wrap::before,
.hl-intro.is-hold .hl-intro-welcome em{animation:none!important}