/* clouds.css — the weather a site lives in.
 *
 * js/clouds.js builds the markup; everything here is presentation. Two rules
 * govern the whole file:
 *
 *   1. Nothing in the field participates in layout. Every node is absolutely
 *      positioned inside a fixed, clipped, non-scrolling layer, so the field
 *      cannot contribute a byte of CLS no matter how the page reflows. The
 *      root is clipped, so it can never widen the document either.
 *   2. Nothing animates through anything but transform. No blur, no blend
 *      modes, no filters — those re-rasterise on every composited frame, and
 *      this field is on screen behind every page.
 *
 * The silhouettes are hand-drawn paths defined in clouds.js. This file
 * deliberately does NOT build a cloud out of border-radius pills: the
 * reference artwork's cloud is exactly that shape, and copying it is the
 * failure the design brief names. */

.cf {
  /* One palette for the whole field. Presets restyle these three values; the
     field never needs to know what it is sitting behind. */
  --cf-body: #FFFFFF;
  --cf-shade: #241E45;
  --cf-rim: rgba(36, 30, 69, .08);

  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

/* Mounted into a positioned container (a scene, a section) instead of onto
 * <body>: absolutely placed, kept behind its siblings by DOM order. */
.cf--host {
  position: absolute;
  z-index: 0;
}

/* ── depth ───────────────────────────────────────────────────────────────
 * Each tier owns a slice of the parallax and a slice of the contrast. The
 * numbers that matter are written by clouds.js; the paint character lives
 * here. */

.cf__layer {
  position: absolute;
  left: 0;
  right: 0;
  will-change: transform;
}

.cf__cloud {
  position: absolute;
  will-change: transform;
}

.cf__cloud svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cf__cloud .cf__body {
  fill: var(--cf-body);
  stroke: var(--cf-rim);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

/* The underside is what separates "a white shape" from "weather". Each
 * silhouette carries its own, so the two read as one piece of volume. */
.cf__cloud .cf__shade {
  fill: var(--cf-shade);
}

/* ── depth painting ──────────────────────────────────────────────────────
 * Distance is painted, not simulated: far weather is thin and low-contrast,
 * near weather keeps its edge and its weight. */

.cf__layer--far { opacity: .46; }
.cf__layer--far .cf__shade { opacity: .07; }

.cf__layer--mid { opacity: .74; }
.cf__layer--mid .cf__shade { opacity: .10; }

.cf__layer--near { opacity: .92; }
.cf__layer--near .cf__shade { opacity: .14; }

/* Foreground is a fragment catching the light, not a wall. */
.cf__layer--fore { opacity: .38; }
.cf__layer--fore .cf__shade { opacity: .05; }

/* ── mobile composition ───────────────────────────────────────────────────
 * A phone has neither the width nor the height for fourteen clouds. The
 * wide, quiet ones stay; the small punctuation is dropped. Display, not
 * removal: the controller keeps its list stable across a breakpoint. */

@media (max-width: 719px) {
  .cf__cloud.is-mobile-off { display: none; }
}


/* The underside is a registered copy of the silhouette, not a second
   drawing — so it must never carry an outline of its own, or the offset
   shows as a doubled edge. */
.cf__cloud .cf__shade {
  stroke: none;
}
/* ── art direction ───────────────────────────────────────────────────────
 * The same weather, tuned per room. Tints stay near neutral so the field
 * never competes with a world's own accent colour. */

.cf[data-preset="desk"] {
  --cf-body: #FBF6FF;
  --cf-shade: #3A2F63;
  --cf-rim: rgba(58, 47, 99, .1);
}

.cf[data-preset="transit"] {
  --cf-body: #FFFFFF;
  --cf-shade: #1E2340;
  --cf-rim: rgba(30, 35, 64, .14);
}

.cf[data-preset="contact"] {
  --cf-body: #FFF4E6;
  --cf-shade: #4A2F2A;
  --cf-rim: rgba(74, 47, 42, .1);
}

/* ── reduced motion ──────────────────────────────────────────────────────
 * clouds.js stops its clock under this query. This is the other half, so the
 * field is a still photograph even if the stylesheet arrives without its
 * module — and so nothing here can start moving on its own. */

@media (prefers-reduced-motion: reduce) {
  .cf__layer,
  .cf__cloud {
    will-change: auto;
    transition: none !important;
    animation: none !important;
  }
}