/* Use-case intro splash — header rains letter-by-letter, subheader fades, tap-to-continue gate.
   Monochrome, no glow. */

/* Anti-flash cover, painted from first parse via html.nlg-pre (set by an inline head script). */
html.nlg-pre::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 99997;
}
html.nlg-pre .container { opacity: 0; }

.nlg-ov {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px;
  text-align: center;
  overflow: hidden;
  transition: opacity .5s ease;
}
.nlg-ov.nlg-out { opacity: 0; pointer-events: none; }

.nlg-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 840px;
  text-align: center;
}
.nlg-line {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(22px, 4vw, 40px);
  letter-spacing: -.4px;
  line-height: 1.14;
  color: var(--text-primary);
  will-change: transform;
}
.nlg-sub {
  max-width: 720px;
  font-family: var(--font-mono);
  font-size: clamp(13px, 2.2vw, 18px);
  line-height: 1.5;
  color: var(--text-secondary);
  will-change: transform;
}

/* portal-style tap-to-continue (reuses .tap-hand/.tap-ring/.tap-hint from theme.css), monochrome */
.nlg-tap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--text-secondary);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.nlg-ov.ready { cursor: pointer; }
.nlg-ov.ready .nlg-tap { opacity: .9; transform: none; }
.nlg-tap .tap-hand { width: 40px; height: 40px; }
.nlg-tap .tap-ring { border-color: color-mix(in srgb, var(--text-secondary) 50%, transparent); }

.nlg-off {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s ease, border-color .2s ease;
}
.nlg-off:hover { opacity: 1; border-color: var(--text-secondary); }

/* page-unique eco scene (Gear-5): dome sky + arch flames + solar landscape + growing flowers. Hidden until .lit. */
.nlg-fire { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.nlg-fire.lit { opacity: 1; }

/* sky (top) — light default (sun + clouds + blue dome); dark overrides to starfield */
.sky { position: absolute; top: 0; left: 0; right: 0; height: 100%; overflow: hidden; }
.sky svg { width: 100%; height: 100%; display: block; }
.sky-light { background: linear-gradient(180deg, #3E7BD0 0%, #7FBBEF 46%, #CDE8FF 100%); }
.sky-dark { display: none; background: linear-gradient(180deg, #060c1c 0%, #0c1830 55%, #16345c 100%); }
.star, .dstar { fill: #fff; }
.dstar { opacity: .75; }
.dline { fill: none; stroke: #fff; stroke-width: 1; opacity: .2; }
.horizon { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1.4; }
.cloud ellipse, .cloud rect { fill: #fff; opacity: .92; }
.sun-logo {
  position: absolute; top: 34px; right: 15%; width: 108px; height: 108px;
  background-image: linear-gradient(135deg, #FFDA4A 0%, #FF9500 55%, #FF6A00 100%);
  background-repeat: no-repeat; background-size: 100% 100%;
  -webkit-mask-image: url("../assets/sun_logo.svg"); mask-image: url("../assets/sun_logo.svg");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.nlg-fire.lit .star { animation: nlg-twinkle 3s ease-in-out infinite; }
.nlg-fire.lit .sun-logo { animation: nlg-spin 34s linear infinite; }
.nlg-fire.lit .cloud { animation: nlg-drift 30s ease-in-out infinite alternate; }
@keyframes nlg-twinkle { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes nlg-spin { to { transform: rotate(360deg); } }
@keyframes nlg-drift { from { transform: translateX(-26px); } to { transform: translateX(26px); } }

/* bonfire — a small cluster of flame tongues on the ground line */
.bonfire { transform-box: fill-box; transform-origin: 50% 100%; }
.nlg-fire.lit .bonfire { animation: nlg-rollup 1.4s cubic-bezier(.22,.7,.3,1) both; }
@keyframes nlg-rollup { 0% { transform: scaleY(.05); opacity: 0; } 45% { opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } }
.logs rect { fill: #6b4423; }
/* light default: dark-blue contour, super-white inside */
.tongue { fill: #fff; stroke: #0b1f4d; stroke-width: 1.3; }

/* ground landscape — solar panel + hardware + trees + grass */
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; width: 100%; display: block; }
.g-earth { fill: color-mix(in srgb, var(--eco) 22%, var(--bg)); }
.g-horizon { fill: none; stroke: color-mix(in srgb, var(--eco) 55%, #fff); stroke-width: 1.6; opacity: .55; }
.g-panel { fill: color-mix(in srgb, var(--consensus) 26%, var(--panel)); stroke: var(--consensus); stroke-width: 2; }
.g-grid { stroke: var(--consensus); stroke-width: .8; opacity: .7; }
.g-leg { stroke: var(--text-secondary); stroke-width: 2.4; stroke-linecap: round; }
.g-wire, .g-wire2 { fill: none; stroke: var(--agency); stroke-width: 2; }
.g-dev { fill: var(--panel); stroke: var(--text-secondary); stroke-width: 1.4; }
.g-led { fill: var(--eco); }
.g-trunk { fill: #7a5230; }
.g-tree { fill: color-mix(in srgb, var(--eco) 78%, #0a3d1a); }
.g-grass path { fill: none; stroke: var(--eco); stroke-width: 1.6; stroke-linecap: round; }
.nlg-fire.lit .g-led { animation: nlg-twinkle 1.6s steps(1, end) infinite; }

/* flowers grow from the ground: sprout (scale up) then drift up */
.petals { position: absolute; inset: 0; }
.petal {
  position: absolute; bottom: 6%; left: var(--x);
  font-size: var(--size); line-height: 1;
  color: hsl(var(--hue), 92%, 60%);
  filter: drop-shadow(0 0 6px currentColor);
  transform-origin: 50% 100%;
  opacity: 0; will-change: transform, opacity;
}
.nlg-fire.lit .petal { animation: nlg-grow var(--dur) ease-out var(--delay) infinite; }
@keyframes nlg-grow {
  0%   { transform: translateY(0) rotate(0) scale(0); opacity: 0; }
  18%  { transform: translateY(-4vh) rotate(calc(var(--spin) * .15)) scale(1); opacity: 1; }
  62%  { opacity: 1; }
  100% { transform: translate(var(--drift), -58vh) rotate(var(--spin)) scale(.5); opacity: 0; }
}

/* dark theme: starfield sky + white glowing flames (flowers stay coloured) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sky-light { display: none; }
  :root:not([data-theme="light"]) .sky-dark { display: block; }
  :root:not([data-theme="light"]) .tongue { fill: url(#nlgWhite); stroke: #fff; stroke-width: .3; }
}
:root[data-theme="dark"] .sky-light { display: none; }
:root[data-theme="dark"] .sky-dark { display: block; }
:root[data-theme="dark"] .tongue { fill: url(#nlgWhite); stroke: #fff; stroke-width: .3; }
:root[data-theme="light"] .sky-dark { display: none; }
:root[data-theme="light"] .sky-light { display: block; }
:root[data-theme="light"] .tongue { fill: #fff; stroke: #0b1f4d; stroke-width: 1.3; }

.nlg-ov.flames .nlg-stack, .nlg-ov.flames .nlg-tap, .nlg-ov.flames .nlg-off { position: relative; z-index: 1; }

/* reduced-motion / instant path: scene visible, no motion */
@media (prefers-reduced-motion: reduce) {
  .nlg-tap { transition: none; }
  .nlg-fire.lit .bonfire, .nlg-fire.lit .petal, .nlg-fire.lit .star, .nlg-fire.lit .sun-logo, .nlg-fire.lit .cloud, .nlg-fire.lit .g-led { animation: none; }
  .nlg-fire.lit .petal { opacity: .85; }
}