/* ============================================================
   THE LIFECYCLE ARC

   Seven objects — envelope, phone, message bubble, bell, calendar, cart and
   paper plane — drift up a curve on the right of the screen, and each one
   does something once, halfway along.

   Built out of divs and gradients, the way the reference illustrations in
   references/LC-inspo are. No images, no SVG, no library: nothing here adds a
   network request, and the whole file is a few KB on a stylesheet that
   already loads.

   The rules that keep it cheap at runtime, which is the part that actually
   costs something:

   - only `offset-distance`, `transform` and `opacity` are animated. Those are
     composited, so they do not repaint;
   - nothing that moves carries a `filter`, a `backdrop-filter`, or a large
     soft shadow. Those repaint every frame and are what turns an effect like
     this into a fan spinning up;
   - shading is stacked gradients on one element rather than more elements;
   - `scripts/theme.js` pauses the whole thing when the tab is not visible.
   ============================================================ */

/* Fixed, not absolute: the arc stays with the viewport as the page scrolls
   rather than sitting inside the hero and leaving with it. z-index 0 puts it
   under all page content, and under the header, which is z-index 1000 — so
   objects pass behind the nav on their way out instead of over it. */
.lca {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* The hero's own content has to sit above it. */
.lc-hero { position: relative; }
.lc-hero > .container { position: relative; z-index: 1; }

.lca-track {
  position: absolute;
  /* Wide, because a Bézier's control points pull the curve rather than
     passing through it: with the controls at x=530 in a 540px box the actual
     curve only reached about x=460, and seven objects came out looking like a
     column with a wobble instead of an arc. The box is wider than the swing
     needs so the controls have somewhere to sit. */
  right: 10px;
  top: 0;
  bottom: 0;
  width: 620px;

  /* The curve starts below the bottom edge of the screen and leaves behind
     the nav, so it uses the full height of the window rather than appearing
     halfway up it.

     `path()` only takes pixels, so this default is written for a roughly
     820px-tall window and `theme.js` rewrites it from the real viewport
     height on load and on resize. The default is a sensible curve on its own,
     which is what renders if the script never gets to run. */
  --lca-path: path("M 300 890 C 600 634, 610 342, 420 203 C 330 114, 200 65, 140 20");

  --lca-dur: 30s;
  --lca-grey-1: #464e5c;
  --lca-grey-2: #2b313b;
  --lca-grey-3: #59616f;
  --lca-edge: rgba(255, 255, 255, 0.16);
  --lca-lit: rgba(255, 255, 255, 0.42);
}

/* ---- travel ---------------------------------------------------------
   Each object gets the same duration and a negative delay, so they are
   already spread along the curve on the first frame rather than filing out
   of the bottom one at a time for the first half-minute. */
.lca-o {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--lca-w);
  height: var(--lca-h);
  margin: calc(var(--lca-h) / -2) 0 0 calc(var(--lca-w) / -2);
  offset-path: var(--lca-path);
  offset-rotate: 0deg;
  animation: lca-travel var(--lca-dur) linear var(--lca-delay) infinite;
  will-change: transform;
}

@keyframes lca-travel {
  0%   { offset-distance: 0%;   opacity: 0;    transform: scale(0.86); }
  12%  {                        opacity: 0.92; }
  50%  {                                       transform: scale(1); }
  80%  {                        opacity: 0.92; }
  95%  {                        opacity: 0; }
  100% { offset-distance: 100%; opacity: 0;    transform: scale(0.92); }
}

/* Every part of every object sits in the same box. */
.lca-o span,
.lca-o i {
  position: absolute;
  display: block;
  box-sizing: border-box;
}

/* The beat animations below all run on `var(--lca-dur)` with the object's own
   `var(--lca-delay)`. Sharing the duration and the delay is what keeps a beat
   pinned to the middle of its own arc — there is no timer and nothing to
   drift. tests/check-arc.js fails if any of them is given its own timing. */

/* ============================================================
   1 · ENVELOPE — the flap opens and a card rises out of it
   ============================================================ */
/* A shallow perspective threw the flap's tip toward the viewer as it swung
   past vertical, scaling it up and pushing it clear of the envelope — which
   is what read as the flap coming off. Flatter perspective, and it stops a
   little short of flat so it still looks hinged rather than laid out. */
.lca-env { perspective: 900px; }

/* The pocket and the back carry the same fill deliberately. They started
   different, with a highlight along the pocket's top edge, and that edge drew
   a hard line straight across the closed envelope under the flap — a real
   envelope has no such line. Matching them makes the seam disappear when the
   flap is down. The card is still hidden because the pocket is opaque, not
   because you can see where it begins. */
.env-back,
.env-front {
  background:
    linear-gradient(155deg, var(--lca-grey-3) 0%, var(--lca-grey-1) 46%, var(--lca-grey-2) 100%);
}
.env-back {
  inset: 0;
  z-index: 1;
  border-radius: 8px;
  /* The dark band is the shadow the open flap throws back onto the envelope.
     It is what ties the two together — without something cast across the
     join, an open flap is just a triangle resting above a rectangle. Hidden
     under the flap while it is closed, so it costs nothing there. */
  box-shadow:
    inset 0 1px 0 var(--lca-edge),
    inset 0 7px 9px -6px rgba(0, 0, 0, 0.55);
}
.env-front {
  inset: 38% 0 0 0;
  z-index: 3;
  border-radius: 0 0 8px 8px;
  /* The fill is stretched and bottom-anchored so it is the same slice of the
     ramp the back shows at that height, rather than restarting the gradient
     partway down the envelope. */
  background-size: 100% 263%;
  background-position: 0 100%;
}
.env-card {
  left: 16%;
  top: 36%;
  z-index: 2;
  width: 68%;
  height: 52%;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff5d8 0%, #ffd54d 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  transform: translateY(14%);
  animation: lca-env-card var(--lca-dur) ease-in-out var(--lca-delay) infinite;
}
/* A note, not a blank swatch. Three ruled lines and a face, in the same warm
   brown the parcel's ribbon uses, so the two yellow objects agree. */
.env-line {
  left: 11%;
  height: 3px;
  border-radius: 2px;
  background: rgba(120, 84, 0, 0.42);
}
.env-line:nth-child(1) { top: 24%; width: 42%; }
.env-line:nth-child(2) { top: 45%; width: 33%; }
.env-line:nth-child(3) { top: 66%; width: 38%; }
/* One element. The eyes are two hard-stopped radial gradients rather than two
   more divs, which is the trick the skeuomorph reference uses everywhere. */
.env-face {
  right: 9%;
  top: 22%;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(120, 84, 0, 0.42);
  background:
    radial-gradient(circle at 32% 36%, rgba(120, 84, 0, 0.42) 0 1.6px, transparent 1.7px),
    radial-gradient(circle at 68% 36%, rgba(120, 84, 0, 0.42) 0 1.6px, transparent 1.7px);
}
/* The smile is the bottom edge of a wider ellipse tucked inside the face. */
.env-face::after {
  content: "";
  position: absolute;
  left: 24%;
  top: 38%;
  width: 52%;
  height: 34%;
  border-bottom: 2px solid rgba(120, 84, 0, 0.42);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.env-flap {
  left: 1.5%;
  top: 0;
  z-index: 4;
  width: 97%;
  height: 52%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  /* Lightest at the hinge, so the flap meets the envelope in the envelope's
     own colour and the far edge falls away into shadow. Reversing this and
     making the hinge the dark end was worse: the join became the one high
     contrast edge on the object, which is exactly where you do not want one. */
  background: linear-gradient(180deg, var(--lca-grey-3) 0%, var(--lca-grey-1) 96%);
  transform-origin: 50% 0;
  animation: lca-env-flap var(--lca-dur) ease-in-out var(--lca-delay) infinite;
}

@keyframes lca-env-flap {
  0%, 40%    { transform: rotateX(0deg); }
  47%, 68%   { transform: rotateX(-156deg); }
  75%, 100%  { transform: rotateX(0deg); }
}
@keyframes lca-env-card {
  0%, 45%   { transform: translateY(14%); }
  56%, 64%  { transform: translateY(-72%); }
  73%, 100% { transform: translateY(14%); }
}

/* ============================================================
   2 · PHONE — a push notification drops in and settles
   ============================================================ */

/* Clipped to the handset. The notification parks above the top edge, which is
   outside this box — without the clip it just hovers over the phone in plain
   sight for the two thirds of the loop it is meant to be hidden. (-170% was
   not far enough: the pill is 20px tall sitting 20px down, so a fifth of it
   was still showing. Measured, not guessed.) */
.lca-phone { overflow: hidden; border-radius: 16px; }

.ph-body {
  inset: 0;
  border-radius: 16px;
  background:
    linear-gradient(150deg, var(--lca-grey-3) 0%, var(--lca-grey-1) 40%, var(--lca-grey-2) 100%);
  box-shadow: inset 0 1px 0 var(--lca-edge);
}
.ph-screen {
  inset: 10px 6px 14px;
  border-radius: 9px;
  background: linear-gradient(165deg, #232936 0%, #171c25 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
  /* The notification lives inside the screen and is clipped by it, so it
     appears from under the top bezel the way a real one does. Clipping it to
     the handset instead put it on top of the frame, sliding in over the
     phone's own edge. */
  overflow: hidden;
}
.ph-notch {
  left: 34%;
  top: 4px;
  width: 32%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
}
/* The home bar. Two pixels of detail, and the object stops being a rectangle
   and starts being a phone. */
.ph-bar {
  left: 32%;
  bottom: 5px;
  width: 36%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
}
/* Positioned against the screen now, not the handset. */
.ph-notif {
  left: 5px;
  top: 6px;
  right: 5px;
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffe08a 0%, #ffd54d 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transform: translateY(-280%);
  animation: lca-ph-notif var(--lca-dur) cubic-bezier(0.34, 1.7, 0.5, 1) var(--lca-delay) infinite;
}
/* Two grey bars on the pill, so it reads as a message rather than a swatch. */
.ph-notif::before,
.ph-notif::after {
  content: "";
  position: absolute;
  left: 6px;
  height: 3px;
  border-radius: 2px;
  background: rgba(40, 30, 0, 0.45);
}
.ph-notif::before { top: 5px;  width: 58%; }
.ph-notif::after  { top: 12px; width: 38%; }

@keyframes lca-ph-notif {
  0%, 44%   { transform: translateY(-280%); }
  54%, 74%  { transform: translateY(0); }
  82%, 100% { transform: translateY(-280%); }
}

/* ============================================================
   3 · MESSAGE BUBBLE — typing dots resolve into a message
   ============================================================ */
.sms-bub {
  inset: 0 0 14% 0;
  border-radius: 16px;
  background:
    linear-gradient(160deg, var(--lca-grey-3) 0%, var(--lca-grey-1) 45%, var(--lca-grey-2) 100%);
  box-shadow: inset 0 1px 0 var(--lca-edge);
}
/* The tail. It used to hang below the bubble in one flat colour, which read
   as a separate grey triangle floating near the corner: the bubble's gradient
   stopped at its own edge and the tail started a different fill. It overlaps
   the bubble now, and carries the bottom-left slice of the same gradient, so
   the two are continuous. */
.sms-bub::after {
  content: "";
  position: absolute;
  /* Clear of the 16px corner radius: at 15px the tail's flat top met the
     bubble's curve and left a notch down the left side, which is most of what
     read as "not connected". */
  left: 22px;
  top: 100%;
  margin-top: -9px;
  width: 20px;
  height: 18px;
  clip-path: polygon(0 0, 100% 0, 20% 100%);
  background:
    linear-gradient(160deg, var(--lca-grey-3) 0%, var(--lca-grey-1) 45%, var(--lca-grey-2) 100%);
  background-size: 460% 620%;
  background-position: 14% 100%;
}
.sms-dots, .sms-lines {
  left: 14%;
  right: 14%;
  top: 26%;
  height: 40%;
}
.sms-dots { animation: lca-sms-dots var(--lca-dur) steps(1, end) var(--lca-delay) infinite; }
.sms-dots i {
  top: 22%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: lca-dot 1.35s ease-in-out infinite;
}
.sms-dots i:nth-child(1) { left: 4%; }
.sms-dots i:nth-child(2) { left: 40%; animation-delay: 0.18s; }
.sms-dots i:nth-child(3) { left: 76%; animation-delay: 0.36s; }

.sms-lines { opacity: 0; animation: lca-sms-lines var(--lca-dur) ease-out var(--lca-delay) infinite; }
.sms-lines i {
  left: 0;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.62);
}
.sms-lines i:nth-child(1) { top: 6%;  width: 100%; }
.sms-lines i:nth-child(2) { top: 46%; width: 62%; }
/* The reaction is the one spot of colour on this object. */
.sms-lines i:nth-child(3) {
  top: 22%;
  left: auto;
  right: -13%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe08a, #ffd54d);
}

@keyframes lca-dot {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
@keyframes lca-sms-dots {
  0%, 46%   { opacity: 1; }
  47%, 79%  { opacity: 0; }
  80%, 100% { opacity: 1; }
}
@keyframes lca-sms-lines {
  0%, 48%   { opacity: 0; transform: scale(0.9); }
  56%, 76%  { opacity: 1; transform: scale(1); }
  84%, 100% { opacity: 0; transform: scale(0.9); }
}

/* ============================================================
   4 · BELL — rings, and a badge pops on the corner
   ============================================================ */
.bl-swing {
  inset: 0 0 14% 0;
  transform-origin: 50% 8%;
  animation: lca-bl-swing var(--lca-dur) ease-in-out var(--lca-delay) infinite;
}
/* The loop at the crown. Without it the dome reads as a thimble. */
.bl-cap {
  left: 44%;
  top: 1%;
  width: 12%;
  height: 11%;
  border-radius: 50% 50% 0 0;
  background: var(--lca-grey-3);
}
/* The dome: an asymmetric radius does the whole silhouette, the way the
   skeuomorph reference builds its shapes. */
.bl-dome {
  left: 14%;
  top: 10%;
  width: 72%;
  height: 74%;
  border-radius: 50% 50% 16% 16% / 62% 62% 20% 20%;
  background:
    radial-gradient(ellipse at 32% 18%, var(--lca-lit) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(150deg, var(--lca-grey-3) 0%, var(--lca-grey-1) 48%, var(--lca-grey-2) 100%);
}
.bl-lip {
  left: 4%;
  top: 78%;
  width: 92%;
  height: 9%;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--lca-grey-3), var(--lca-grey-2));
}
.bl-clap {
  left: 42%;
  top: 89%;
  width: 16%;
  height: 13%;
  border-radius: 0 0 50% 50%;
  background: var(--lca-grey-3);
}
.bl-badge {
  right: 2%;
  top: 2%;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe08a 0%, #ffd54d 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  transform: scale(0);
  animation: lca-bl-badge var(--lca-dur) cubic-bezier(0.34, 1.8, 0.5, 1) var(--lca-delay) infinite;
}

@keyframes lca-bl-swing {
  0%, 44%   { transform: rotate(0deg); }
  49%       { transform: rotate(11deg); }
  54%       { transform: rotate(-9deg); }
  59%       { transform: rotate(6deg); }
  64%       { transform: rotate(-3deg); }
  70%, 100% { transform: rotate(0deg); }
}
@keyframes lca-bl-badge {
  0%, 47%   { transform: scale(0); }
  55%, 78%  { transform: scale(1); }
  86%, 100% { transform: scale(0); }
}

/* ============================================================
   5 · CALENDAR — the date turns over
   ============================================================ */
.cal-body {
  inset: 12% 0 0 0;
  border-radius: 9px;
  /* Paper, but not white: at full paper brightness this was the loudest thing
     on the page and pulled the eye off the headline. */
  background:
    linear-gradient(160deg, #7d8492 0%, #5d6472 58%, #474e5b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.cal-head {
  inset: 12% 0 auto 0;
  height: 22%;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, var(--lca-grey-3), var(--lca-grey-1));
}
.cal-ring {
  top: 2%;
  width: 8px;
  height: 20%;
  border-radius: 4px;
  background: var(--lca-grey-3);
}
.cal-ring       { left: 24%; }
.cal-ring--b    { left: 66%; }

/* The date cross-fades, and two earlier versions of it did not work. A 3D
   flip using `preserve-3d` rendered sheared, because `will-change: transform`
   on the travelling parent makes it its own compositing context and the
   child's 3D context does not survive that. An odometer rolling inside an
   overflow-hidden window then cut the digits against a hard edge at the top
   and bottom of the window on the way past. Two stacked numbers fading and
   drifting have no clipping edge to show and no 3D to break. */
/* Selector, not `.cal-num`: `.lca-o span` sets display:block and carries one
   more element in its specificity, so a bare `.cal-num { display: grid }`
   lost and the date sat in the top-left corner of its box as ordinary flow.
   It looked like a positioning mistake and was a cascade one. */
.lca-cal .cal-num {
  inset: 32% 0 5% 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #ffc21f;
}
.lca-cal .cal-num--a { animation: lca-cal-out var(--lca-dur) ease-in-out var(--lca-delay) infinite; }
.lca-cal .cal-num--b { opacity: 0; animation: lca-cal-in var(--lca-dur) ease-in-out var(--lca-delay) infinite; }

@keyframes lca-cal-out {
  0%, 46%   { opacity: 1; transform: translateY(0); }
  53%, 100% { opacity: 0; transform: translateY(-26%); }
}
@keyframes lca-cal-in {
  0%, 48%   { opacity: 0; transform: translateY(26%); }
  55%, 100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   6 · CART — an item drops into the basket
   ============================================================ */
.ct-basket {
  left: 16%;
  top: 30%;
  width: 76%;
  height: 40%;
  /* A trapezoid, which is what makes it a basket rather than a box. */
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
  background:
    linear-gradient(160deg, var(--lca-grey-3) 0%, var(--lca-grey-1) 48%, var(--lca-grey-2) 100%);
}
/* The rim. Every cart drawn from the front has one, and without it the basket
   was a bare wedge with a floating stick next to it. It is also what the
   handle now visibly joins onto. */
.ct-rim {
  left: 12%;
  top: 26%;
  width: 84%;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--lca-grey-3), var(--lca-grey-1));
}
/* Anchored on the left end of the rim and swept back and up from there, so
   the handle joins the cart rather than hovering beside it. */
.ct-handle {
  left: -14%;
  top: 28%;
  width: 28%;
  height: 6px;
  border-radius: 3px;
  background: var(--lca-grey-3);
  /* Pivoted on its right end, which sits on the left end of the rim, so the
     bar rises away from the join. The sign matters and I had it backwards:
     with the origin on the right, a negative rotation swings the free end
     DOWN, and the handle drooped off the side of the basket instead of
     rising off it. */
  transform: rotate(40deg);
  transform-origin: 100% 50%;
}
.ct-wheel {
  top: 80%;
  width: 15%;
  height: 15%;
  border-radius: 50%;
  background: var(--lca-grey-3);
}
.ct-wheel      { left: 28%; }
.ct-wheel--b   { left: 62%; }
/* A parcel rather than a yellow rectangle: the ribbon is what makes a small
   block read as a thing that was bought. */
.ct-item {
  left: 37%;
  top: 34%;
  width: 28%;
  height: 26%;
  border-radius: 4px;
  background: linear-gradient(160deg, #ffe9a8 0%, #ffd54d 62%, #f0b81f 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  transform: translateY(-190%) rotate(-14deg);
  animation: lca-ct-item var(--lca-dur) cubic-bezier(0.4, 1.5, 0.55, 1) var(--lca-delay) infinite;
}
.ct-item::before,
.ct-item::after {
  content: "";
  position: absolute;
  background: rgba(120, 84, 0, 0.34);
}
.ct-item::before { left: 42%; top: 0; width: 16%; height: 100%; }
.ct-item::after  { left: 0; top: 40%; width: 100%; height: 16%; }

@keyframes lca-ct-item {
  0%, 44%   { opacity: 0; transform: translateY(-190%) rotate(-14deg); }
  47%       { opacity: 1; transform: translateY(-120%) rotate(-10deg); }
  56%, 78%  { opacity: 1; transform: translateY(0) rotate(0deg); }
  86%, 100% { opacity: 0; transform: translateY(-190%) rotate(-14deg); }
}

/* ============================================================
   7 · PAPER PLANE — it flicks forward and leaves a trail
   ============================================================ */
/* The classic two-triangle paper plane, nose right: tip, back-top corner, the
   notch where the two halves meet, back-bottom corner. The first attempt swept
   all four points and came out looking like a dart. */
/* The plane is drawn nose-right and then tilted as a whole. The tilt cannot
   go on .lca-o, which is already animating a transform, so it gets its own
   wrapper — one extra element to keep the nose pointing roughly the way the
   object is travelling instead of flying sideways up the screen. */
.pl-tilt {
  inset: 0;
  transform: rotate(-28deg);
}
.pl-wing {
  inset: 0;
  clip-path: polygon(100% 46%, 2% 8%, 36% 54%, 8% 92%);
  background:
    linear-gradient(120deg, var(--lca-grey-3) 0%, var(--lca-grey-1) 52%, var(--lca-grey-2) 100%);
}
/* The near half, a shade darker. It is the whole reason this reads as folded
   paper rather than as an arrow. */
.pl-fold {
  inset: 0;
  clip-path: polygon(100% 46%, 36% 54%, 8% 92%);
  background: var(--lca-grey-2);
}
.pl-trail {
  left: -10%;
  top: 34%;
  width: 40%;
  height: 34%;
  opacity: 0;
  animation: lca-pl-trail var(--lca-dur) ease-out var(--lca-delay) infinite;
}
.pl-trail i {
  left: 0;
  height: 3px;
  border-radius: 2px;
  background: #ffd54d;
}
.pl-trail i:nth-child(1) { top: 4%;  width: 100%; }
.pl-trail i:nth-child(2) { top: 44%; width: 62%; opacity: 0.7; }
.pl-trail i:nth-child(3) { top: 84%; width: 38%; opacity: 0.45; }

@keyframes lca-pl-trail {
  0%, 45%   { opacity: 0; transform: translateX(16%); }
  53%, 70%  { opacity: 1; transform: translateX(0); }
  80%, 100% { opacity: 0; transform: translateX(16%); }
}

/* ============================================================
   PEOPLE SET — the testimonials page's own cast
   ============================================================
   Same grammar as the seven home objects and the skeuomorph reference:
   a radial specular over a linear form gradient, asymmetric radii for
   silhouettes, one amber accent per object. Hands are mittens with
   finger grooves, not knobs — a groove field drawn by a repeating
   gradient sized onto the finger zone. */

/* -- two people mid-conversation ----------------------------------- */
.lca-convo .co-p {
  top: 48%;
  width: 32%;
  height: 50%;
  border-radius: 46% 46% 12px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(150deg, var(--lca-grey-3) 0%, var(--lca-grey-1) 55%, var(--lca-grey-2) 100%);
  box-shadow: inset 0 1px 0 var(--lca-edge);
}
.lca-convo .co-p::before {
  content: "";
  position: absolute;
  left: 26%;
  top: -38%;
  width: 48%;
  height: 42%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, var(--lca-lit) 0%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(150deg, var(--lca-grey-3) 0%, var(--lca-grey-1) 62%, var(--lca-grey-2) 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
}
.lca-convo .co-p--l { left: 6%; }
.lca-convo .co-p--r { right: 6%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(150deg, var(--lca-grey-1) 0%, var(--lca-grey-2) 100%); }
.lca-convo .co-p--r::before {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(150deg, var(--lca-grey-1) 0%, var(--lca-grey-2) 100%);
}
/* Two bubbles trade the floor: the grey one speaks first, then hands
   over to the amber reply mid-arc. */
.lca-convo .co-bub {
  width: 38%;
  height: 22%;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}
.lca-convo .co-bub::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 40%;
  height: 4px;
  border-radius: 2px;
}
.lca-convo .co-bub::after {
  content: "";
  position: absolute;
  top: 100%;
  margin-top: -2px;
  width: 13px;
  height: 15px;
}
.lca-convo .co-bub--a {
  left: 0;
  top: -2%;
  transform-origin: 30% 130%;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(150deg, #8b95a8 0%, #6b7484 60%, #59616f 100%);
  animation: lca-co-a var(--lca-dur) ease-in-out var(--lca-delay) infinite;
}
.lca-convo .co-bub--a::before { background: rgba(20, 24, 32, 0.45); }
.lca-convo .co-bub--a::after {
  right: 18%;
  clip-path: polygon(0 0, 100% 0, 80% 100%);
  background: #59616f;
}
.lca-convo .co-bub--b {
  right: 0;
  top: -2%;
  transform-origin: 70% 130%;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(150deg, #ffe08a 0%, #ffd54d 55%, #eda62a 100%);
  box-shadow:
    inset 0 -2px 3px rgba(150, 105, 26, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.35);
  animation: lca-co-b var(--lca-dur) cubic-bezier(0.34, 1.7, 0.5, 1) var(--lca-delay) infinite;
}
.lca-convo .co-bub--b::before { background: rgba(63, 44, 4, 0.45); }
.lca-convo .co-bub--b::after {
  left: 18%;
  clip-path: polygon(0 0, 100% 0, 20% 100%);
  background: #eda62a;
}
@keyframes lca-co-a {
  0%, 42%   { transform: scale(1); opacity: 1; }
  50%, 94%  { transform: scale(0.55); opacity: 0; }
  100%      { transform: scale(1); opacity: 1; }
}
@keyframes lca-co-b {
  0%, 48%   { transform: scale(0); opacity: 0; }
  56%, 88%  { transform: scale(1); opacity: 1; }
  96%, 100% { transform: scale(0); opacity: 0; }
}

/* -- three teammates ----------------------------------------------- */
.lca-trio .tr-p {
  top: 26%;
  width: 32%;
  height: 60%;
  border-radius: 46% 46% 10px 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(150deg, var(--lca-grey-1) 0%, var(--lca-grey-2) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.lca-trio .tr-p::before {
  content: "";
  position: absolute;
  left: 26%;
  top: -38%;
  width: 48%;
  height: 42%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(150deg, var(--lca-grey-1) 0%, var(--lca-grey-2) 100%);
}
.lca-trio .tr-p--l { left: 2%; }
.lca-trio .tr-p--r { right: 2%; }
.lca-trio .tr-p--c {
  left: 33%;
  top: 20%;
  width: 34%;
  height: 66%;
  background:
    radial-gradient(ellipse at 34% 20%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(150deg, #ffe08a 0%, #ffd54d 52%, #eda62a 100%);
  box-shadow:
    inset 0 -3px 5px rgba(150, 105, 26, 0.45),
    0 3px 8px rgba(0, 0, 0, 0.4);
  z-index: 1;
  animation: lca-tr-rise var(--lca-dur) ease-in-out var(--lca-delay) infinite;
}
.lca-trio .tr-p--c::before {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(150deg, #ffe08a, #f5c026);
}
@keyframes lca-tr-rise {
  0%, 46%   { transform: translateY(5%); }
  58%, 78%  { transform: translateY(0); }
  92%, 100% { transform: translateY(5%); }
}

/* -- a five-star rating -------------------------------------------- */
/* The literal shape of a testimonial: five stars on a slim plaque,
   and the fifth one lands mid-arc. */
.lca-stars .st-pill {
  inset: 12% 0;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(150deg, var(--lca-grey-1) 0%, var(--lca-grey-2) 100%);
  box-shadow:
    inset 0 1px 0 var(--lca-edge),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 9px rgba(0, 0, 0, 0.35);
  transform: rotate(-2.5deg);
}
.lca-stars .st-pill i {
  top: 17%;
  width: 14%;
  height: 66%;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: linear-gradient(180deg, #ffe08a 0%, #ffd54d 55%, #eda62a 100%);
}
.lca-stars .st-pill i:nth-child(1) { left: 6%; }
.lca-stars .st-pill i:nth-child(2) { left: 24%; }
.lca-stars .st-pill i:nth-child(3) { left: 42%; }
.lca-stars .st-pill i:nth-child(4) { left: 60%; }
.lca-stars .st-pill i:nth-child(5) {
  left: 78%;
  animation: lca-st-five var(--lca-dur) cubic-bezier(0.34, 1.7, 0.5, 1) var(--lca-delay) infinite;
}
@keyframes lca-st-five {
  0%, 13%   { transform: scale(0) rotate(-72deg); opacity: 0; }
  20%, 90%  { transform: scale(1) rotate(0deg); opacity: 1; }
  96%, 100% { transform: scale(0) rotate(-72deg); opacity: 0; }
}

/* -- two links, interlocked ---------------------------------------- */
/* Partnership without the hands: a grey link and an amber link woven
   over and under. The weave is a clipped copy of the grey ring drawn
   back on top at one crossing. The beat is a strain that holds. */
.lca-links .lk-tug {
  inset: 0;
  animation: lca-lk-tug var(--lca-dur) ease-in-out var(--lca-delay) infinite;
}
.lca-links .lk-a,
.lca-links .lk-weave {
  left: 4%;
  top: 16%;
  width: 54%;
  height: 66%;
  border: 11px solid var(--lca-grey-1);
  border-radius: 999px;
  transform: rotate(-18deg);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.14),
    inset 0 -2px 3px rgba(0, 0, 0, 0.3),
    0 3px 7px rgba(0, 0, 0, 0.35);
}
.lca-links .lk-b {
  right: 4%;
  top: 16%;
  width: 54%;
  height: 66%;
  border: 11px solid #f5c026;
  border-radius: 999px;
  transform: rotate(18deg);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.35),
    inset 0 -2px 3px rgba(150, 105, 26, 0.45),
    0 3px 7px rgba(0, 0, 0, 0.35);
}
/* The grey ring's lower-right arc re-drawn over the amber ring. The
   clip edges sit where the amber border will cover them, so the
   over-pass has no visible cut. */
.lca-links .lk-weave {
  box-shadow: none;
  clip-path: polygon(63% 40%, 100% 40%, 100% 100%, 63% 100%);
}
@keyframes lca-lk-tug {
  0%, 46%   { transform: rotate(0deg) scaleX(1); }
  53%       { transform: rotate(-2deg) scaleX(1.035); }
  60%       { transform: rotate(1.5deg) scaleX(1.02); }
  67%, 100% { transform: rotate(0deg) scaleX(1); }
}

/* -- a video call -------------------------------------------------- */
.lca-call .vc-screen {
  inset: 4% 10% 26% 10%;
  border-radius: 10px;
  border: 3px solid var(--lca-grey-3);
  background:
    radial-gradient(ellipse at 50% 36%, rgba(91, 147, 255, 0.16) 0%, rgba(91, 147, 255, 0) 68%),
    linear-gradient(180deg, #232a3a 0%, #161b26 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 4px 10px rgba(0, 0, 0, 0.35);
}
.lca-call .vc-screen::after {
  content: "";
  position: absolute;
  left: 8%;
  top: 0;
  width: 30%;
  height: 100%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0) 100%);
}
.lca-call .vc-person {
  left: 38%;
  top: 34%;
  width: 24%;
  height: 34%;
  border-radius: 48% 48% 6px 6px;
  background: linear-gradient(180deg, #6b7484, var(--lca-grey-1));
  box-shadow: inset 0 1px 0 var(--lca-lit);
}
.lca-call .vc-person::before {
  content: "";
  position: absolute;
  left: 25%;
  top: -46%;
  width: 50%;
  height: 48%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, #6b7484, var(--lca-grey-1));
}
.lca-call .vc-hand {
  left: 64%;
  top: 30%;
  width: 8%;
  height: 15%;
  border-radius: 45%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, #ffe08a, #eda62a);
  box-shadow: 0 0 6px rgba(255, 213, 77, 0.45);
  transform-origin: 50% 90%;
  animation: lca-vc-wave var(--lca-dur) ease-in-out var(--lca-delay) infinite;
}
.lca-call .vc-base {
  left: 2%;
  right: 2%;
  bottom: 10%;
  height: 12%;
  border-radius: 3px 3px 8px 8px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 7px, rgba(255, 255, 255, 0) 7px 9px),
    linear-gradient(180deg, #6b7484 0%, var(--lca-grey-3) 30%, var(--lca-grey-1) 100%);
  box-shadow:
    inset 0 1px 0 var(--lca-lit),
    0 3px 6px rgba(0, 0, 0, 0.35);
}
@keyframes lca-vc-wave {
  0%, 46%  { transform: rotate(0deg); }
  52%      { transform: rotate(-22deg); }
  58%      { transform: rotate(14deg); }
  64%      { transform: rotate(-18deg); }
  70%, 100% { transform: rotate(0deg); }
}

/* ============================================================
   MERIT SET — the certifications page's own cast
   ============================================================ */

/* -- award ribbon -------------------------------------------------- */
.lca-award .aw-tail {
  bottom: 0;
  width: 22%;
  height: 38%;
  background: linear-gradient(180deg, var(--lca-grey-1) 0%, var(--lca-grey-2) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  box-shadow: inset 0 4px 5px rgba(0, 0, 0, 0.3);
}
.lca-award .aw-tail--l { left: 24%; transform: rotate(12deg); }
.lca-award .aw-tail--r { right: 24%; transform: rotate(-12deg); }
.lca-award .aw-medal {
  left: 11%;
  top: 3%;
  width: 78%;
  height: 64%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, var(--lca-lit) 0%, rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle, var(--lca-grey-1) 0%, var(--lca-grey-1) 58%, var(--lca-grey-3) 66%, var(--lca-grey-2) 74%),
    linear-gradient(150deg, var(--lca-grey-3), var(--lca-grey-2));
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.18),
    inset 0 -3px 6px rgba(0, 0, 0, 0.35),
    0 4px 9px rgba(0, 0, 0, 0.35);
}
.lca-award .aw-medal::before {
  content: "";
  position: absolute;
  inset: -9%;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--lca-grey-2) 0deg 15deg, rgba(0, 0, 0, 0) 15deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%);
  mask: radial-gradient(circle, transparent 62%, #000 63%);
  z-index: -1;
}
.lca-award .aw-medal::after {
  content: "";
  position: absolute;
  left: 30%;
  top: 30%;
  width: 38%;
  height: 22%;
  border-left: 6px solid #ffd54d;
  border-bottom: 6px solid #ffd54d;
  border-radius: 2px;
  transform: rotate(-48deg);
  animation: lca-aw-check var(--lca-dur) cubic-bezier(0.34, 1.7, 0.5, 1) var(--lca-delay) infinite;
}
@keyframes lca-aw-check {
  0%, 46%   { transform: rotate(-48deg) scale(0); opacity: 0; }
  56%, 84%  { transform: rotate(-48deg) scale(1); opacity: 1; }
  94%, 100% { transform: rotate(-48deg) scale(0); opacity: 0; }
}

/* -- trophy -------------------------------------------------------- */
.lca-cup .tp-cup {
  left: 27%;
  top: 5%;
  width: 46%;
  height: 42%;
  border-radius: 8px 8px 48% 48% / 8px 8px 74% 74%;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0%, rgba(255, 255, 255, 0.22) 26%, rgba(255, 255, 255, 0.05) 46%, rgba(0, 0, 0, 0.10) 74%, rgba(0, 0, 0, 0.30) 100%),
    linear-gradient(180deg, var(--lca-grey-3) 0%, var(--lca-grey-1) 55%, var(--lca-grey-2) 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.22),
    inset 0 -4px 6px rgba(0, 0, 0, 0.3);
}
.lca-cup .tp-cup::before,
.lca-cup .tp-cup::after {
  content: "";
  position: absolute;
  top: 8%;
  width: 40%;
  height: 64%;
  border: 5px solid var(--lca-grey-1);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 var(--lca-edge);
}
.lca-cup .tp-cup::before { left: -32%; border-right-color: transparent; transform: rotate(6deg); }
.lca-cup .tp-cup::after { right: -32%; border-left-color: transparent; transform: rotate(-6deg); }
.lca-cup .tp-stem {
  left: 43%;
  top: 45%;
  width: 14%;
  height: 18%;
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, var(--lca-grey-2), var(--lca-grey-3) 40%, var(--lca-grey-1));
}
.lca-cup .tp-base {
  left: 32%;
  top: 62%;
  width: 36%;
  height: 8%;
  border-radius: 4px;
  background: linear-gradient(180deg, #6b7484 0%, var(--lca-grey-1) 60%, var(--lca-grey-2) 100%);
  box-shadow: inset 0 1px 0 var(--lca-lit);
}
.lca-cup .tp-base::after {
  content: "";
  position: absolute;
  left: -14%;
  top: 100%;
  width: 128%;
  height: 110%;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--lca-grey-3) 0%, var(--lca-grey-1) 55%, var(--lca-grey-2) 100%);
  box-shadow:
    inset 0 1px 0 var(--lca-lit),
    0 3px 6px rgba(0, 0, 0, 0.4);
}
.lca-cup .tp-star {
  left: 39%;
  top: 13%;
  width: 22%;
  height: 21%;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: linear-gradient(180deg, #ffe08a, #eda62a);
  animation: lca-tp-glint var(--lca-dur) ease-in-out var(--lca-delay) infinite;
}
@keyframes lca-tp-glint {
  0%, 48%   { transform: scale(1); }
  58%       { transform: scale(1.35) rotate(18deg); }
  68%, 100% { transform: scale(1); }
}

/* -- graduation cap ------------------------------------------------ */
/* The board is lit straight from above: bright at the top corner,
   falling evenly down both faces — the diagonal wash it had before
   made the diamond look bent. */
.lca-cap .cap-board {
  left: 4%;
  top: 6%;
  width: 92%;
  height: 46%;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(180deg, #707a8c 0%, var(--lca-grey-3) 34%, var(--lca-grey-1) 72%, var(--lca-grey-2) 100%);
}
.lca-cap .cap-board::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 10%;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: var(--lca-grey-2);
  z-index: -1;
}
.lca-cap .cap-board::after {
  content: "";
  position: absolute;
  left: 47%;
  top: 40%;
  width: 6%;
  height: 14%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--lca-lit), var(--lca-grey-1) 70%);
}
.lca-cap .cap-crown {
  left: 31%;
  top: 40%;
  width: 38%;
  height: 30%;
  border-radius: 0 0 12px 12px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0%, rgba(255, 255, 255, 0.10) 30%, rgba(0, 0, 0, 0.05) 60%, rgba(0, 0, 0, 0.28) 100%),
    linear-gradient(180deg, var(--lca-grey-1), var(--lca-grey-2));
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.3);
}
.lca-cap .cap-tass {
  left: 71%;
  top: 26%;
  width: 3px;
  height: 38%;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffe08a, #ffd54d);
  transform: rotate(14deg);
  transform-origin: 50% 4%;
  animation: lca-cap-swing var(--lca-dur) ease-in-out var(--lca-delay) infinite;
}
.lca-cap .cap-tass::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 10px;
  height: 12px;
  border-radius: 45% 45% 50% 50%;
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, #ffe08a, #eda62a);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
@keyframes lca-cap-swing {
  0%, 44%   { transform: rotate(14deg); }
  54%       { transform: rotate(-12deg); }
  64%       { transform: rotate(20deg); }
  74%, 100% { transform: rotate(14deg); }
}

/* -- certificate scroll -------------------------------------------- */
.lca-scroll .sc-page {
  inset: 0 6% 0 6%;
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.30) 0%, rgba(255, 255, 255, 0.10) 10%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.10) 90%, rgba(0, 0, 0, 0.30) 100%),
    linear-gradient(180deg, #59616f 0%, #4a5260 100%);
  box-shadow:
    inset 0 1px 0 var(--lca-edge),
    0 4px 9px rgba(0, 0, 0, 0.35);
}
.lca-scroll .sc-page::before,
.lca-scroll .sc-page::after {
  content: "";
  position: absolute;
  left: 18%;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.38);
}
.lca-scroll .sc-page::before { top: 22%; width: 56%; }
.lca-scroll .sc-page::after { top: 44%; width: 38%; }
.lca-scroll .sc-roll,
.lca-scroll .sc-roll--r {
  top: -4%;
  width: 13%;
  height: 108%;
  border-radius: 7px;
  background:
    linear-gradient(90deg, var(--lca-grey-2) 0%, #6b7484 45%, var(--lca-grey-1) 75%, var(--lca-grey-2) 100%),
    var(--lca-grey-1);
  box-shadow:
    inset 0 1px 0 var(--lca-edge),
    0 2px 5px rgba(0, 0, 0, 0.4);
}
.lca-scroll .sc-roll { left: 0; }
.lca-scroll .sc-roll--r { right: 0; }
.lca-scroll .sc-seal {
  right: 12%;
  bottom: 8%;
  width: 20%;
  height: 27%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(150deg, #ffe08a 0%, #ffd54d 52%, #eda62a 100%);
  box-shadow:
    inset 0 0 0 2px rgba(150, 105, 26, 0.45),
    inset 0 -2px 3px rgba(150, 105, 26, 0.5),
    0 3px 6px rgba(0, 0, 0, 0.4);
  animation: lca-sc-stamp var(--lca-dur) cubic-bezier(0.4, 1.5, 0.55, 1) var(--lca-delay) infinite;
}
@keyframes lca-sc-stamp {
  0%, 46%   { transform: scale(1.7); opacity: 0; }
  54%, 84%  { transform: scale(1); opacity: 1; }
  94%, 100% { transform: scale(1.7); opacity: 0; }
}

/* -- the brain, putting the reps in -------------------------------- */
/* From the reference: a brain overhead-pressing a barbell. The brain
   is a lumpy blob with a centre fissure and one gyrus line; the plates
   carry the colour, and the lift is the beat. */
.lca-brain .br-lift {
  inset: 0;
  animation: lca-br-press var(--lca-dur) ease-in-out var(--lca-delay) infinite;
}
.lca-brain .br-bar {
  left: 0;
  right: 0;
  top: 13%;
  height: 5%;
  border-radius: 4px;
  /* Collar bands sit just inside the plates, like a loaded bar. */
  background:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 16.5%,
      rgba(255, 255, 255, 0.28) 16.5%, rgba(255, 255, 255, 0.28) 19.5%,
      rgba(255, 255, 255, 0) 19.5%, rgba(255, 255, 255, 0) 80.5%,
      rgba(255, 255, 255, 0.28) 80.5%, rgba(255, 255, 255, 0.28) 83.5%,
      rgba(255, 255, 255, 0) 83.5%),
    linear-gradient(180deg, #6b7484 0%, var(--lca-grey-1) 55%, var(--lca-grey-2) 100%);
  box-shadow: inset 0 1px 0 var(--lca-lit);
}
/* The plates: a tall amber disc with a rim ring, and a second smaller
   plate stacked outside it drawn by the box-shadow copy. */
.lca-brain .br-bar::before,
.lca-brain .br-bar::after {
  content: "";
  position: absolute;
  top: -240%;
  width: 6.5%;
  height: 580%;
  border-radius: 42%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #ffe08a 0%, #ffd54d 55%, #eda62a 100%);
  box-shadow:
    inset 0 0 0 2.5px rgba(150, 105, 26, 0.4),
    inset 0 2px 2px rgba(255, 255, 255, 0.35),
    0 3px 6px rgba(0, 0, 0, 0.4);
}
.lca-brain .br-bar::before {
  left: 7.5%;
  box-shadow:
    inset 0 0 0 2.5px rgba(150, 105, 26, 0.4),
    inset 0 2px 2px rgba(255, 255, 255, 0.35),
    -11px 0 0 -3px #f0b435,
    0 3px 6px rgba(0, 0, 0, 0.4);
}
.lca-brain .br-bar::after {
  right: 7.5%;
  box-shadow:
    inset 0 0 0 2.5px rgba(150, 105, 26, 0.4),
    inset 0 2px 2px rgba(255, 255, 255, 0.35),
    11px 0 0 -3px #f0b435,
    0 3px 6px rgba(0, 0, 0, 0.4);
}
.lca-brain .br-arm {
  top: 16%;
  width: 4.5%;
  height: 20%;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--lca-grey-3), var(--lca-grey-1));
}
.lca-brain .br-arm--l { left: 27%; transform: rotate(10deg); }
.lca-brain .br-arm--r { right: 27%; transform: rotate(-10deg); }
.lca-brain .br-body {
  left: 16%;
  top: 30%;
  width: 68%;
  height: 54%;
  border-radius: 56% 60% 50% 54% / 72% 74% 40% 42%;
  /* Folds are soft crescent shadows, four per hemisphere plus crown
     bumps, under the specular — a wrinkled cortex without any drawn
     lines that would read as scratches at this scale. */
  background:
    radial-gradient(ellipse 18% 11% at 22% 18%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) 65%),
    radial-gradient(ellipse 18% 11% at 42% 12%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0) 65%),
    radial-gradient(ellipse 18% 11% at 62% 14%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) 65%),
    radial-gradient(ellipse 18% 11% at 80% 22%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0) 65%),
    radial-gradient(ellipse 24% 15% at 28% 40%, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 65%),
    radial-gradient(ellipse 19% 12% at 36% 66%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 65%),
    radial-gradient(ellipse 16% 10% at 14% 58%, rgba(0, 0, 0, 0.17), rgba(0, 0, 0, 0) 65%),
    radial-gradient(ellipse 24% 15% at 70% 36%, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0) 65%),
    radial-gradient(ellipse 19% 12% at 66% 64%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 65%),
    radial-gradient(ellipse 16% 10% at 88% 56%, rgba(0, 0, 0, 0.17), rgba(0, 0, 0, 0) 65%),
    radial-gradient(circle at 32% 20%, var(--lca-lit) 0%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(150deg, var(--lca-grey-3) 0%, var(--lca-grey-1) 55%, var(--lca-grey-2) 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.16),
    inset 0 -4px 6px rgba(0, 0, 0, 0.35),
    0 4px 9px rgba(0, 0, 0, 0.35);
}
/* The centre fissure. */
.lca-brain .br-body::before {
  content: "";
  position: absolute;
  left: 49%;
  top: 5%;
  width: 3px;
  height: 74%;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.30);
}
/* A drawn gyrus arc on each lobe — the box-shadow offset paints the
   mirrored twin without a second element. */
.lca-brain .br-body::after {
  content: "";
  position: absolute;
  left: 13%;
  top: 22%;
  width: 24%;
  height: 26%;
  border: 3px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}
.lca-brain .br-leg {
  bottom: 2%;
  width: 6.5%;
  height: 15%;
  border-radius: 3px 3px 5px 5px;
  background: linear-gradient(180deg, var(--lca-grey-1), var(--lca-grey-2));
}
.lca-brain .br-leg--l { left: 38%; }
.lca-brain .br-leg--r { right: 38%; }
@keyframes lca-br-press {
  0%, 46%   { transform: translateY(0); }
  52%       { transform: translateY(-7%); }
  58%       { transform: translateY(0); }
  64%       { transform: translateY(-7%); }
  70%, 100% { transform: translateY(0); }
}

/* ============================================================
   PAUSING, AND PEOPLE WHO ASKED FOR LESS MOTION
   ============================================================ */

/* Set by scripts/theme.js when the tab is hidden. This used to be keyed to
   the hero scrolling out of view, which stopped meaning anything once the arc
   became fixed to the viewport: it is on screen for the whole page now. */
.lca.is-idle * { animation-play-state: paused !important; }

/* Below this there is no clear space to the right of the copy, and the
   objects would run under the text. */
@media (max-width: 1100px) { .lca { display: none; } }

@media (prefers-reduced-motion: reduce) {
  /* Not hidden — frozen. The objects stay as a still composition along the
     same curve, so the right-hand side keeps its shape. */
  .lca-o,
  .lca-o * { animation: none !important; }
  .lca-o { opacity: 0.92; transform: none; }
  .lca-env   { offset-distance: 12%; }
  .lca-phone { offset-distance: 25%; }
  .lca-sms   { offset-distance: 38%; }
  .lca-bell  { offset-distance: 51%; }
  .lca-cal   { offset-distance: 64%; }
  .lca-cart  { offset-distance: 77%; }
  .lca-plane { offset-distance: 89%; }
  /* Frozen mid-beat looks broken, so the moving parts sit at rest. */
  .env-flap    { transform: rotateX(0deg); }
  .env-card    { transform: translateY(14%); }
  .ph-notif    { transform: translateY(0); }
  .sms-dots    { opacity: 1; }
  .sms-lines   { opacity: 0; }
  .bl-badge    { transform: scale(1); }
  .cal-num--a  { opacity: 1; transform: none; }
  .cal-num--b  { opacity: 0; }
  .ct-item     { opacity: 1; transform: none; }
  .pl-trail    { opacity: 1; transform: none; }
}

/* If the browser cannot follow a path, the objects would all stack in one
   corner. Better to show nothing than a pile. */
@supports not (offset-path: path("M 0 0 L 1 1")) {
  .lca { display: none; }
}


/* The testimonials and certifications casts drift the same way the home
   cast does. This used to be paused as part of the blur-era perf budget;
   with backdrop-filter gone site-wide, the travel animation is a plain
   composited transform and measures fine. */

.lca.is-idle,
.lca.is-idle * { animation-play-state: paused !important; }