@import url('./machine.css');
@import url('./dome.css');
@import url('./tray.css');
@import url('./modal.css');

/* Page background mirrors valkyriextruck.com:
   layered radial + linear gradients, two soft blurred orbs as ::before/::after.
   No JS canvas — keeps the standalone export self-contained. */
html[data-skin="valkyrie"] body {
  background:
    radial-gradient(ellipse 55% 28% at 50% 100%, rgba(130,50,6,0.18) 0%, transparent 100%),
    linear-gradient(175deg, #06091c 0%, #050810 60%, #040610 100%);
  background-attachment: fixed;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  position: relative;
  min-height: 100vh;
  color: #c9bfa7;
}

/* Two ambient orbs that drift slowly. Pointer-events none so clicks pass through. */
html[data-skin="valkyrie"] body::before,
html[data-skin="valkyrie"] body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
html[data-skin="valkyrie"] body::before {
  width: 55vw; height: 35vh;
  left: 22%; top: 3%;
  background: radial-gradient(ellipse, rgba(25,35,110,0.32) 0%, transparent 70%);
  animation: valkyrieOrbA 22s ease-in-out infinite alternate;
}
html[data-skin="valkyrie"] body::after {
  width: 35vw; height: 45vh;
  right: 3%; bottom: 15%;
  background: radial-gradient(ellipse, rgba(140,30,180,0.22) 0%, transparent 70%);
  animation: valkyrieOrbB 28s ease-in-out infinite alternate;
}
@keyframes valkyrieOrbA {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(6vw, 4vh); }
}
@keyframes valkyrieOrbB {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-5vw, -3vh); }
}

/* Make sure the machine sits above the orbs. */
html[data-skin="valkyrie"] .site-title,
html[data-skin="valkyrie"] .site-sub,
html[data-skin="valkyrie"] .machine-nav,
html[data-skin="valkyrie"] .machine-wrap,
html[data-skin="valkyrie"] .hint-line,
html[data-skin="valkyrie"] .collection-wrap,
html[data-skin="valkyrie"] .made-with,
html[data-skin="valkyrie"] body > p {
  position: relative;
  z-index: 1;
}

/* Valkyrie X Truck wordmark — replaces the default site-title.
   Uses serif amber-400 with a glowing red ✕ in the middle, mirroring the
   valkyriextruck.com header. */
html[data-skin="valkyrie"] .site-title {
  font-family: 'Crimson Pro', 'Frank Ruhl Libre', serif;
  font-style: italic;
  color: #fbbf24; /* amber-400 */
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 24px 0 4px;
  text-align: center;
}
html[data-skin="valkyrie"] .site-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
}
html[data-skin="valkyrie"] .site-title a:hover { color: #fcd34d; }
html[data-skin="valkyrie"] .site-title .valk-x {
  color: #ef4444; /* red-500 */
  font-style: normal;
  font-weight: 900;
  font-size: 1.15em;
  letter-spacing: normal;
  text-shadow: 0 0 8px rgba(220,38,38,0.8);
}

html[data-skin="valkyrie"] .site-sub {
  color: rgba(251,191,36,0.55);
  letter-spacing: 0.32em;
  font-family: 'Inter', 'M PLUS Rounded 1c', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
}

html[data-skin="valkyrie"] .hint-line {
  color: rgba(255,255,255,0.45);
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 12px;
}

/* Collection chips: dark amber-bordered cards on the navy bg. */
html[data-skin="valkyrie"] .collection-label {
  color: rgba(251,191,36,0.65);
  font-family: 'M PLUS Rounded 1c', sans-serif;
  letter-spacing: 0.22em;
}
html[data-skin="valkyrie"] .collection-toggle {
  background: rgba(251,191,36,0.06);
  border-color: rgba(251,191,36,0.3);
  color: #fbbf24;
  backdrop-filter: blur(6px);
}
html[data-skin="valkyrie"] .collection-toggle:hover {
  border-color: #ef4444;
  color: #fca5a5;
  background: rgba(239,68,68,0.08);
}
html[data-skin="valkyrie"] .collection-toggle:hover .collection-label { color: #fca5a5; }
html[data-skin="valkyrie"] .collection-toggle .collection-count {
  background: #ef4444;
  color: white;
}
html[data-skin="valkyrie"] .collection-toggle .collection-caret {
  color: rgba(251,191,36,0.55);
}
@keyframes valkyrieCollectionPulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
  50%  { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(239,68,68,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
html[data-skin="valkyrie"] .collection-toggle.has-new {
  animation: valkyrieCollectionPulse 1s ease-out;
  border-color: #ef4444;
}
html[data-skin="valkyrie"] .chip {
  background: rgba(251,191,36,0.06);
  border-color: rgba(251,191,36,0.25);
  color: #fbbf24;
  border-radius: 20px;
  font-family: 'Inter', 'M PLUS Rounded 1c', sans-serif;
}
html[data-skin="valkyrie"] .chip:hover {
  border-color: #fcd34d;
  color: #fcd34d;
  background: rgba(251,191,36,0.12);
  box-shadow: 0 4px 14px rgba(251,191,36,0.2);
}
html[data-skin="valkyrie"] .chip.new-chip {
  border-color: #ef4444;
  color: #fca5a5;
  box-shadow: 0 2px 12px rgba(239,68,68,0.35);
}
html[data-skin="valkyrie"] .chip.new-chip:hover {
  border-color: #fca5a5;
  color: #fecaca;
  background: rgba(239,68,68,0.1);
}

/* Top-level skin nav buttons re-tinted. */
html[data-skin="valkyrie"] .machine-nav .mnav-btn {
  font-family: 'Inter', 'M PLUS Rounded 1c', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(251,191,36,0.55);
  border-color: rgba(251,191,36,0.2);
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
  backdrop-filter: blur(6px);
}
html[data-skin="valkyrie"] .machine-nav .mnav-btn:hover {
  color: #fbbf24;
  border-color: rgba(251,191,36,0.5);
  background: rgba(251,191,36,0.05);
}
html[data-skin="valkyrie"] .machine-nav .mnav-btn.active {
  background: rgba(239,68,68,0.15);
  color: #fca5a5;
  border-color: rgba(239,68,68,0.5);
  box-shadow: 0 2px 12px rgba(239,68,68,0.25);
}

html[data-skin="valkyrie"] .made-with {
  color: rgba(251,191,36,0.45) !important;
}
html[data-skin="valkyrie"] .made-with a {
  color: rgba(251,191,36,0.7) !important;
  border-bottom-color: rgba(251,191,36,0.35) !important;
}
html[data-skin="valkyrie"] .made-with a:hover {
  color: #fbbf24 !important;
}

/* Footer link to valkyriextruck.com (added by boot script in dev / by export
   template in standalone). */
html[data-skin="valkyrie"] .valk-credit {
  margin-top: 18px;
  text-align: center;
  font-family: 'Inter', 'M PLUS Rounded 1c', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(251,191,36,0.55);
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
html[data-skin="valkyrie"] .valk-credit a {
  color: #fbbf24;
  text-decoration: none;
  border-bottom: 1px solid rgba(251,191,36,0.4);
}
html[data-skin="valkyrie"] .valk-credit a:hover { color: #fcd34d; }