/* Ambient light sits behind the page; existing layout and motion stay intact. */
:root:root {
  --lighting-base: #f7f8f7;
  --lighting-field-1: rgba(83, 96, 105, .065);
  --lighting-field-2: rgba(83, 96, 105, .045);
  --lighting-field-3: rgba(83, 96, 105, .035);
  --lighting-grain-opacity: .035;
  --lighting-header: rgba(247, 248, 247, .9);
  --lighting-panel: #fff;
  --lighting-panel-top: rgba(255, 255, 255, .9);
  --lighting-panel-edge: rgba(255, 255, 255, .9);
  --lighting-panel-shadow: 0 8px 30px -22px rgba(8, 9, 10, .24);
  --lighting-open-top: rgba(255, 255, 255, .2);
  --lighting-action: linear-gradient(180deg, #282c2e, #0b0d0e);
  --lighting-action-text: #f2f4f3;
  --lighting-action-border: #24282a;
  --lighting-action-edge: rgba(255, 255, 255, .16);
  --lighting-action-shadow: 0 6px 26px -8px rgba(8, 9, 10, .27);
  --lighting-action-hover-shadow: 0 10px 32px -8px rgba(8, 9, 10, .36);
  --bg: var(--lighting-base);
}

:root:has(#grokit-dark-theme:not([media="not all"])),
:root:has(link[href="/admin.css"]) {
  --lighting-base: #08090a;
  --lighting-field-1: rgba(242, 244, 243, .06);
  --lighting-field-2: rgba(242, 244, 243, .045);
  --lighting-field-3: rgba(242, 244, 243, .035);
  --lighting-grain-opacity: .05;
  --lighting-header: rgba(8, 9, 10, .88);
  --lighting-panel: #101214;
  --lighting-panel-top: rgba(242, 244, 243, .025);
  --lighting-panel-edge: rgba(242, 244, 243, .045);
  --lighting-panel-shadow: 0 12px 36px -24px rgba(0, 0, 0, .7);
  --lighting-open-top: rgba(242, 244, 243, .018);
  --lighting-action: linear-gradient(180deg, #fff, #f2f4f3);
  --lighting-action-text: #08090a;
  --lighting-action-border: #f2f4f3;
  --lighting-action-edge: rgba(255, 255, 255, .8);
  --lighting-action-shadow: 0 6px 26px -8px rgba(242, 244, 243, .55);
  --lighting-action-hover-shadow: 0 10px 32px -8px rgba(242, 244, 243, .7);
}

:root {
  background-color: var(--lighting-base);
}

:root body {
  isolation: isolate;
  background-color: var(--lighting-base);
}

#grokit-atmosphere {
  position: fixed;
  inset: -14%;
  z-index: -1;
  overflow: hidden;
  overflow: clip;
  contain: paint;
  pointer-events: none;
  user-select: none;
}

#grokit-atmosphere > i {
  position: absolute;
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#grokit-atmosphere > i:nth-child(1) {
  width: 64vw;
  left: -14vw;
  top: -20vh;
  background: radial-gradient(circle, var(--lighting-field-1), transparent 63%);
  animation-name: grokit-light-drift-one;
  animation-duration: 26s;
}

#grokit-atmosphere > i:nth-child(2) {
  width: 56vw;
  right: -16vw;
  top: 12vh;
  background: radial-gradient(circle, var(--lighting-field-2), transparent 63%);
  animation-name: grokit-light-drift-two;
  animation-duration: 33s;
}

#grokit-atmosphere > i:nth-child(3) {
  width: 60vw;
  left: 18vw;
  bottom: -32vh;
  background: radial-gradient(circle, var(--lighting-field-3), transparent 63%);
  animation-name: grokit-light-drift-three;
  animation-duration: 39s;
}

#grokit-atmosphere > .grokit-atmosphere-grain {
  position: absolute;
  inset: 0;
  background: url("/lighting-grain.svg") repeat;
  background-size: 220px 220px;
  opacity: var(--lighting-grain-opacity);
}

#grokit-atmosphere[data-lighting-paused="true"] > i {
  animation-play-state: paused;
}

@keyframes grokit-light-drift-one {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(16vw, 12vh) scale(1.22); }
}

@keyframes grokit-light-drift-two {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-14vw, -14vh) scale(1.16); }
}

@keyframes grokit-light-drift-three {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-15vw, -9vh) scale(1.24); }
}

/* Only the site header gets glass; conversation bubbles remain opaque. */
:root:root body > header {
  background: var(--lighting-header);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--lighting-panel-edge);
}

:root :is(.card, .spot, .catalog-card, .service-card, .login-card),
:root body > main:not([class]) .box {
  background-color: var(--lighting-panel);
  background-image: linear-gradient(180deg, var(--lighting-panel-top), transparent 44%);
  box-shadow: inset 0 1px 0 var(--lighting-panel-edge), var(--lighting-panel-shadow);
}

/* Open sections share the moving atmosphere instead of masking it with a fill. */
:root .catalog-ticker {
  background: transparent;
}

:root .catalog-empty,
:root .reveal[class~="bg-[var(--fg)]"]:has([data-site-ca-link]) {
  background: linear-gradient(155deg, var(--lighting-open-top), transparent 55%);
  color: var(--fg);
  box-shadow: inset 0 1px 0 var(--lighting-panel-edge);
}

:root .reveal[class~="bg-[var(--fg)]"]:has([data-site-ca-link]) {
  /* Recolor the captured important utilities through their own palette tokens. */
  --color-white: var(--fg);
  --color-black: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--lighting-panel-edge);
}

:root .reveal[class~="bg-[var(--fg)]"]:has([data-site-ca-link]) [class~="text-white/70"] {
  color: var(--fg-2);
}

/* Primary actions share the reference glow, including native admin controls. */
:root :is(.btn-primary, .catalog-button, .button-primary,
  button[class~="bg-[var(--fg)]"][class~="hover:bg-[#2a2a2a]"]) {
  background: var(--lighting-action);
  border-color: var(--lighting-action-border);
  color: var(--lighting-action-text);
  box-shadow: inset 0 1px 0 var(--lighting-action-edge), var(--lighting-action-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}

@media (hover: hover) {
  :root :is(.btn-primary, .catalog-button, .button-primary,
    button[class~="bg-[var(--fg)]"][class~="hover:bg-[#2a2a2a]"]):hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--lighting-action);
    border-color: var(--lighting-action-border);
    color: var(--lighting-action-text);
    box-shadow: inset 0 1px 0 var(--lighting-action-edge), var(--lighting-action-hover-shadow);
  }
}

:root :is(.btn-primary, .catalog-button, .button-primary,
  button[class~="bg-[var(--fg)]"][class~="hover:bg-[#2a2a2a]"]):is(:disabled, [aria-disabled="true"]) {
  box-shadow: none;
}

/* Portrait screens need wider fields, without full-page canvases or filters. */
@media (max-width: 640px) {
  #grokit-atmosphere > i:nth-child(1) {
    width: 110vmin;
    left: -35vw;
    top: -14vh;
  }

  #grokit-atmosphere > i:nth-child(2) {
    width: 100vmin;
    right: -36vw;
    top: 22vh;
  }

  #grokit-atmosphere > i:nth-child(3) {
    width: 110vmin;
    left: 8vw;
    bottom: -18vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  #grokit-atmosphere > i {
    animation: none;
  }

  :root :is(.btn-primary, .catalog-button, .button-primary,
    button[class~="bg-[var(--fg)]"][class~="hover:bg-[#2a2a2a]"]) {
    transition: none;
  }
}

@media (forced-colors: active) {
  #grokit-atmosphere { display: none; }

  :root,
  :root body,
  :root body > header,
  :root :is(.card, .spot, .catalog-card, .service-card, .login-card),
  :root .catalog-ticker,
  :root .catalog-empty,
  :root .reveal[class~="bg-[var(--fg)]"]:has([data-site-ca-link]),
  :root body > main:not([class]) .box {
    background: Canvas;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  :root :is(.btn-primary, .catalog-button, .button-primary,
    button[class~="bg-[var(--fg)]"][class~="hover:bg-[#2a2a2a]"]),
  :root :is(.btn-primary, .catalog-button, .button-primary,
    button[class~="bg-[var(--fg)]"][class~="hover:bg-[#2a2a2a]"]):hover {
    background: ButtonFace;
    border-color: ButtonText;
    color: ButtonText;
    box-shadow: none;
  }
}