Glass Pricing Tiers

"use client";

import { useEffect, useId, useRef, useState } from "react";
import type { CSSProperties, ReactNode } from "react";

/**
 * GlassPricingTiers — a pricing section where each plan is a thicker pane of
 * glass than the one before, and the plan you choose puts a lens over its
 * price.
 *
 * The plans read as a material scale: the first is a thin, nearly clear pane;
 * each step up is thicker (more blur, more saturation, a wider bent rim in
 * Chromium, a deeper shadow) and carries a little more of the accent tint.
 * Choose a plan (click it anywhere, or use the arrow keys, since the plans
 * are a real radio group) and a clear lens forms over its price: the digits
 * swell about 1.2× through it under a raised dome of glass (a cast shadow,
 * a specular arc and a caustic at its foot), and the real digits hide beneath
 * it so nothing doubles. It forms by magnifying, never by fading. A light

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}