/* ---- the one button: a plate of frosted glass with a light along its lower edge (Plan 21) ----
 *
 * Patrick's reference of 2026-09-20 (a picture, not a file: eight frosted-glass controls on a warm
 * grey wall - Launch, Secondary, a text field, a dropdown, toggles, tabs, a plan alert - each a
 * soft-cornered translucent plate, lit along its bottom edge, the light spilling onto the wall
 * under it; bold sentence-case labels on the primary, regular on the secondary; no ornament).
 * It replaces the Plan 18 plate with a seed at each end and an aurora rule, which he was "not a
 * fan of".
 *
 * The glass is built without backdrop-filter. Three of these buttons sit over the film's canvas
 * (the header's Apply, Learn more, Skip intro) and a blur there would be recomputed on every frame
 * of the scrub; over a near-uniform dark ground the frost reads from the light plate, the top
 * highlight and the lit edge, which cost nothing. What the reference has that this does not is
 * the blur of whatever lies behind the plate, and over these pages nothing does.
 *
 * Anatomy: the plate is the button's own background (a pale fill under a top-to-bottom sheen and a
 * pool of periwinkle rising from the bottom edge), its edges are inset shadows so nothing is
 * clipped and a real focus ring can sit outside it, ::after is the line of light along the lower
 * edge, and ::before is that light cast onto the ground beneath. Waking widens the line, lifts the
 * plate a shade and lets the cast spread.
 *
 * Variants: .primary (the one to press: a bolder label, a fuller plate, the brighter light),
 * .ghost (the quiet partner: the same plate, thinner, a regular label, the light lower - and violet
 * rather than periwinkle when it wakes), .small (the header size). */

.cta {
  --plate: rgba(207, 199, 216, .10);   /* the glass */
  --sheen: rgba(255, 255, 255, .10);   /* the highlight across its top */
  --edge: rgba(255, 255, 255, .30);    /* the hairline round it */
  --pool: rgba(143, 163, 255, .34);    /* the light rising from the bottom edge, inside the plate */
  --line-w: 62%;                       /* the line of light along the bottom edge */
  --line-a: .85;
  --cast: rgba(143, 163, 255, .55);    /* that light on the ground under the button */
  --cast-a: .75;
  --lift: 0px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.9rem; padding: .8rem 1.9rem; border: 1px solid transparent; border-radius: 13px;
  background-color: var(--plate); color: var(--ivory);
  cursor: pointer; text-decoration: none; text-align: center; white-space: nowrap;
  font: 500 .84rem/1 var(--font-body); letter-spacing: .02em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 0 0 1px var(--edge),
    inset 0 -1px 0 rgba(255, 255, 255, .05),
    0 14px 30px -14px rgba(5, 5, 7, .8);
  background-image:
    linear-gradient(to bottom, var(--sheen), rgba(255, 255, 255, .02) 48%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse at 50% 100%, var(--pool), rgba(143, 163, 255, .08) 46%, transparent 72%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 120% 62%;
  background-position: center, center bottom;
  transform: translateY(var(--lift));
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .35s ease, box-shadow .35s ease, color .3s ease,
    --line-w .6s cubic-bezier(.22, .8, .26, 1), --line-a .4s ease, --cast-a .5s ease, --lift .2s ease,
    transform .12s ease;
}
/* Registered so each can be transitioned at its own rate. They inherit: the line and the cast are the
 * button's two pseudo-elements, and a property that does not inherit is read there at its initial value,
 * whatever the button itself was told. */
@property --line-w { syntax: '<percentage>'; initial-value: 62%; inherits: true; }
@property --line-a { syntax: '<number>'; initial-value: .85; inherits: true; }
@property --cast-a { syntax: '<number>'; initial-value: .75; inherits: true; }
@property --lift { syntax: '<length>'; initial-value: 0px; inherits: true; }

/* The line of light along the lower edge: white at the middle, gone by the ends, with its own halo. */
.cta::after {
  content: ''; position: absolute; left: 50%; bottom: -1px; width: var(--line-w); height: 2px;
  transform: translateX(-50%); border-radius: 2px; pointer-events: none; opacity: var(--line-a);
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .9) 28%, #fff 50%, rgba(255, 255, 255, .9) 72%, transparent);
  box-shadow: 0 0 8px 1px rgba(220, 226, 255, .7), 0 0 22px 4px var(--cast);
}
/* The light on the ground beneath: an ellipse under the bottom edge, brightest where the line is. */
.cta::before {
  content: ''; position: absolute; left: 8%; right: 8%; bottom: -18px; height: 30px; z-index: -1;
  border-radius: 50%; pointer-events: none; opacity: var(--cast-a);
  background: radial-gradient(ellipse at 50% 0, var(--cast), rgba(143, 163, 255, .16) 42%, transparent 70%);
}

.cta:hover, .cta:focus-visible {
  --plate: rgba(207, 199, 216, .16);
  --sheen: rgba(255, 255, 255, .16);
  --edge: rgba(255, 255, 255, .42);
  --line-w: 90%; --line-a: 1; --cast-a: 1; --lift: -1px;
}
/* Nothing clips the button, so keyboard focus can have a ring of its own outside the plate. */
.cta:focus-visible { outline: 2px solid var(--mark-peri); outline-offset: 3px; }
.cta:active { transform: scale(.97); }
.cta:disabled { opacity: .6; cursor: wait; }
.cta:disabled:hover { --plate: rgba(207, 199, 216, .10); --line-w: 62%; --line-a: .85; --cast-a: .75; --lift: 0px; }

.cta.small { min-height: 2.2rem; padding: .55rem 1.25rem; border-radius: 10px; font-size: .74rem; }
.cta.small::before { bottom: -12px; height: 20px; }

/* The primary of a pair: the bolder label, a fuller plate, and the brighter light along the edge. */
.cta.primary {
  --plate: rgba(207, 199, 216, .15);
  --sheen: rgba(255, 255, 255, .16);
  --edge: rgba(255, 255, 255, .40);
  --pool: rgba(143, 163, 255, .48);
  --line-w: 72%; --line-a: 1; --cast-a: .9;
  font-weight: 600;
}
.cta.primary:hover, .cta.primary:focus-visible {
  --plate: rgba(207, 199, 216, .22);
  --edge: rgba(255, 255, 255, .55);
  --line-w: 96%;
}

/* Ghost: the quiet partner. The same glass, thinner, a regular label, the light lower at rest, and
 * violet rather than periwinkle when it wakes. It is the same height as the primary so a pair sits
 * level (the old hairline ghost was a size smaller and rode high beside its partner). */
.cta.ghost {
  --plate: rgba(207, 199, 216, .06);
  --sheen: rgba(255, 255, 255, .07);
  --edge: rgba(255, 255, 255, .22);
  --pool: rgba(143, 163, 255, .16);
  --line-w: 46%; --line-a: .55; --cast-a: .4;
  color: var(--mist); font-weight: 400;
}
.cta.ghost:hover, .cta.ghost:focus-visible {
  --plate: rgba(207, 199, 216, .12);
  --edge: rgba(255, 255, 255, .34);
  --pool: rgba(181, 123, 255, .3);
  --cast: rgba(181, 123, 255, .6);
  --line-w: 80%; --line-a: .9; --cast-a: .9;
  color: var(--ivory);
}

/* Reduced motion: the button still wakes, but nothing slides, widens or lifts. */
.reduced .cta, .reduced .cta::before, .reduced .cta::after { transition: none; }
.reduced .cta:hover, .reduced .cta:focus-visible { --lift: 0px; }

/* Phones. */
.phone .cta { min-height: 2.7rem; padding: .7rem 1.6rem; font-size: .8rem; }
.phone .cta.small { min-height: 2.1rem; padding: .5rem 1.1rem; font-size: .7rem; }