/* Exact atmosphere values from cloudesign.space/product/, captured 2026-09-20.
   Gradient dimensions/positions, OKLCH stops, dot geometry and cursor styling
   match the current reference rather than its older local checkout. */
:root {
  --paper: #F7F8FA;
  --ink: #0E1116;
  --muted: rgba(14, 17, 22, .58);
  --line: rgba(14, 17, 22, .09);
  --blue: oklch(0.52 0.18 268);
}

html { background: #F7F8FA; overflow-x: clip; }
body, body.field-active { background: #F7F8FA; }
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1200px 720px at 12% -10%, oklch(0.78 0.11 268 / 0.5), transparent 66%),
    radial-gradient(1000px 640px at 88% 2%, oklch(0.84 0.08 214 / 0.45), transparent 64%),
    radial-gradient(1100px 820px at 62% 108%, oklch(0.85 0.08 318 / 0.4), transparent 68%);
}
/* The static grid remains visible when JavaScript is unavailable. */
.atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 13px 13px, rgba(14,17,22,.13) .9px, transparent 1px);
  background-size: 26px 26px;
}
.field-active .atmosphere::after { display: none; }
#field {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
}
.header {
  min-height: 72px;
  padding-block: 18px;
  background: rgba(247,248,250,.72);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(14,17,22,.08);
}
/* Keep the atmosphere continuous through the page, as in the reference. */
.hero, .work-section, .contact, .footer, .product-story { background: transparent; }
.contact, .footer, .contact .eyebrow, .contact-address { color: var(--ink); }
.contact .section-subtitle, .contact .translation, .contact .location,
.footer-top p, .footer-bottom, .product-story .translation { color: var(--muted); }
.contact-address { color: var(--blue); }
.contact-address a { border-color: var(--blue); }
.footer-brand span, .footer a:hover { color: var(--blue); }
.contact a:focus-visible, .footer a:focus-visible { outline-color: var(--blue); }
.work-section, .footer, .footer-bottom, .product-story, .domains,
.domain-list details:first-child { border-color: var(--line); }
.hero-bottom { border-top: 1px solid var(--line); }
.product-card { background: rgba(255,255,255,.66); }

.cursor-ui {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}
.cursor-inner {
  position: relative;
  transform: translate(10px, 12px);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cursor-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: oklch(0.52 0.18 268);
  box-shadow: 0 0 12px oklch(0.52 0.18 268 / .8);
}
.cursor-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  line-height: normal;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #F7F8FA;
  background: oklch(0.52 0.18 268);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
@media (any-pointer: coarse) and (not (any-pointer: fine)) {
  .cursor-ui { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-motion] { display: none !important; }
  .atmosphere::after { display: none; }
}
@media print {
  .atmosphere, #field, .cursor-ui { display: none; }
}