/* ============================================================
   diamondbyte.org Archive — visual theme layer
   Loaded after style.css (template) — everything here wins.
   Accent language: diamond facets — cyan → violet gradients on
   the template's dark navy base.
   ============================================================ */

:root {
  --db-bg: #0e1018;
  --db-cyan: #46d4ff;
  --db-violet: #7c5cff;
  --db-blue: #0252e7;
  --db-line: rgba(255, 255, 255, 0.08);
  --db-line-bright: rgba(120, 200, 255, 0.35);
  --db-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
}

/* --- Base atmosphere ------------------------------------------------ */

html { scroll-behavior: smooth; }

body {
  background-color: var(--db-bg);
  /* faint diamond lattice over the base color */
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.013) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.013) 75%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.013) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.013) 75%);
  background-size: 28px 28px;
  background-attachment: fixed;
}

/* two soft aurora glows drifting behind everything */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 60vw;
  height: 60vw;
  min-width: 480px;
  min-height: 480px;
  border-radius: 50%;
  pointer-events: none;
}

body::before {
  top: -25vw;
  left: -15vw;
  background: radial-gradient(circle, rgba(2, 82, 231, 0.16), transparent 65%);
  animation: db-drift-a 26s ease-in-out infinite alternate;
}

body::after {
  bottom: -30vw;
  right: -18vw;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.12), transparent 65%);
  animation: db-drift-b 32s ease-in-out infinite alternate;
}

@keyframes db-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vw, 6vh, 0) scale(1.15); }
}

@keyframes db-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-8vw, -7vh, 0) scale(0.95); }
}

::selection { background: rgba(70, 212, 255, 0.35); color: #fff; }

/* slim themed scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--db-bg); }
::-webkit-scrollbar-thumb {
  background: #262a3a;
  border-radius: 6px;
  border: 3px solid var(--db-bg);
}
::-webkit-scrollbar-thumb:hover { background: #3a4160; }

/* --- Typography ----------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.display-heading-5,
.card-heading-1,
.dropdown-item-heading {
  font-family: 'Space Grotesk', Inter, sans-serif;
  letter-spacing: -0.015em;
}

/* --- Hero title box -------------------------------------------------- */

.display-heading-5 {
  position: relative;
  background: linear-gradient(160deg, rgba(30, 32, 41, 0.85), rgba(22, 24, 33, 0.65));
  overflow: hidden;
  text-shadow: 0 0 24px rgba(70, 212, 255, 0.25);
}

/* animated gem-gradient border drawn with a masked pseudo element */
.display-heading-5::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  padding: 1px;
  background: linear-gradient(120deg, rgba(70, 212, 255, 0.55), rgba(124, 92, 255, 0.45), rgba(70, 212, 255, 0.1), rgba(124, 92, 255, 0.45), rgba(70, 212, 255, 0.55));
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  animation: db-border-flow 7s linear infinite;
  pointer-events: none;
}

/* a slow light sweep across the hero box */
.display-heading-5::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(160, 220, 255, 0.055), transparent);
  transform: skewX(-18deg);
  animation: db-sheen 7.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes db-border-flow {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

@keyframes db-sheen {
  0%, 55% { left: -70%; }
  85%, 100% { left: 130%; }
}

/* --- Navbar ----------------------------------------------------------- */

.navbar-wrapper.sticky-top {
  background: rgba(13, 15, 23, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--db-line);
  transition: box-shadow 0.35s ease, background 0.35s ease;
}

.navbar-wrapper.sticky-top.nav-scrolled {
  background: rgba(11, 13, 20, 0.88);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.navbar { background: transparent; }

.navbar-brand-title img {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
  filter: drop-shadow(0 0 6px rgba(70, 212, 255, 0.25));
}

.navbar-1-brand:hover .navbar-brand-title img {
  transform: rotate(-8deg) scale(1.12);
  filter: drop-shadow(0 0 12px rgba(70, 212, 255, 0.55));
}

/* sliding gem underline on nav links */
.nav-link {
  position: relative;
  transition: color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--db-cyan), var(--db-violet));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link:hover::after,
.nav-link.w--current::after { transform: scaleX(1); }

.nav-link.w--current { color: #fff; }

/* --- Cards ------------------------------------------------------------ */

.grid-thirds .panel {
  position: relative;
  background: var(--db-glass);
  border: 1px solid var(--db-line);
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* faceted top-light on every card */
.grid-thirds .panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--db-line-bright), transparent);
  opacity: 0.55;
  transition: opacity 0.35s ease;
}

.grid-thirds .panel:hover {
  transform: translateY(-6px);
  border-color: rgba(110, 180, 255, 0.28);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(70, 212, 255, 0.06),
    0 4px 24px rgba(70, 212, 255, 0.07);
}

.grid-thirds .panel:hover::before { opacity: 1; }

.grid-thirds .panel-body > div img {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
}

.grid-thirds .panel:hover .panel-body > div img {
  transform: scale(1.045) translateY(-2px);
  filter: brightness(1.08);
}

/* --- Badges ------------------------------------------------------------ */

.badge {
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* the outer a.badge is only a layout container — keep it invisible */
.grid-thirds .panel a.badge,
.center > a.badge {
  border: none;
  box-shadow: none;
  background: none;
}

/* --- Buttons ------------------------------------------------------------ */

.button,
.w-button {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(135deg, var(--db-blue), #5636e8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, filter 0.25s ease;
}

.button::before,
.w-button::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}

.button:hover,
.w-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 8px 24px rgba(2, 82, 231, 0.35), 0 2px 12px rgba(124, 92, 255, 0.25);
}

.button:hover::before,
.w-button:hover::before { left: 130%; }

.button:active,
.w-button:active { transform: translateY(0); }

/* disabled downloads must not glow, lift or shine */
.button-disabled.w-button,
.button-disabled.w-button:hover {
  background-image: none;
  background-color: #232732;
  border-color: var(--db-line);
  transform: none;
  box-shadow: none;
  filter: none;
  opacity: 0.55;
  cursor: not-allowed;
}
.button-disabled.w-button::before { display: none; }

/* back-to-top bubble */
.button-circle {
  background-image: linear-gradient(135deg, #23273a, #171a26);
  border: 1px solid var(--db-line);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.button-circle:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 16px rgba(70, 212, 255, 0.2);
}

/* --- Search + filters ----------------------------------------------------- */

.search-wrapper input {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--db-line);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.search-wrapper input:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(70, 212, 255, 0.5);
  box-shadow: 0 0 0 4px rgba(70, 212, 255, 0.12);
  outline: none;
}

.searchfilterpanel {
  background: var(--db-glass);
  border: 1px solid var(--db-line);
}

.searchfilterpanel input[type="checkbox"] { accent-color: var(--db-violet); }

/* --- Content blocks -------------------------------------------------------- */

.home-content {
  position: relative;
  background: var(--db-glass);
  border: 1px solid var(--db-line);
  overflow: hidden;
}

.home-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--db-line-bright), transparent);
}

.notice-banner {
  border: 1px solid rgba(255, 107, 107, 0.25);
  background: linear-gradient(160deg, rgba(64, 34, 40, 0.5), rgba(42, 44, 52, 0.6));
}

/* --- Scroll-reveal (classes applied by theme.js) ---------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms);
  will-change: opacity, transform;
}

.reveal.in-view {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --- Motion safety ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before,
  body::after,
  .display-heading-5::before,
  .display-heading-5::after {
    animation: none;
  }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}