/* Cutflux UI kit (cutflux-kit.js) - small, dependency-free pieces shared by every app page.
 * Ideas from Aceternity UI, Magic UI, motion-primitives and Cult UI, rebuilt
 * in plain CSS/JS on the LYRC tokens (cutflux-tokens.css): one blue accent,
 * no gradients on controls, transform/opacity animation only. */

/* Ripple: drawn in a fixed layer clipped to the tapped element, so it never
   changes the element's layout or positioning. */
.cfk-ripple-layer { position: fixed; pointer-events: none; overflow: hidden; z-index: 2147483000; }
.cfk-ripple-dot {
  position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.22);
  transform: scale(0); opacity: 1; animation: cfkRipple 450ms cubic-bezier(0, 0, 0.2, 1) forwards;
}
.cfk-ripple-layer.is-accent .cfk-ripple-dot { background: rgba(255, 255, 255, 0.32); }
@keyframes cfkRipple { to { transform: scale(1); opacity: 0; } }

/* Sliding tab indicator: one pill behind the active tab, moved with transform. */
.cfk-tabpill {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  border-radius: var(--cf-r-button, 6px); background: var(--cf-accent-soft, rgba(59, 130, 246, 0.14));
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), width 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1);
}

/* Stateful button: label -> spinner -> check -> label. Width is locked while busy. */
.cfk-btn-busy, .cfk-btn-done { pointer-events: none; }
.cfk-btn-busy > *, .cfk-btn-done > * { visibility: hidden; }
.cfk-btn-busy::after, .cfk-btn-done::after {
  content: ""; position: absolute; left: 50%; top: 50%; visibility: visible;
}
.cfk-btn-busy::after {
  width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: cfkSpin 700ms linear infinite;
}
.cfk-btn-done::after {
  width: 12px; height: 7px; margin: -6px 0 0 -6px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) scale(0.6); opacity: 0;
  animation: cfkCheck 300ms cubic-bezier(0, 0, 0.2, 1) forwards;
}
.cfk-btn-text-hidden { color: transparent !important; }
@keyframes cfkSpin { to { transform: rotate(360deg); } }
@keyframes cfkCheck { to { transform: rotate(-45deg) scale(1); opacity: 1; } }

/* Shimmering status text: a light sweep across the words while something works. */
.cfk-shimmer {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 40%, #fff 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: cfkShimmer 1.8s linear infinite;
}
@keyframes cfkShimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* Staggered reveal: [data-cfk-reveal] children fade up when they enter view. */
.cfk-reveal-item { opacity: 0; transform: translateY(10px); }
.cfk-reveal-item.is-in {
  opacity: 1; transform: none;
  transition: opacity 300ms cubic-bezier(0, 0, 0.2, 1), transform 300ms cubic-bezier(0, 0, 0.2, 1);
  transition-delay: var(--cfk-delay, 0ms);
}

/* Island toast: a pill that drops from the top, morphs wider for the message. */
.cfk-island {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 2147483100;
  transform: translate(-50%, -140%); opacity: 0; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-radius: 9999px; background: #1C1E26; border: 1px solid #2A2C36; color: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); font: 600 13px/1.2 'Inter', -apple-system, sans-serif;
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 200ms cubic-bezier(0, 0, 0.2, 1);
  pointer-events: none; /* informational: never blocks the buttons under it */
}
.cfk-island.is-on { transform: translate(-50%, 0); opacity: 1; }
.cfk-island.is-off { transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 200ms cubic-bezier(0.4, 0, 1, 1); }
.cfk-island-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cf-accent, #3B82F6); flex: none; }
.cfk-island.is-ok .cfk-island-dot { background: var(--cf-ok, #34D399); }
.cfk-island.is-warn .cfk-island-dot { background: var(--cf-warn, #F5A623); }

/* Spotlight: a soft light that follows the finger/pointer inside a card. */
.cfk-spot { position: relative; isolation: isolate; }
.cfk-spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(240px circle at var(--cfk-x, 50%) var(--cfk-y, 0%), rgba(59, 130, 246, 0.16), transparent 60%);
  opacity: 0; transition: opacity 300ms cubic-bezier(0, 0, 0.2, 1);
}
.cfk-spot.is-lit::before { opacity: 1; }

/* First-visit hint: a small bubble with a pulsing ring on the target. */
.cfk-hint {
  position: fixed; z-index: 2147483050; max-width: 240px; padding: 10px 12px;
  border-radius: var(--cf-r-panel, 12px); background: var(--cf-accent, #3B82F6); color: #fff;
  font: 600 13px/1.35 'Inter', -apple-system, sans-serif; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(6px);
  transition: opacity 300ms cubic-bezier(0, 0, 0.2, 1), transform 300ms cubic-bezier(0, 0, 0.2, 1);
}
.cfk-hint.is-on { opacity: 1; transform: none; }
.cfk-hint::after {
  content: ""; position: absolute; left: var(--cfk-arrow, 24px); width: 10px; height: 10px;
  background: inherit; transform: rotate(45deg);
}
.cfk-hint.is-above::after { bottom: -5px; }
.cfk-hint.is-below::after { top: -5px; }
.cfk-hint-x { margin-left: 8px; opacity: 0.7; font-weight: 700; }
.cfk-hint-ring {
  position: fixed; z-index: 2147483040; pointer-events: none; border-radius: var(--cf-r-button, 6px);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.9); animation: cfkRing 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes cfkRing { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } 100% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); } }

@media (prefers-reduced-motion: reduce) {
  .cfk-ripple-layer { display: none; }
  .cfk-reveal-item { opacity: 1; transform: none; }
  .cfk-shimmer { animation: none; -webkit-text-fill-color: rgba(255, 255, 255, 0.7); }
  .cfk-hint-ring { animation: none; }
  .cfk-tabpill, .cfk-island { transition: none; }
}

/* Sheet headers are drag handles (swipe down to close): keep the browser from
   turning the drag into a page scroll. */
:is(body.lyrc-app, body.lyrc-be) :is(.sheet-hdr, .sheet-handle, [data-cfk-grab]) { touch-action: none; }

/* Upgrade popup (#cf-trial-offer, built by paywall-gate.js) on the LYRC tokens:
   visual only - wording, prices and the checkout logic are untouched. */
:is(body.lyrc-app, body.lyrc-be) #cf-trial-offer { font-family: var(--cf-font) !important; }
:is(body.lyrc-app, body.lyrc-be) #cf-trial-offer::before { background: rgba(0, 0, 0, 0.6) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
:is(body.lyrc-app, body.lyrc-be) #cf-trial-offer .cf-tr-card {
  background: var(--cf-surface) !important; background-image: none !important;
  border: 1px solid var(--cf-border) !important; box-shadow: var(--cf-shadow-lg) !important;
}
:is(body.lyrc-app, body.lyrc-be) #cf-trial-offer .cf-tr-banner {
  background: var(--cf-raised) !important; background-image: none !important; color: var(--cf-text-2) !important;
  border-bottom: 1px solid var(--cf-border) !important; box-shadow: none !important;
}
:is(body.lyrc-app, body.lyrc-be) #cf-trial-offer .cf-tr-hero {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: var(--cf-text) !important; color: var(--cf-text) !important; text-shadow: none !important; font-weight: 700 !important;
}
:is(body.lyrc-app, body.lyrc-be) #cf-trial-offer .cf-tr-hero-sub { color: var(--cf-text-2) !important; }
:is(body.lyrc-app, body.lyrc-be) #cf-trial-offer .cf-tr-eyebrow {
  background: var(--cf-accent-soft) !important; border-color: transparent !important; color: var(--cf-accent) !important; box-shadow: none !important;
}
:is(body.lyrc-app, body.lyrc-be) #cf-trial-offer .cf-tr-price {
  background: var(--cf-raised) !important; background-image: none !important; border: 1px solid var(--cf-border) !important;
  border-radius: var(--cf-r-card) !important; box-shadow: none !important;
}
:is(body.lyrc-app, body.lyrc-be) #cf-trial-offer .cf-tr-cta {
  background: var(--cf-accent) !important; background-image: none !important; color: #fff !important;
  border: 0 !important; border-radius: var(--cf-r-button) !important; box-shadow: none !important; text-shadow: none !important;
}
:is(body.lyrc-app, body.lyrc-be) #cf-trial-offer .cf-tr-cta-sub { color: rgba(255, 255, 255, 0.7) !important; }
:is(body.lyrc-app, body.lyrc-be) #cf-trial-offer .cf-tr-close {
  background: var(--cf-hover) !important; border: 1px solid var(--cf-border) !important; color: var(--cf-text-2) !important; box-shadow: none !important;
}
:is(body.lyrc-app, body.lyrc-be) #cf-trial-offer .cf-tr-ribbon {
  background: var(--cf-raised) !important; background-image: none !important; color: var(--cf-text-2) !important;
  border-bottom: 1px solid var(--cf-border) !important; box-shadow: none !important; text-shadow: none !important;
}
:is(body.lyrc-app, body.lyrc-be) #cf-trial-offer .cf-tr-logo { background-image: none !important; background-color: var(--cf-accent) !important; box-shadow: none !important; }
:is(body.lyrc-app, body.lyrc-be) #cf-trial-offer .cf-tr-skip,
:is(body.lyrc-app, body.lyrc-be) #cf-trial-offer .cf-tr-foot { color: var(--cf-text-3) !important; }