/* HALLMARK v12 — restrained React Bits adaptations.
   Spotlight Card, Animated Content, Magnet, Animated List and Star Border,
   translated into vellum, claret and brass without React/runtime dependencies. */

/* The class is added only for desktop fine pointers with motion enabled. */
html.folio-effects-on .view-head,
html.folio-effects-on .card,
html.folio-effects-on .route-node {
  animation: none;
}

html.folio-effects-on [data-rb-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .55s ease, transform .72s var(--ease);
  transition-delay: var(--folio-delay, 0ms);
  will-change: opacity, transform;
}
html.folio-effects-on [data-rb-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
html.folio-effects-on [data-rb-step='1'] { --folio-delay: 55ms; }
html.folio-effects-on [data-rb-step='2'] { --folio-delay: 110ms; }
html.folio-effects-on [data-rb-step='3'] { --folio-delay: 165ms; }
html.folio-effects-on [data-rb-step='4'] { --folio-delay: 220ms; }
html.folio-effects-on [data-rb-step='5'] { --folio-delay: 275ms; }

/* Spotlight Card becomes a warm paper-light, never a glow or glass layer. */
html.folio-effects-on .card[data-rb-spotlight] {
  --paper-x: 50%;
  --paper-y: 30%;
  position: relative;
  isolation: isolate;
}
html.folio-effects-on .card[data-rb-spotlight]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(360px circle at var(--paper-x) var(--paper-y),
      rgba(255,250,240,.72), rgba(180,134,59,.12) 42%, transparent 72%);
  mix-blend-mode: soft-light;
  transition: opacity .42s ease;
}
html.folio-effects-on .card[data-rb-spotlight][data-rb-hot='true']::before,
html.folio-effects-on .card[data-rb-spotlight]:focus-within::before { opacity: .88; }
html.folio-effects-on .card[data-rb-spotlight][data-rb-hot='true'] {
  box-shadow: 0 18px 38px rgba(75,53,45,.13);
}
html.folio-effects-on .card[data-rb-spotlight] > .card-head,
html.folio-effects-on .card[data-rb-spotlight] > .card-body,
html.folio-effects-on .card[data-rb-spotlight] > .card-foot {
  position: relative;
  z-index: 1;
}

/* Magnet is capped in JS at four pixels. It moves only primary actions. */
html.folio-effects-on [data-rb-magnet] {
  --magnet-x: 0px;
  --magnet-y: 0px;
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0);
  transition: transform .16s var(--ease), background-color .2s ease, color .2s ease, border-color .2s ease;
  will-change: transform;
}

/* Star Border becomes a single brass rim sweep on active primary actions. */
html.folio-effects-on [data-rb-rim] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
html.folio-effects-on [data-rb-rim]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255,248,224,.96) 48%, #b4863b 53%, transparent 72%) 130% 0 / 260% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity .22s ease;
}
html.folio-effects-on [data-rb-rim]:hover::after,
html.folio-effects-on [data-rb-rim]:focus-visible::after {
  opacity: .95;
  animation: hallmark-rim-sweep 2.8s linear infinite;
}
@keyframes hallmark-rim-sweep {
  to { background-position: -130% 0; }
}

/* Animated List is reserved for actual ledger rows. Rows reveal on entry and
   replay only after a user changes the register filter/sort. */
html.folio-effects-on tr[data-rb-list-item] {
  opacity: 0;
  transform: translate3d(0, 7px, 0);
  transition: opacity .30s ease, transform .38s var(--ease);
  transition-delay: var(--ledger-delay, 0ms);
}
html.folio-effects-on tr[data-rb-list-item].is-list-visible {
  opacity: 1;
  transform: none;
}
html.folio-effects-on tr[data-rb-list-step='1'] { --ledger-delay: 22ms; }
html.folio-effects-on tr[data-rb-list-step='2'] { --ledger-delay: 44ms; }
html.folio-effects-on tr[data-rb-list-step='3'] { --ledger-delay: 66ms; }
html.folio-effects-on tr[data-rb-list-step='4'] { --ledger-delay: 88ms; }
html.folio-effects-on tr[data-rb-list-step='5'] { --ledger-delay: 110ms; }
html.folio-effects-on tr[data-rb-list-step='6'] { --ledger-delay: 132ms; }
html.folio-effects-on tr[data-rb-list-step='7'] { --ledger-delay: 154ms; }

/* Static field stays intentional when motion is not eligible. */
@media (max-width: 899px), (hover: none), (pointer: coarse) {
  .folio-orbit { animation: none; }
  .folio-atmosphere::before {
    background:
      radial-gradient(circle at 78% 13%, rgba(255,250,240,.52), rgba(180,134,59,.08) 17rem, transparent 28rem),
      linear-gradient(90deg, rgba(244,237,223,.86), transparent 18%, transparent 88%, rgba(244,237,223,.65));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.folio-effects-on [data-rb-reveal],
  html.folio-effects-on tr[data-rb-list-item],
  html.folio-effects-on [data-rb-magnet] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.folio-effects-on [data-rb-rim]::after { display: none !important; animation: none !important; }
}
