/* lightforged.one — dark theme overrides on top of the Industry design system.
   Only what cannot be inline lives here: tokens, keyframes, base resets, hover states. */

:root {
  /* Industry tokens, retuned for the dark forge ground */
  --color-bg: #0a0e13;
  --color-surface: #121a24;
  --color-text: #e8eef6;
  --color-accent: #7fb4ea;
  --color-divider: color-mix(in srgb, #8fb7e0 22%, transparent);

  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* rarity ramp — one colour per product tier */
  --rarity-rare: #4a9cf5;      /* dbcool */
  --rarity-uncommon: #55b86b;  /* audio tools */
  --rarity-epic: #a56ce8;      /* ultranizer */
  --rarity-legendary: #ef8b3c; /* tap2.menu */
  --rarity-artifact: #e5cc80;  /* unannounced */
}

html { background: #05080b; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent); }
a:hover { color: #b9d9fb; }

.btn-primary { color: #0a0e13; }
.btn-primary:hover { background: var(--color-accent-400); }
.tag { border-radius: 0; }

.input { background: color-mix(in srgb, #121a24 80%, transparent); color: var(--color-text); }
.input::placeholder { color: color-mix(in srgb, var(--color-text) 42%, transparent); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@keyframes lf-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes lf-pulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

/* the void around the plate — a slow nebula drift behind a field of stars */
.lf-cosmos { position: relative; isolation: isolate; }
.lf-cosmos::before,
.lf-cosmos::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.lf-cosmos::before {
  background-image:
    radial-gradient(ellipse 900px 700px at 8% 10%, rgba(165,108,232,.24), transparent 60%),
    radial-gradient(ellipse 800px 650px at 92% 6%, rgba(74,156,245,.18), transparent 60%),
    radial-gradient(ellipse 750px 800px at 12% 95%, rgba(239,139,60,.10), transparent 60%),
    radial-gradient(ellipse 900px 900px at 88% 96%, rgba(229,110,170,.16), transparent 65%);
  background-repeat: no-repeat;
  animation: lf-drift 100s ease-in-out infinite alternate;
}
/* dense field of faint, tiny background dust — deliberately irregular sizes/alphas so it doesn't read as a repeating grid */
.lf-cosmos::after {
  background-image:
    radial-gradient(.8px .8px at 4% 71%, rgba(255,255,255,.32), transparent 65%),
    radial-gradient(.6px .6px at 17% 12%, rgba(207,230,255,.4), transparent 65%),
    radial-gradient(1.1px 1.1px at 29% 54%, rgba(255,255,255,.55), transparent 65%),
    radial-gradient(.7px .7px at 38% 88%, rgba(255,255,255,.28), transparent 65%),
    radial-gradient(.9px .9px at 47% 22%, rgba(211,177,255,.42), transparent 65%),
    radial-gradient(.6px .6px at 56% 65%, rgba(255,255,255,.38), transparent 65%),
    radial-gradient(1.2px 1.2px at 64% 6%, rgba(255,255,255,.5), transparent 65%),
    radial-gradient(.7px .7px at 73% 45%, rgba(168,210,255,.36), transparent 65%),
    radial-gradient(.9px .9px at 82% 79%, rgba(255,255,255,.3), transparent 65%),
    radial-gradient(.6px .6px at 91% 18%, rgba(255,255,255,.45), transparent 65%),
    radial-gradient(1.1px 1.1px at 96% 61%, rgba(255,255,255,.4), transparent 65%),
    radial-gradient(.8px .8px at 11% 37%, rgba(255,255,255,.32), transparent 65%),
    radial-gradient(.7px .7px at 22% 96%, rgba(207,230,255,.34), transparent 65%),
    radial-gradient(1px 1px at 34% 8%, rgba(255,255,255,.42), transparent 65%),
    radial-gradient(.6px .6px at 61% 33%, rgba(255,255,255,.28), transparent 65%),
    radial-gradient(.9px .9px at 87% 39%, rgba(211,177,255,.3), transparent 65%);
  background-repeat: repeat;
  background-size: 267px 311px;
}

/* sparser, bigger, brighter stars on their own tile — the only layer that shimmers */
.lf-star-near {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 6% 18%, #fff, transparent 70%),
    radial-gradient(2.3px 2.3px at 19% 63%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(1.1px 1.1px at 33% 8%, #cfe6ff, transparent 70%),
    radial-gradient(1.8px 1.8px at 41% 84%, #fff, transparent 70%),
    radial-gradient(1.3px 1.3px at 58% 41%, rgba(211,177,255,.85), transparent 70%),
    radial-gradient(2.1px 2.1px at 71% 71%, #fff, transparent 70%),
    radial-gradient(1px 1px at 79% 15%, #a8d2ff, transparent 70%),
    radial-gradient(1.9px 1.9px at 88% 55%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(1.2px 1.2px at 96% 92%, #ffe4b8, transparent 70%),
    radial-gradient(1.4px 1.4px at 12% 95%, #fff, transparent 70%),
    radial-gradient(2.4px 2.4px at 50% 12%, rgba(255,255,255,.85), transparent 70%);
  background-repeat: repeat;
  background-size: 461px 397px;
  animation: lf-twinkle 8s ease-in-out infinite;
}
@keyframes lf-drift {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 30px -20px, -20px 30px, 15px 15px, -15px -15px; }
}
@keyframes lf-twinkle {
  0%, 100% { opacity: .75; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-cosmos::before, .lf-star-near { animation: none; }
}

/* the "next iron" teaser is the one hover-reactive panel */
.lf-teaser:hover {
  background: linear-gradient(100deg, rgba(229,204,128,.18), rgba(229,204,128,.02) 70%) !important;
}

/* scroll reveal — the island flips data-shown once in view */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
[data-reveal][data-shown] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* the page is a fixed 1120px plate on desktop; below that it reflows */
@media (max-width: 1100px) {
  .lf-hero { grid-template-columns: 1fr !important; }
  .lf-hero-term { border-left: 0 !important; border-top: 1px solid var(--color-divider); }
  .lf-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lf-h1 { font-size: 58px !important; }
}
@media (max-width: 640px) {
  .lf-grid-4 { grid-template-columns: 1fr !important; }
  .lf-teaser { grid-template-columns: 1fr !important; }
  .lf-pad { padding-left: 22px !important; padding-right: 22px !important; }
  .lf-h1 { font-size: 44px !important; }
}