/*
 * NEPA B2B Connect: the approved countdown prototype, scoped.
 * Everything lives under .nbc-scene (the intro), .nbc-replay or .nbc-page
 * (the show page) so the rest of the site keeps its own styling. Classes that
 * Bootstrap also owns (btn, clock, wrap...) are prefixed nbc-.
 * Colours arrive as --nbc-* custom properties set from the backend.
 */
.nbc-scene, .nbc-replay, .nbc-page {
  --nbc-bg: #0d1249;
  --nbc-bg-alt: #111866;
  --nbc-accent: #36ace1;
  --nbc-button: #0a76ae;
  --nbc-digits: #ffb347;
  --nbc-text: #eef2f7;
  --nbc-logo-card: #ffffff;
  --nbc-muted: #9aa7b8;
  --nbc-soft: #c3ccd9;
  --nbc-head: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --nbc-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nbc-led: "Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
}
.nbc-scene *, .nbc-scene *::before, .nbc-scene *::after,
.nbc-page *, .nbc-page *::before, .nbc-page *::after { box-sizing: border-box; }

html.nbc-locked, html.nbc-locked body { overflow: hidden !important; }

/* ---------- INTRO SCENE ---------- */
.nbc-scene {
  position: fixed; inset: 0; z-index: 2050;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 40%, var(--nbc-bg) 0%, var(--nbc-bg) 60%, color-mix(in srgb, var(--nbc-bg) 62%, #000) 100%);
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  overflow: hidden;
  color: var(--nbc-text); font-family: var(--nbc-body); line-height: 1.55;
  color-scheme: dark;
}
.nbc-scene::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(154,167,184,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,167,184,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at center, #000 20%, transparent 75%);
}
.nbc-scene.leave { opacity: 0; transform: scale(1.06); transition: opacity .9s ease, transform 1s ease; pointer-events: none; }
.nbc-scene.is-hidden { display: none !important; }

.nbc-scene .nbc-days-layer { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; opacity: 0; transition: opacity .8s ease; z-index: 4; }
.nbc-scene.daysin .nbc-days-layer { opacity: 1; }
.nbc-scene .nbc-daysbox { display: grid; justify-items: center; gap: 4px; padding: 0 20px; }
.nbc-scene .nbc-daysnum {
  font-family: var(--nbc-head); font-weight: 800; line-height: .85;
  font-size: clamp(150px, 38vw, 340px); color: #fff; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.nbc-scene .nbc-dayslbl { font-family: var(--nbc-head); font-weight: 800; font-size: clamp(44px, 10vw, 96px); line-height: 1; color: var(--nbc-accent); }
.nbc-scene .nbc-daysuntil { margin: 14px 0 0; font-size: clamp(16px, 2.6vw, 21px); color: var(--nbc-soft); }
.nbc-scene .nbc-hms { margin: 6px 0 0; font-family: var(--nbc-led); font-size: clamp(18px, 3vw, 24px); color: var(--nbc-digits); text-shadow: 0 0 10px color-mix(in srgb, var(--nbc-digits) 40%, transparent); }

.nbc-scene .nbc-skip {
  position: absolute; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 6;
  font: 500 14px var(--nbc-body); color: var(--nbc-muted);
  background: transparent; border: 1px solid rgba(154,167,184,.35);
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
  text-transform: none; letter-spacing: normal; line-height: 1.55;
}
.nbc-scene .nbc-skip:hover { color: var(--nbc-text); border-color: var(--nbc-muted); }
.nbc-scene .nbc-skip:focus-visible, .nbc-page .nbc-btn:focus-visible, .nbc-page a:focus-visible, .nbc-replay:focus-visible {
  outline: 3px solid var(--nbc-accent); outline-offset: 3px;
}

/* ---------- LOGO SCATTER / ASSEMBLE ---------- */
.nbc-scene .nbc-logo-layer { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; pointer-events: none; }
.nbc-scene .nbc-logo-card {
  width: min(90vw, 660px); background: var(--nbc-logo-card); border-radius: 18px;
  padding: clamp(14px, 3vw, 28px); opacity: 0; transform: scale(.96);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  transition: opacity .6s ease, transform .6s ease;
}
.nbc-scene .nbc-logo-card svg { width: 100%; height: auto; display: block; overflow: visible; }
.nbc-scene .pc { transform-box: fill-box; transform-origin: center; opacity: 0;
      transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.6); }
.nbc-scene.assemble .nbc-logo-card { opacity: 1; transform: scale(1); }
.nbc-scene.assemble .pc {
  opacity: 1; transform: none;
  transition: transform 1.5s cubic-bezier(.2,.85,.25,1) calc(var(--i) * 45ms), opacity .5s ease calc(var(--i) * 45ms);
}
.nbc-scene.explode .nbc-logo-card { opacity: 0; transform: scale(.92); transition: opacity .7s ease .55s, transform .9s ease .3s; }
.nbc-scene.explode .pc {
  opacity: 0; transform: translate(calc(var(--dx) * -1.2), calc(var(--dy) * -1.2)) rotate(calc(var(--r) * -1.4)) scale(.5);
  transition: transform 1.1s cubic-bezier(.55,0,.9,.5) calc(var(--i) * 22ms), opacity .9s ease .25s;
}

/* ---------- REPLAY ---------- */
.nbc-replay {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1040;
  font: 500 14px var(--nbc-body); color: var(--nbc-text);
  background: color-mix(in srgb, var(--nbc-bg) 80%, #fff 8%); border: 1px solid rgba(240,194,107,.5);
  padding: 10px 18px; border-radius: 999px; cursor: pointer; line-height: 1.55;
  text-transform: none; letter-spacing: normal;
}
.nbc-replay:hover { background: #1d2f4d; }
.nbc-replay[hidden], body.editor_enable .nbc-replay, body.editor_enable .nbc-scene { display: none !important; }

/* ---------- SHOW PAGE ---------- */
.nbc-page {
  background: var(--nbc-bg); color: var(--nbc-text);
  font-family: var(--nbc-body); line-height: 1.55; font-size: 16px;
  color-scheme: dark;
}
.nbc-page a { color: inherit; }


.nbc-page .nbc-hero {
  padding: clamp(48px, 9vw, 120px) clamp(18px, 5vw, 56px) clamp(40px, 7vw, 90px);
  background:
    radial-gradient(ellipse at 80% 0%, color-mix(in srgb, var(--nbc-accent) 16%, transparent), transparent 55%),
    var(--nbc-bg);
}
.nbc-page .nbc-wrap { max-width: 1080px; margin: 0 auto; }
.nbc-page :where(h1, h2, h3) {
  font-family: var(--nbc-head); font-weight: 800; line-height: .98; margin: 0; letter-spacing: .005em; color: inherit;
}
.nbc-page .nbc-hero h1 { font-size: clamp(54px, 11vw, 132px); }
.nbc-page .nbc-hero h1 em { font-style: normal; color: var(--nbc-accent); }
.nbc-page .nbc-lede { max-width: 46ch; font-size: clamp(17px, 2.2vw, 21px); color: var(--nbc-soft); margin: 22px 0 36px; }

.nbc-page .nbc-clock { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; }
.nbc-page .nbc-seg {
  min-width: 92px; padding: 14px 16px 10px; text-align: center;
  background: #050a12; border: 1px solid #25344d; border-radius: 6px;
  box-shadow: inset 0 0 18px rgba(0,0,0,.7);
}
.nbc-page .nbc-seg b { display: block; font-family: var(--nbc-led); font-weight: 400; font-size: clamp(34px, 6vw, 54px); color: var(--nbc-digits); line-height: 1.1; text-shadow: 0 0 12px color-mix(in srgb, var(--nbc-digits) 45%, transparent); }
.nbc-page .nbc-seg span { font-size: 13px; color: var(--nbc-muted); }
.nbc-page .nbc-clock-note { font-size: 13px; color: var(--nbc-muted); margin: 0 0 34px; }

.nbc-page .nbc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.nbc-page .nbc-btn {
  display: inline-block; padding: 14px 26px; border-radius: 4px; text-decoration: none;
  font-weight: 600; font-size: 16px; line-height: 1.55; border: 1px solid var(--nbc-accent); cursor: pointer;
  text-transform: none; letter-spacing: normal;
}
.nbc-page .nbc-btn-primary { background: var(--nbc-button); border-color: var(--nbc-button); color: #fff; }
.nbc-page .nbc-btn-primary:hover { background: color-mix(in srgb, var(--nbc-button) 85%, #fff); color: #fff; }
.nbc-page .nbc-btn-ghost { color: var(--nbc-accent); background: transparent; }
.nbc-page .nbc-btn-ghost:hover { background: color-mix(in srgb, var(--nbc-accent) 12%, transparent); color: var(--nbc-accent); }

/* Starting sections in the drop zone (editable; any block can go between them). */
.nbc-page .nbc-block { padding: clamp(40px, 7vw, 84px) clamp(18px, 5vw, 56px); border-top: 1px solid rgba(154,167,184,.12); }
.nbc-page .nbc-block h2 { font-size: clamp(36px, 6vw, 64px); margin-bottom: 16px; }
.nbc-page .nbc-block p { font-size: 16px; max-width: 58ch; color: var(--nbc-soft); margin: 0 0 22px; }
.nbc-page .nbc-alt { background-color: var(--nbc-bg-alt); }
.nbc-page .nbc-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.nbc-page .nbc-social a {
  padding: 10px 20px; border: 1px solid rgba(154,167,184,.3); border-radius: 999px;
  text-decoration: none; font-size: 15px;
}
.nbc-page .nbc-social a:hover { border-color: var(--nbc-accent); color: var(--nbc-accent); }


@media (max-width: 560px) {
  .nbc-page .nbc-seg { min-width: calc(50% - 6px); }
}
@media (prefers-reduced-motion: reduce) {
  .nbc-scene .pc, .nbc-scene .nbc-logo-card, .nbc-scene .nbc-days-layer { transition-duration: .01s !important; transition-delay: 0s !important; }
  .nbc-scene.leave { transition-duration: .2s; transform: none; }
}