/* ==========================================================================
   DeBands brand kit — layered glass.

   Ported from companion-pwa-v2/v2/assets/brand-kit.php (app.debands.xyz) so
   debands.xyz and the app read as one product: one ground, one ink, a set of
   translucency steps, and the Instrument Serif display face beside the
   wordmark. Keep the token values in step with the app's copy; anything that
   belongs only to this site lives in site.css.

   Theme follows the app: dark by default, `dark` class on <html>, light is
   the html:not(.dark) overlay.
   ========================================================================== */

:root {
  --lg-ground:      #050506;
  --lg-ink:         #ffffff;
  --lg-ink-soft:    rgba(255,255,255,0.62);
  --lg-ink-faint:   rgba(255,255,255,0.38);
  --lg-pane:        rgba(255,255,255,0.045);
  --lg-pane-lift:   rgba(255,255,255,0.07);
  --lg-edge:        rgba(255,255,255,0.10);
  --lg-edge-bright: rgba(255,255,255,0.22);
  --lg-btn-ink:     #08080a;
}
html:not(.dark) {
  --lg-ground:      #f4f4f5;
  --lg-ink:         #09090b;
  --lg-ink-soft:    rgba(9,9,11,0.66);
  --lg-ink-faint:   rgba(9,9,11,0.45);
  --lg-pane:        rgba(255,255,255,0.55);
  --lg-pane-lift:   rgba(255,255,255,0.78);
  --lg-edge:        rgba(9,9,11,0.10);
  --lg-edge-bright: rgba(9,9,11,0.22);
  --lg-btn-ink:     #ffffff;
}

/* Atmosphere. Fixed behind the whole document so every section is lit by the
   same source. Wider than the viewport on purpose — clipped at the root so it
   cannot become horizontal scroll. */
html, body { overflow-x: hidden; }
.lg-aura { position: fixed; inset: -20%; pointer-events: none; z-index: 0; }
.lg-aura::before, .lg-aura::after {
  content: ""; position: absolute; border-radius: 9999px; filter: blur(110px);
}
.lg-aura::before {
  width: 62vw; height: 62vw; top: -8%; left: 4%;
  background: radial-gradient(circle, rgba(255,255,255,0.22), rgba(255,255,255,0.05) 44%, transparent 68%);
  animation: lg-drift-a 30s ease-in-out infinite alternate;
}
.lg-aura::after {
  width: 54vw; height: 54vw; top: 34%; right: 0%;
  background: radial-gradient(circle, rgba(176,196,255,0.20), rgba(176,196,255,0.04) 46%, transparent 70%);
  animation: lg-drift-b 36s ease-in-out infinite alternate;
}
html:not(.dark) .lg-aura::before {
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0.35) 44%, transparent 68%);
}
html:not(.dark) .lg-aura::after {
  background: radial-gradient(circle, rgba(150,175,255,0.28), rgba(150,175,255,0.06) 46%, transparent 70%);
}
@keyframes lg-drift-a { to { transform: translate3d(6vw, 5vh, 0) scale(1.10); } }
@keyframes lg-drift-b { to { transform: translate3d(-5vw, -4vh, 0) scale(1.08); } }

.lg-grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.15;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
}
html:not(.dark) .lg-grain { opacity: 0.06; }

/* Everything above the atmosphere. */
nav, header, main, section, footer, .lg-above { position: relative; z-index: 2; }

/* The panel. One object for every card on the page, so the surfaces stay a
   family instead of six different treatments. */
.lg-panel {
  border-radius: 22px;
  border: 1px solid var(--lg-edge);
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02) 48%, rgba(255,255,255,0.045));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.10);
  transition: border-color .25s ease, transform .25s ease;
}
html:not(.dark) .lg-panel {
  background: linear-gradient(160deg, rgba(255,255,255,0.86), rgba(255,255,255,0.6) 48%, rgba(255,255,255,0.78));
  box-shadow: 0 24px 60px -30px rgba(9,9,11,0.2), inset 0 1px 0 rgba(255,255,255,0.9);
}
a.lg-panel:hover, .lg-panel--hover:hover { border-color: var(--lg-edge-bright); transform: translateY(-2px); }

/* The nav is a floating pill rather than a full-width bar: a bar draws a hard
   line across the atmosphere and flattens it. */
.lg-navbar {
  border-radius: 9999px;
  border: 1px solid var(--lg-edge);
  background: var(--lg-pane);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 16px 40px -24px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.10);
}

/* Display voice — section headings and the hero. */
.lg-display {
  font-family: 'Instrument Serif', 'Playfair Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.lg-eyebrow {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lg-ink-faint);
}

.lg-wordmark { height: 22px; width: auto; display: block; }
html:not(.dark) .lg-wordmark { filter: invert(1); }

.lg-btn {
  border-radius: 12px; font-weight: 600; font-size: 14px;
  padding: 12px 20px; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .12s ease, background-color .2s ease, border-color .2s ease;
  border: 1px solid transparent;
  font-family: inherit; cursor: pointer;
}
.lg-btn:active { transform: translateY(1px); }
.lg-btn--primary { background: var(--lg-ink); color: var(--lg-btn-ink); }
.lg-btn--primary:hover { filter: brightness(0.94); }
.lg-btn--glass { background: var(--lg-pane); border-color: var(--lg-edge); color: var(--lg-ink); }
.lg-btn--glass:hover { background: var(--lg-pane-lift); border-color: var(--lg-edge-bright); }
.lg-btn--lg { padding: 14px 26px; }

/* Section seam. A full-width 1px border cuts a hard line across the lit
   backdrop; this fades out at both ends so the atmosphere carries through. */
.lg-seam::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lg-edge-bright), transparent);
}

/* Reveal on scroll. The hero never carries this: the first thing a visitor
   sees must be legible in the first painted frame. */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.fade-up.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: 100ms; }
.delay-2 { transition-delay: 200ms; }
.delay-3 { transition-delay: 300ms; }

/* ------------------------------------------------------------------
   Scroll rail — a progress line down the left edge that doubles as an
   index: a tick per section, lit as you pass it, the current section named
   beside the head. Driven from one custom property.
   ------------------------------------------------------------------ */
.rail {
  position: fixed; left: 26px; top: 50%; transform: translateY(-50%);
  width: 2px; height: min(42vh, 340px); border-radius: 9999px;
  background: var(--lg-edge); z-index: 40; display: none;
}
.rail.is-live { display: block; animation: rail-in .5s ease both; }
@keyframes rail-in { from { opacity: 0; transform: translateY(-50%) translateX(-6px) } to { opacity: 1 } }
.rail__fill {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, transparent, var(--lg-ink) 55%, var(--lg-ink));
  transform-origin: top; transform: scaleY(var(--rail-progress, 0));
  transition: transform .12s linear;
}
.rail__dot {
  position: absolute; left: 50%; top: calc(var(--rail-progress, 0) * 100%);
  width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 9999px;
  background: var(--lg-ink);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.10), 0 0 14px 2px rgba(255,255,255,0.35);
  transition: top .12s linear;
}
html:not(.dark) .rail__dot { box-shadow: 0 0 0 3px rgba(9,9,11,0.07), 0 0 14px 2px rgba(9,9,11,0.18); }
.rail__tick {
  position: absolute; left: 50%; width: 6px; height: 1px; margin-left: -3px;
  background: var(--lg-edge-bright); border: 0; padding: 0; cursor: pointer;
  transition: width .2s ease, background-color .2s ease;
}
.rail__tick::after { content: ""; position: absolute; inset: -9px -12px; }
.rail__tick.is-passed { background: var(--lg-ink); width: 10px; margin-left: -5px; }
.rail__tick:hover { width: 12px; margin-left: -6px; background: var(--lg-ink); }
.rail__label {
  position: absolute; left: 16px; top: calc(var(--rail-progress, 0) * 100%);
  transform: translateY(-50%);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lg-ink-faint); white-space: nowrap;
  transition: top .12s linear, color .2s ease;
}
.rail__label b { display: block; font-weight: 600; letter-spacing: 0.08em; color: var(--lg-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .rail { display: none !important; } }

/* ------------------------------------------------------------------
   App window — the dashboard, built in markup rather than a screenshot so
   it stays sharp, follows the theme and never shows a real account.
   ------------------------------------------------------------------ */
.app-win {
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--lg-edge);
  background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025) 48%, rgba(255,255,255,0.05));
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.12);
}
html:not(.dark) .app-win {
  background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(255,255,255,0.66) 48%, rgba(255,255,255,0.82));
  box-shadow: 0 40px 80px -34px rgba(9,9,11,0.25), inset 0 1px 0 rgba(255,255,255,0.9);
}
.app-win__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--lg-edge); }
.app-win__dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--lg-edge-bright); }
.app-win__url { margin-left: 10px; font-size: 11px; color: var(--lg-ink-faint); letter-spacing: 0.02em; }
.app-win__body { padding: 16px; display: grid; gap: 12px; }

.app-row { display: flex; align-items: center; gap: 11px; }
.app-avatar {
  width: 38px; height: 38px; border-radius: 9999px; flex-shrink: 0;
  display: grid; place-content: center; font-size: 13px; font-weight: 600;
  background: var(--lg-pane-lift); color: var(--lg-ink-soft); border: 1px solid var(--lg-edge);
}
.app-name { font-size: 13.5px; font-weight: 600; color: var(--lg-ink); line-height: 1.2; }
.app-handle { font-size: 11.5px; color: var(--lg-ink-faint); }

.app-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.app-tile { border-radius: 13px; padding: 11px 12px; background: var(--lg-pane); border: 1px solid var(--lg-edge); }
.app-tile__label { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lg-ink-faint); }
.app-tile__value { font-size: 19px; font-weight: 600; color: var(--lg-ink); margin-top: 3px; font-variant-numeric: tabular-nums; }

.app-activity { border-radius: 13px; padding: 12px; background: var(--lg-pane); border: 1px solid var(--lg-edge); }
.app-grid { display: grid; grid-template-columns: repeat(18, 1fr); gap: 3px; margin-top: 9px; }
.app-cell { aspect-ratio: 1; border-radius: 2px; background: var(--lg-edge); }
.app-cell--on   { background: var(--lg-ink-faint); }
.app-cell--peak { background: var(--lg-ink); }

.app-list { display: grid; gap: 9px; }
.app-item { display: flex; align-items: center; gap: 9px; }
.app-item__avatar {
  width: 26px; height: 26px; border-radius: 9999px; flex-shrink: 0;
  display: grid; place-content: center; font-size: 9.5px; font-weight: 600;
  background: var(--lg-pane-lift); color: var(--lg-ink-faint); border: 1px solid var(--lg-edge);
}
.app-item__name { font-size: 12px; color: var(--lg-ink-soft); }
.app-item__meta { margin-left: auto; font-size: 10px; color: var(--lg-ink-faint); }

/* ------------------------------------------------------------------
   Product stage — puts the cut-out band in the scene, lit by the same
   upper-left source as .lg-aura: a pool of light behind, a drop-shadow
   filter that follows the alpha, and a contact shadow beneath.
   ------------------------------------------------------------------ */
.product-stage { position: relative; }
.product-stage::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 46%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,0.13), rgba(255,255,255,0.04) 42%, transparent 68%);
  filter: blur(28px); pointer-events: none;
}
.product-stage::after {
  content: ""; position: absolute; z-index: 0;
  left: 50%; bottom: 8%; width: 62%; height: 42px; transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0,0,0,0.75), transparent 70%);
  filter: blur(16px); pointer-events: none;
}
html:not(.dark) .product-stage::before { background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0.35) 42%, transparent 68%); }
html:not(.dark) .product-stage::after  { background: radial-gradient(ellipse, rgba(9,9,11,0.22), transparent 70%); }
.product-hero-image {
  position: relative; z-index: 1;
  filter: drop-shadow(-6px 10px 16px rgba(0,0,0,0.55)) drop-shadow(0 26px 40px rgba(0,0,0,0.45));
  animation: product-hover 9s ease-in-out infinite;
}
html:not(.dark) .product-hero-image { filter: drop-shadow(-4px 8px 14px rgba(9,9,11,0.16)) drop-shadow(0 22px 34px rgba(9,9,11,0.12)); }
@keyframes product-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Product plate. The collection is photographed on white, and several bands
   are themselves white, so there is no honest cut-out: each sits on a white
   plate, the way a swatch sits on a spec sheet. */
.product-plate {
  border-radius: 16px; overflow: hidden; background: #ffffff;
  border: 1px solid var(--lg-edge);
}
.product-plate img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lg-aura::before, .lg-aura::after, .product-hero-image { animation: none; }
  .rail__fill, .rail__dot, .rail__label, .rail__tick { transition: none; }
  .rail.is-live { animation: none; }
  .fade-up { opacity: 1; transform: none; transition: none; }
}