/* ─────────────────────────────────────────────────────────
   ATOMIC · Obsidian - public surface finish
   Black-minimal treatment for the home and auth pages.
   Loaded only on those routes (see functions.atom.php), so
   the :root token overrides never reach the admin pages.
   ───────────────────────────────────────────────────────── */

/* Palette note: the Obsidian colour tokens now live in tokens.css and apply
   to every page. This file only carries the public-page composition. */

/* .atomic paints --canvas on a height:100% box, which would bury the
   backdrop for exactly the first viewport. Let the body canvas show through. */
body { background: var(--canvas); }
.atomic { background: transparent; height: auto; min-height: 100%; }

/* ══════════════════════════════════════════════════════════
   ABSTRACT BACKDROP
   Anchored to the top of the document, not the viewport: the
   composition belongs to the hero and scrolls away with it.
   ══════════════════════════════════════════════════════════ */
.ob-art {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 150vh;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(180deg, #000 0 62%, transparent 96%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 62%, transparent 96%);
}
.ob-art svg { position: absolute; }

/* liquid masses, bleeding off the frame */
.ob-art .ob-mass-a { top: -30vh; left: -20vw; width: 80vw; height: 120vh; }
.ob-art .ob-mass-b { right: -24vw; top: 30vh;  width: 72vw; height: 110vh; }

/* ribbon of light crossing the hero */
.ob-art .ob-ribbon { top: 6vh; left: -6vw; width: 112vw; height: 72vh; opacity: 0.75; }

/* the one small solid: a sphere with a single terminator edge */
.ob-art .ob-orb   { top: 60vh; left: -2.5vw; width: 9rem; height: 9rem; }
.ob-art .ob-speck { top: 41vh; left: 3.5vw;  width: 1.125rem; height: 1.125rem; }

/* caustics - marbled light pooling, the busiest layer so it sits lowest */
.ob-art .ob-caustics {
  top: -6vh; right: -14vw;
  width: 86vw; height: 105vh;
  opacity: 0.26;
  mix-blend-mode: screen;
  transform: rotate(6deg);
}

/* a heavy mass rising from the lower edge */
.ob-art .ob-drip { bottom: -4vh; left: 22vw; width: 46vw; height: 62vh; }

/* hairline circles - the only closed geometric figures on the page */
.ob-art .ob-halo,
.ob-art .ob-halo-2 {
  position: absolute;
  border: 0.0625rem solid rgba(255,255,255,0.08);
  border-radius: var(--r-pill);
}
.ob-art .ob-halo {
  top: 44vh; right: 16vw;
  width: 24rem; height: 24rem;
  mask-image: linear-gradient(200deg, #000 0 58%, transparent 76%);
  -webkit-mask-image: linear-gradient(200deg, #000 0 58%, transparent 76%);
}
/* concentric, offset, cropped the other way - the pair reads as parallax */
.ob-art .ob-halo-2 {
  top: 30vh; right: 6vw;
  width: 42rem; height: 42rem;
  border-color: rgba(255,255,255,0.045);
  mask-image: linear-gradient(20deg, #000 0 46%, transparent 70%);
  -webkit-mask-image: linear-gradient(20deg, #000 0 46%, transparent 70%);
}

/* film grain - gives the black a surface instead of a void */
.ob-art .ob-grain {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

@media (max-width: 56.25rem) {
  .ob-art .ob-orb,
  .ob-art .ob-speck,
  .ob-art .ob-halo,
  .ob-art .ob-halo-2,
  .ob-art .ob-drip { display: none; }
  .ob-art .ob-ribbon { opacity: 0.5; }
  .ob-art .ob-caustics { opacity: 0.3; }
}

/* ══════════════════════════════════════════════════════════
   HOME
   ══════════════════════════════════════════════════════════ */
.pub-wrap { position: relative; isolation: isolate; }

/* two silk folds of light bending across the black, fixed behind the page */
.pub-wrap::before {
  content: "";
  position: fixed;
  inset: -20vh -10vw;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48% 26% at 18% 30%, rgba(255,255,255,0.085) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(60% 20% at 78% 22%, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0) 66%),
    radial-gradient(70% 34% at 62% 88%, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0) 64%),
    radial-gradient(38% 18% at 92% 62%, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0) 60%);
  filter: blur(1.75rem);
  transform: rotate(-8deg) scale(1.12);
  opacity: 0.9;
}

/* a single hairline fold - the one crisp edge in the composition */
.pub-wrap::after {
  content: "";
  position: fixed;
  left: -10vw; right: -10vw;
  top: 34vh; height: 38vh;
  z-index: -1;
  pointer-events: none;
  border-top: 0.0625rem solid rgba(255,255,255,0.10);
  border-radius: 100% 100% 0 0 / 100% 100% 0 0;
  transform: rotate(-5deg);
}

/* type: thin the display voice, widen the small caps */
.hero-title { font-weight: 300; letter-spacing: -0.035em; }
.hero-title .accent {
  color: transparent;
  background: linear-gradient(100deg, oklch(1 0 0) 0%, oklch(0.72 0 0) 70%, oklch(0.45 0 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-eyebrow,
.section-eyebrow,
.feature-tag { letter-spacing: 0.22em; }
.pub-section-title { font-weight: 300; letter-spacing: -0.03em; }
.cta-title { font-weight: 300; }

/* surfaces: less card, more cut glass */
.feature-card,
.tech-window,
.cta-box {
  background: rgba(255,255,255,0.018);
  backdrop-filter: blur(0.125rem);
}
.feature-card:hover {
  background: rgba(255,255,255,0.038);
  border-color: rgba(255,255,255,0.16);
}

.pub-nav-brand .brand-mark { background: var(--ac-gradient); color: var(--ac-ink); }

.hero-orbit .nucleus {
  fill: oklch(1 0 0);
  filter: drop-shadow(0 0 1rem rgba(255,255,255,0.45));
}

/* ══════════════════════════════════════════════════════════
   AUTH - same material, split across the panel edge
   ══════════════════════════════════════════════════════════ */
.auth-page { background: var(--bg); }

.auth-panel {
  background: var(--bg);
  border-right-color: rgba(255,255,255,0.09);
}

/* the panel's own tinted wash is replaced by achromatic light */
.auth-panel::before {
  background:
    radial-gradient(70% 55% at 18% 12%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(55% 45% at 88% 92%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 58%);
}

/* The art layer is clipped by the panel, so it fills it. z-index 0 keeps it
   above the panel's own black background; the panel's content is positioned
   and therefore still paints on top. */
.auth-panel .ob-art {
  position: absolute;
  inset: 0;
  height: auto;
  z-index: 0;
  mask-image: none;
  -webkit-mask-image: none;
}
.auth-panel .ob-art .ob-mass-a { top: -18%; left: -30%; width: 120%; height: 90%; }
.auth-panel .ob-art .ob-mass-b { top: 42%;  right: -40%; width: 120%; height: 80%; }
.auth-panel .ob-art .ob-ribbon { top: 26%;  left: -12%;  width: 140%; height: 46%; opacity: 0.8; }
.auth-panel .ob-art .ob-orb    { top: 8%;   left: auto; right: 8%; width: 6rem; height: 6rem; }
.auth-panel .ob-art .ob-speck  { top: 5%;   left: auto; right: 26%; width: 1rem; height: 1rem; }
.auth-panel .ob-art .ob-halo {
  top: auto; bottom: -14%;
  left: -12%; right: auto;
  width: 26rem; height: 26rem;
}
.auth-panel .ob-art .ob-halo-2 {
  top: -18%; right: -22%;
  width: 34rem; height: 34rem;
}
.auth-panel .ob-art .ob-caustics {
  top: 8%; right: -30%;
  width: 130%; height: 70%;
  opacity: 0.4;
  transform: rotate(-10deg);
}
.auth-panel .ob-art .ob-drip {
  bottom: -10%; left: auto; right: -18%;
  width: 70%; height: 55%;
}

/* one soft fold on the form side so the split doesn't read as two flat blacks */
.auth-form-side { position: relative; }
.auth-form-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(60% 45% at 82% 8%, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0) 62%);
}
.auth-form-box { position: relative; z-index: 1; }

.auth-panel-title { font-weight: 300; letter-spacing: -0.035em; }
.auth-panel-brand .brand-mark { background: var(--ac-gradient); color: var(--ac-ink); }
.auth-log { background: rgba(0,0,0,0.55); backdrop-filter: blur(0.25rem); }
.auth-title { font-weight: 300; letter-spacing: -0.03em; }

/* Centered auth card (sign in / sign up) */
.auth-shell { background: var(--bg); }
.auth-card-brand .brand-mark { background: var(--ac-gradient); color: var(--ac-ink); }
.auth-card .auth-title { font-weight: 400; }

@media (max-width: 60rem) {
  .auth-panel .ob-art { display: none; }
}


/* ══════════════════════════════════════════════════════════
   LIGHT MODE
   The composition is drawn in white light on black; on paper it
   would be invisible smudges. Drop it and let the layout stand.
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] .ob-art,
[data-theme="light"] .pub-wrap::before,
[data-theme="light"] .pub-wrap::after,
[data-theme="light"] .auth-form-side::before { display: none; }

[data-theme="light"] .auth-panel::before {
  background:
    radial-gradient(70% 55% at 18% 12%, rgba(0,0,0,0.045) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(55% 45% at 88% 92%, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0) 58%);
}
[data-theme="light"] .auth-panel { background: var(--inset); }
[data-theme="light"] .auth-log { background: rgba(255,255,255,0.6); }

[data-theme="light"] .hero-title .accent {
  background: linear-gradient(100deg, oklch(0.18 0 0) 0%, oklch(0.34 0 0) 70%, oklch(0.52 0 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
[data-theme="light"] .feature-card,
[data-theme="light"] .tech-window,
[data-theme="light"] .cta-box { background: var(--surface); }
[data-theme="light"] .feature-card:hover {
  background: var(--surface);
  border-color: var(--line-2);
}
[data-theme="light"] .hero-orbit .nucleus { fill: var(--ac); filter: none; }