/* The Vessel: one look for every vessel on the site (hero, cinema, features, device screens, 404).
   js/vessel.js draws the glass and the liquid in SVG; the halo and the floor light are plain layers that only
   change opacity and transform. Without JS a simple CSS capsule with a silver fill stands in. */

.vessel {
  --fill: 1;
  position: relative;
  display: block;
  flex: none;
  border-radius: 999px;
}

/* Fallback, before or without JS. */
.vessel:not(.is-live) {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}
.vessel__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--fill) * 100%);
  background: linear-gradient(0deg, var(--light-low), var(--light) 65%, var(--light-hi));
}
.vessel[data-state="off"] .vessel__fill { background: rgba(142, 142, 147, 0.25); }

.vessel__glass { position: absolute; inset: 0; display: block; overflow: visible; }

/* Halo: the liquid's light leaking through the glass into the air. Scaled to the level from the bottom. */
.vessel__halo {
  position: absolute;
  border-radius: 999px;
  background: radial-gradient(closest-side, var(--light), rgba(223, 230, 244, 0.35));
  filter: blur(var(--blur, 24px));
  mix-blend-mode: screen;
  transform-origin: 50% 100%;
  opacity: 0;
  pointer-events: none;
}
.vessel[data-state="off"] .vessel__halo { background: #8d93a5; }

/* Floor: the light the liquid throws on the floor, the vessel's dim reflection, and the contact line. */
.vessel__floor { position: absolute; left: 50%; top: 100%; width: 0; height: 0; pointer-events: none; }
.vessel__floor i { position: absolute; display: block; }
.vessel__pool {
  left: calc(var(--w, 6rem) * -1.3);
  top: calc(var(--w, 6rem) * -0.27);
  width: calc(var(--w, 6rem) * 2.6);
  height: calc(var(--w, 6rem) * 0.54);
  background: radial-gradient(closest-side, rgba(223, 230, 244, 0.75), rgba(223, 230, 244, 0.18) 55%, rgba(223, 230, 244, 0) 100%);
  opacity: 0;
}
.vessel__mirror {
  left: calc(var(--w, 6rem) * -0.4);
  top: 2px;
  width: calc(var(--w, 6rem) * 0.8);
  height: calc(var(--h, 18rem) * 0.3);
  border-radius: 0 0 999px 999px;
  background: linear-gradient(180deg, rgba(223, 230, 244, 0.26), rgba(223, 230, 244, 0) 75%);
  filter: blur(4px);
  transform-origin: 50% 0;
  opacity: 0;
}
.vessel__contact {
  left: calc(var(--w, 6rem) * -0.75);
  top: -1px;
  width: calc(var(--w, 6rem) * 1.5);
  height: 2px;
  filter: blur(1px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  opacity: 0.6;
  transition: opacity 600ms var(--ease-out);
}
.vessel.is-full .vessel__contact { opacity: 1; }
.vessel[data-state="off"] .vessel__pool, .vessel[data-state="off"] .vessel__mirror { display: none; }
/* Small vessels (device screens) keep their light to themselves. */
.vessel--ui .vessel__floor, .contrast__vessel .vessel__floor { display: none; }