/*
 * Noctane brand overlay, linked after the release stylesheet by
 * scripts/build-experience-noctane.mjs and served as /experiences/noctane/brand.css.
 * It restyles the chrome only: the media keeps its baked-in studio, so the car
 * sits on the carbon like a lit panel.
 */
@import url('https://fonts.googleapis.com/css2?family=Funnel+Sans:wght@300..800&display=swap');

:root {
  /* Ink is --brand-ink from src/components/brand/brand-kit.css. */
  --sky: #0a0a0a;
  --studio: #0a0a0a;
  /*
   * Signal orange, the complement of the blue studio and the farthest hue from the
   * template's green. Dark text on it measures 7.59:1; against the studio blue 1.44:1.
   */
  --acid: #ff7a1a;
  --on-acid: #0a0a0a;
  --panel: #161616;
  /* White, not gray: the detail copy sits over the blue cutaway renders, where gray fails. */
  --muted: #ffffff;
  --line: #ffffff1f;
  font-family: 'Funnel Sans', sans-serif;
  letter-spacing: -0.02em;
}

/*
 * The release hardcodes its green in five alpha glows. Each is derived from --acid
 * here, so the accent changes in one place. Percentages match the release's alpha bytes
 * (14 ≈ 8%, 20 ≈ 13%, 28 ≈ 16%, 50 ≈ 31%).
 */
.hotspot-ring {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--acid) 8%, transparent);
}
.hotspot-ring:after {
  border-color: color-mix(in srgb, var(--acid) 31%, transparent);
}
.hotspot.active .hotspot-ring,
.hotspot:hover:not(:disabled) .hotspot-ring {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--acid) 13%, transparent);
}
.annotation.open > span:first-child {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acid) 16%, transparent);
}
.back:hover:not(:disabled) {
  background: color-mix(in srgb, var(--acid) 70%, #fff);
}

/*
 * The detail copy floats over the light blue of the cutaway renders, where even white
 * text is thin. A dark glass panel behind it gives the text its own contrast. Scoped to
 * the floating layout: at 900px wide or 780px tall and under, the release moves the copy
 * below the image with a top padding the size of the image, which a panel would cover.
 */
@media (min-width: 901px) and (min-height: 781px) {
  .detail-copy {
    padding: 20px 22px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--studio) 72%, transparent);
    backdrop-filter: blur(10px);
  }
}

/* The credit link the build script swaps in for "Independent concept". */
a.concept-label:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A 1px hairline replaces the release's 3px white frame, which glared on carbon. */
.media-envelope {
  box-shadow: 0 0 0 1px #ffffff33;
}

/* Carbon weave from four radial gradients on an 8px tile: no image request. */
html,
.experience {
  background:
    radial-gradient(#000 15%, transparent 16%) 0 0,
    radial-gradient(#000 15%, transparent 16%) 4px 4px,
    radial-gradient(#ffffff0d 15%, transparent 20%) 0 1px,
    radial-gradient(#ffffff0d 15%, transparent 20%) 4px 5px;
  background-color: #161616;
  background-size: 8px 8px;
}