/* ============================================================
   Wonderful Selayar — Utilities
   The signature surface + glass primitives, ready to use.
   Everything else is built from tokens with inline styles.
   ============================================================ */

/* ── The ambient ocean surface ──
   Put on a full-page container (or body). Glass needs this behind it
   to blur, or it reads flat. */
.ws-surface{
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(47,198,221,.16), transparent 55%),
    radial-gradient(100% 70% at 90% 10%, rgba(245,185,85,.10), transparent 50%),
    radial-gradient(140% 120% at 50% 110%, rgba(19,79,108,.55), transparent 60%),
    linear-gradient(180deg, #04161f, #03101a 60%, #020a12);
  color:var(--foam);
  font-family:var(--font-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

/* Optional caustic light-rays overlay — the one ambient moment.
   Add an empty <div class="ws-rays"></div> as the first child of a
   positioned hero. */
.ws-rays{
  position:absolute; inset:-20% 0 0; z-index:0; pointer-events:none;
  background:
    conic-gradient(from 200deg at 30% -10%, transparent 0deg, rgba(98,226,242,.07) 25deg, transparent 60deg),
    conic-gradient(from 150deg at 75% -10%, transparent 0deg, rgba(98,226,242,.05) 30deg, transparent 70deg);
  animation:ws-drift 22s ease-in-out infinite alternate;
}
@keyframes ws-drift{
  from{transform:translateX(-3%) translateY(0)}
  to{transform:translateX(3%) translateY(2%)}
}

/* ── Glass primitives ── */
.glass{
  background:var(--glass-fill);
  backdrop-filter:blur(var(--blur)) saturate(135%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(135%);
  border:1px solid var(--glass-border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-2), inset 0 1px 0 var(--glass-edge);
}
.glass-strong{
  background:var(--glass-fill-strong);
  backdrop-filter:blur(var(--blur-strong)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--blur-strong)) saturate(140%);
  border:1px solid var(--glass-border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-3), inset 0 1px 0 var(--glass-edge);
}

/* ── Eyebrow (mono, uppercase, lagoon) ── */
.ws-eyebrow{
  font-family:var(--font-mono);
  font-size:var(--t-xs);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--lagoon-bright);
}

@media(prefers-reduced-motion:reduce){
  .ws-rays{animation:none}
}