/* ===========================================================================
   Credolex — motion layer
   ---------------------------------------------------------------------------
   Sits on top of styles.css and must be linked after it. Every rule here only
   ever supplies motion; the resting state below the animation is the site's
   finished state, so with no script, an old browser or
   `prefers-reduced-motion: reduce`, the page looks exactly like production.

   Scenes are gated on [data-cxa="on"], which the visibility gate at the bottom
   of index.html sets while a watched block is genuinely on screen. Nothing
   loops off-screen, and every scene restarts from its first frame when the
   reader comes back to it.

   This file supersedes the older scroll-scrubbed versions of the spreadsheet
   and mail-stack entrances that used to live in styles.css. Those were removed
   rather than left as dead rules: view timelines are Chrome and Safari 26 only,
   so half the audience never saw them, and one system per element is the only
   way the next edit stays legible.
   =========================================================================== */

:root {
  --cxa-speed: 1;
  --cxa-ease: cubic-bezier(0.2, 0.7, 0.4, 1);
  --cxa-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* One cycle length for every looping scene, so the three steps and the
   spreadsheet feel like one system rather than four unrelated loops. */
.cxa-scene { --cyc: calc(8.4s / var(--cxa-speed)); }
.cxa-scene--sheet { --cyc: calc(9.6s / var(--cxa-speed)); }

/* ---------------------------------------------------------------------------
   Structure and resting state, deliberately OUTSIDE the motion query.
   Two of the elements the motion layer adds are halves of a crossfade, and one
   is a decorative circle in the ring's SVG. If their layout lived with the
   animations, then under `prefers-reduced-motion: reduce` -- or in any browser
   that matches neither motion query -- the page would show both halves of each
   crossfade at once and a bare black disc over the ring. What is below is the
   still frame the site already ships: the "Expired" pill, the "expired Aug 21"
   line, and nothing else visible.
   --------------------------------------------------------------------------- */

.cxa-glow {
  fill: none;
  stroke: rgba(15, 92, 78, 0.22);
  stroke-width: 20;
  opacity: 0;
}

.cxa-dropcard { position: relative; }
.drop { position: relative; overflow: hidden; }
.cxa-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(44, 74, 110, 0), rgba(44, 74, 110, 0.55), rgba(44, 74, 110, 0));
  opacity: 0;
}

.cxa-caret {
  display: inline-block;
  width: 1.5px;
  height: 15px;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--navy);
  opacity: 0;
}

/* Grid-stacked, not absolutely positioned. Absolute positioning sized the
   green "Current" pill to the width of "Expired" and spilled the tick outside
   its own fill. */
.cxa-pills { display: inline-grid; justify-items: end; }
.cxa-pills > * { grid-area: 1 / 1; }
.cxa-pills .cxa-now { opacity: 0; }
.cxa-now { display: inline-flex; align-items: center; gap: 5px; justify-content: center; }
.cxa-tick { flex: none; }
.cxa-req { display: grid; }
.cxa-req > span { grid-area: 1 / 1; }
.cxa-req .cxa-req-new { opacity: 0; }

/* The typed field is sized only while it is being typed into. Under `reduce`
   the date is left as the plain text the site ships. */
@media (prefers-reduced-motion: no-preference) {
  .fixinline__date { position: relative; white-space: nowrap; overflow: hidden; }
  .cxa-type {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    font-variant-numeric: tabular-nums;
    width: 10.2ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cxa-glow, .cxa-scan, .cxa-caret { display: none; }
}

@media (prefers-reduced-motion: no-preference) {

/* ---------------------------------------------------------------------------
   1. The hero ring. The only thing in the hero that moves.
   The arcs draw round off one clock (length and offset scale together, which
   is what makes it read as one sweep instead of three segments growing where
   they sit), the percentage counts with them, then the ring keeps a slow
   specular glint — enough that the panel is never a still frame, quiet enough
   to read a table beside.
   --------------------------------------------------------------------------- */

/* styles.css runs these at parse time. Ungate them, then re-hang them on the
   observer so the ring draws when the hero is actually looked at, and re-draws
   if the reader scrolls back to the top. The `hd-tick` and `hd-arc` keyframes
   and the `@property --n` they animate stay in styles.css and are reused. */
.hd__arc, .hd__n { animation: none; }

[data-cxa="on"] .hd__arc {
  animation: hd-arc 1.55s var(--cxa-out) both;
}
[data-cxa="on"] .hd__arc--due { animation-delay: 0.06s; }
[data-cxa="on"] .hd__arc--exp { animation-delay: 0.12s; }

/* Every counter on the panel, not just the ring: the five strip cells are
   `.hd__cellnum.hd__n` and count from the same keyframe. */
[data-cxa="on"] .hd__n { animation: hd-tick 1.5s var(--cxa-out) both; }

[data-cxa="on"] .hd__ringmid { animation: cxa-pop 1.7s var(--cxa-out) both; }
[data-cxa="on"] .hd__legend p { animation: cxa-rise 0.55s var(--cxa-out) both; }
[data-cxa="on"] .hd__legend p:nth-child(1) { animation-delay: 0.55s; }
[data-cxa="on"] .hd__legend p:nth-child(2) { animation-delay: 0.68s; }
[data-cxa="on"] .hd__legend p:nth-child(3) { animation-delay: 0.81s; }
[data-cxa="on"] .hd__legend p:nth-child(4) { animation-delay: 0.94s; }

[data-cxa="on"] .cxa-glow {
  animation: cxa-breathe 5.2s ease-in-out 1.5s infinite;
}

/* The rows below the ring take the second beat: one row at a time lights the
   way the product highlights a row you are about to act on, top to bottom, in
   the order a coordinator would work them. */
.hd__table tbody tr { --rowcyc: calc(9.6s / var(--cxa-speed)); }
[data-cxa="on"] .hd__table tbody tr {
  animation: cxa-row var(--rowcyc) linear 1.6s infinite;
}
[data-cxa="on"] .hd__table tbody tr:nth-child(1) { animation-delay: calc(1.6s + var(--rowcyc) * 0.000); }
[data-cxa="on"] .hd__table tbody tr:nth-child(2) { animation-delay: calc(1.6s + var(--rowcyc) * 0.125); }
[data-cxa="on"] .hd__table tbody tr:nth-child(3) { animation-delay: calc(1.6s + var(--rowcyc) * 0.250); }
[data-cxa="on"] .hd__table tbody tr:nth-child(4) { animation-delay: calc(1.6s + var(--rowcyc) * 0.375); }
[data-cxa="on"] .hd__table tbody tr:nth-child(5) { animation-delay: calc(1.6s + var(--rowcyc) * 0.500); }
[data-cxa="on"] .hd__table tbody tr:nth-child(6) { animation-delay: calc(1.6s + var(--rowcyc) * 0.625); }
[data-cxa="on"] .hd__table tbody tr:nth-child(7) { animation-delay: calc(1.6s + var(--rowcyc) * 0.750); }
[data-cxa="on"] .hd__table tbody tr:nth-child(8) { animation-delay: calc(1.6s + var(--rowcyc) * 0.875); }

@keyframes cxa-row {
  0%, 1% { background-color: rgba(244, 247, 251, 0); box-shadow: inset 0 0 0 rgba(44, 74, 110, 0); }
  4%, 10% { background-color: #F4F7FB; box-shadow: inset 3px 0 0 rgba(44, 74, 110, 0.55); }
  14%, 100% { background-color: rgba(244, 247, 251, 0); box-shadow: inset 0 0 0 rgba(44, 74, 110, 0); }
}

@keyframes cxa-pop {
  0% { opacity: 0; transform: scale(0.9); }
  40% { opacity: 1; }
  70% { transform: scale(1.035); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes cxa-rise {
  from { opacity: 0; transform: translateY(7px); }
}
@keyframes cxa-breathe {
  0%, 100% { opacity: 0.22; }
  50% { opacity: 0.7; }
}


/* ---------------------------------------------------------------------------
   2. The spreadsheet. Two dates lapse while you watch, then the note that says
   what that cost lands on top of them.
   --------------------------------------------------------------------------- */

[data-cxa="on"] .sheet__past {
  animation: cxa-lapse var(--cyc) var(--cxa-ease) infinite;
}
[data-cxa="on"] .sheet__grid tbody tr:first-child .sheet__past { animation-delay: 0.2s; }
[data-cxa="on"] .sheet__grid tbody tr:last-child .sheet__past { animation-delay: 0.9s; }

[data-cxa="on"] .sheet__sticky {
  animation: cxa-note var(--cyc) var(--cxa-out) infinite;
}
[data-cxa="on"] .compare__arrow { animation: cxa-nudge 3.2s var(--cxa-ease) infinite; }
[data-cxa="on"] .cxtable tbody tr { animation: cxa-rise 0.6s var(--cxa-out) both; }
[data-cxa="on"] .cxtable tbody tr:nth-child(1) { animation-delay: 0.10s; }
[data-cxa="on"] .cxtable tbody tr:nth-child(2) { animation-delay: 0.19s; }
[data-cxa="on"] .cxtable tbody tr:nth-child(3) { animation-delay: 0.28s; }
[data-cxa="on"] .cxtable tbody tr:nth-child(4) { animation-delay: 0.37s; }
[data-cxa="on"] .cxtable tbody tr:nth-child(5) { animation-delay: 0.46s; }
[data-cxa="on"] .cxtable tbody tr:nth-child(6) { animation-delay: 0.55s; }

@keyframes cxa-lapse {
  0%, 7% { background-color: rgba(255, 243, 241, 0); color: #1A1A1A; box-shadow: none; }
  15% { background-color: #FFE2DC; color: #9B2C21; box-shadow: inset 0 0 0 1.5px rgba(155, 44, 33, 0.55); }
  26%, 90% { background-color: #FFF3F1; color: #9B2C21; box-shadow: inset 0 0 0 1.5px rgba(155, 44, 33, 0); }
  100% { background-color: rgba(255, 243, 241, 0); color: #1A1A1A; box-shadow: none; }
}
@keyframes cxa-note {
  0%, 22% { opacity: 0; transform: translateY(-18px) rotate(-9deg); }
  34% { opacity: 1; transform: translateY(2px) rotate(4.5deg); }
  42%, 90% { opacity: 1; transform: translateY(0) rotate(3deg); }
  100% { opacity: 0; transform: translateY(-10px) rotate(-2deg); }
}
@keyframes cxa-nudge {
  0%, 60%, 100% { transform: translateX(0); }
  28% { transform: translateX(7px); }
}

/* ---------------------------------------------------------------------------
   3. Step one: the roster arriving. The file lands in the drop zone, the read
   sweeps down it, then the outcome counts itself out.
   --------------------------------------------------------------------------- */

[data-cxa="on"] .cxa-dropcard { animation: cxa-land var(--cyc) var(--cxa-out) infinite; }
[data-cxa="on"] .drop { animation: cxa-zone var(--cyc) var(--cxa-ease) infinite; }
[data-cxa="on"] .cxa-scan { animation: cxa-scan var(--cyc) linear infinite; }
[data-cxa="on"] .outcome { animation: cxa-outcome var(--cyc) var(--cxa-out) infinite; }
[data-cxa="on"] .outcome__n .hd__n { animation: cxa-count43 var(--cyc) var(--cxa-ease) infinite; }

@keyframes cxa-land {
  0%, 4% { opacity: 0; transform: translateY(-22px) scale(0.97); }
  13% { opacity: 1; transform: translateY(0) scale(1); }
  16% { transform: translateY(0) scale(0.99); }
  20%, 92% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(0.99); }
}
@keyframes cxa-zone {
  0%, 10% { border-color: #D9D2BE; background-color: rgba(44, 74, 110, 0); }
  18%, 30% { border-color: rgba(44, 74, 110, 0.55); background-color: rgba(44, 74, 110, 0.045); }
  42%, 100% { border-color: #D9D2BE; background-color: rgba(44, 74, 110, 0); }
}
@keyframes cxa-scan {
  0%, 16% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  34% { opacity: 1; transform: translateY(96px); }
  38%, 100% { opacity: 0; transform: translateY(96px); }
}
@keyframes cxa-outcome {
  0%, 32% { opacity: 0; transform: translateY(16px) scale(0.985); }
  44%, 92% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(8px) scale(0.99); }
}
@keyframes cxa-count43 {
  0%, 34% { --n: 0; }
  56%, 100% { --n: 43; }
}

/* ---------------------------------------------------------------------------
   4. Step two: the date typed in once. Ten characters, a press, and the row
   changes what it says about her.
   --------------------------------------------------------------------------- */

[data-cxa="on"] .cxa-type { animation: cxa-type var(--cyc) steps(10, end) infinite; }
[data-cxa="on"] .cxa-caret { animation: cxa-caret-life var(--cyc) linear infinite, cxa-blink 0.85s step-end infinite; }
[data-cxa="on"] .fixinline__save { animation: cxa-press var(--cyc) var(--cxa-ease) infinite; }
[data-cxa="on"] .cxa-was { animation: cxa-was var(--cyc) var(--cxa-ease) infinite; }
[data-cxa="on"] .cxa-now { animation: cxa-now var(--cyc) var(--cxa-out) infinite; }
[data-cxa="on"] .cxa-req-old { animation: cxa-was var(--cyc) var(--cxa-ease) infinite; }
[data-cxa="on"] .cxa-req-new { animation: cxa-now var(--cyc) var(--cxa-ease) infinite; }
[data-cxa="on"] .fixrow { animation: cxa-settle var(--cyc) var(--cxa-ease) infinite; }
[data-cxa="on"] .fixinline { animation: cxa-fixpanel var(--cyc) var(--cxa-out) infinite; }

@keyframes cxa-type {
  0%, 10% { width: 0; }
  38%, 100% { width: 10.2ch; }
}
/* The caret's blink animates background-color and its life animates opacity,
   so the two never fight over one property. */
@keyframes cxa-caret-life {
  0%, 8% { opacity: 0; transform: scaleY(0.4); }
  10%, 42% { opacity: 1; transform: scaleY(1); }
  46%, 100% { opacity: 0; transform: scaleY(1); }
}
@keyframes cxa-blink {
  0%, 100% { background-color: var(--navy); }
  50% { background-color: rgba(44, 74, 110, 0); }
}
@keyframes cxa-press {
  0%, 46% { transform: none; box-shadow: none; filter: none; }
  50% { transform: translateY(1px) scale(0.965); filter: brightness(0.9); }
  56% { transform: none; box-shadow: 0 0 0 3px rgba(44, 74, 110, 0.18); }
  66%, 100% { transform: none; box-shadow: none; filter: none; }
}
@keyframes cxa-was {
  0%, 54% { opacity: 1; transform: scale(1); }
  60%, 92% { opacity: 0; transform: scale(0.94); }
  97%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes cxa-now {
  0%, 56% { opacity: 0; transform: scale(0.9); }
  64% { opacity: 1; transform: scale(1.06); }
  70%, 92% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(0.94); }
}
@keyframes cxa-settle {
  0%, 52% { background-color: rgba(232, 242, 233, 0); }
  62% { background-color: rgba(232, 242, 233, 0.85); }
  80%, 100% { background-color: rgba(232, 242, 233, 0); }
}
@keyframes cxa-fixpanel {
  0%, 4% { opacity: 0; transform: translateY(10px); }
  14%, 88% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(6px); }
}

/* ---------------------------------------------------------------------------
   5. Step three: three reminders leaving. The stack fans out of the front
   envelope, the subject is marked, and the lamps light 30, then 15, then 7.
   --------------------------------------------------------------------------- */

[data-cxa="on"] .mail--back { animation: cxa-fan-back var(--cyc) var(--cxa-out) infinite; }
[data-cxa="on"] .mail--mid { animation: cxa-fan-mid var(--cyc) var(--cxa-out) infinite; }
[data-cxa="on"] .art--mail > .mail:last-of-type { animation: cxa-fan-front var(--cyc) var(--cxa-out) infinite; }
[data-cxa="on"] .mail__subject { animation: cxa-mark var(--cyc) var(--cxa-ease) infinite; }
[data-cxa="on"] .mail__cta { animation: cxa-sheen var(--cyc) var(--cxa-ease) infinite; }
[data-cxa="on"] .mailtrail span::before { animation: cxa-lamp var(--cyc) var(--cxa-out) infinite; }
[data-cxa="on"] .mailtrail span:nth-child(1)::before { animation-delay: calc(var(--cyc) * 0.02); }
[data-cxa="on"] .mailtrail span:nth-child(2)::before { animation-delay: calc(var(--cyc) * 0.10); }
[data-cxa="on"] .mailtrail span:nth-child(3)::before { animation-delay: calc(var(--cyc) * 0.18); }
[data-cxa="on"] .mailtrail .on::before { animation: cxa-lamp var(--cyc) var(--cxa-out) infinite, cxa-lamp-live 2.4s ease-in-out 2s infinite; }

.mail__subject {
  background-image: linear-gradient(90deg, rgba(201, 162, 39, 0.3), rgba(201, 162, 39, 0.3));
  background-repeat: no-repeat;
  background-position: 0 0.72em;
  background-size: 0 0.62em;
}
.mail__cta { position: relative; overflow: hidden; }

/* Each keyframe restates its own layer's scale, or the card snaps to full
   size on the way in. That is why there are three of these and not one. */
@keyframes cxa-fan-front {
  0%, 6% { opacity: 0; transform: translateY(14px) scale(0.985); }
  18%, 92% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(8px) scale(0.99); }
}
@keyframes cxa-fan-mid {
  0%, 20% { opacity: 0; transform: translateY(16px) scale(0.94); }
  34%, 90% { opacity: 0.8; transform: translateY(0) scale(0.94); }
  100% { opacity: 0; transform: translateY(10px) scale(0.94); }
}
@keyframes cxa-fan-back {
  0%, 28% { opacity: 0; transform: translateY(32px) scale(0.88); }
  44%, 90% { opacity: 0.55; transform: translateY(0) scale(0.88); }
  100% { opacity: 0; transform: translateY(16px) scale(0.88); }
}
@keyframes cxa-mark {
  0%, 44% { background-size: 0 0.62em; }
  60%, 90% { background-size: 100% 0.62em; }
  100% { background-size: 0 0.62em; }
}
@keyframes cxa-sheen {
  0%, 62% { box-shadow: none; }
  70% { box-shadow: 0 0 0 3px rgba(44, 74, 110, 0.14); }
  82%, 100% { box-shadow: none; }
}
@keyframes cxa-lamp {
  0%, 24% { opacity: 0; transform: scale(0.2); }
  34% { opacity: 1; transform: scale(1.35); }
  40%, 92% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.4); }
}
@keyframes cxa-lamp-live {
  0%, 100% { box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2); }
  50% { box-shadow: 0 0 0 7px rgba(201, 162, 39, 0.06); }
}

/* Play a scene once instead of looping. */
body[data-cxa-loop="off"] [data-cxa="on"] *,
body[data-cxa-loop="off"] [data-cxa="on"] *::before {
  animation-iteration-count: 1 !important;
}
body[data-cxa-glint="off"] .cxa-glow { display: none; }
body[data-cxa-glint="off"] .hd__table tbody tr { animation: none; }

/* ---------------------------------------------------------------------------
   6. The FAQ, on the same entrance grammar as the tables above it: the group
   rule draws, the questions arrive in order, the jump list builds. Opening a
   question is the site's own motion and is left alone.
   --------------------------------------------------------------------------- */

[data-cxa="on"] .faq__group-rule {
  transform-origin: left center;
  animation: cxa-rule 0.9s var(--cxa-out) 0.1s both;
}
[data-cxa="on"] .faq__item { animation: cxa-rise 0.6s var(--cxa-out) both; }
[data-cxa="on"] .faq__item:nth-child(1) { animation-delay: 0.14s; }
[data-cxa="on"] .faq__item:nth-child(2) { animation-delay: 0.21s; }
[data-cxa="on"] .faq__item:nth-child(3) { animation-delay: 0.28s; }
[data-cxa="on"] .faq__item:nth-child(4) { animation-delay: 0.35s; }
[data-cxa="on"] .faq__item:nth-child(5) { animation-delay: 0.42s; }
[data-cxa="on"] .faq__item:nth-child(6) { animation-delay: 0.49s; }
[data-cxa="on"] .faq__item:nth-child(7) { animation-delay: 0.56s; }
[data-cxa="on"] .faq__item:nth-child(8) { animation-delay: 0.63s; }
[data-cxa="on"] .faq__jump-link { animation: cxa-rise 0.55s var(--cxa-out) both; }
[data-cxa="on"] .faq__jump-link:nth-child(1) { animation-delay: 0.10s; }
[data-cxa="on"] .faq__jump-link:nth-child(2) { animation-delay: 0.18s; }
[data-cxa="on"] .faq__jump-link:nth-child(3) { animation-delay: 0.26s; }
[data-cxa="on"] .faq__jump-link:nth-child(4) { animation-delay: 0.34s; }
[data-cxa="on"] .faq__card { animation: cxa-rise 0.6s var(--cxa-out) 0.42s both; }

@keyframes cxa-rule {
  from { transform: scaleX(0); }
}

}