/* ============================================================
   sparkles-kit.css
   ----------------
   A small set of CSS primitives for sparkles, holo edges,
   rainbow pill buttons, and aurora-tinted UI.

   Framework-agnostic. Drop into any project, link the file,
   and use the classes documented in the README.

   Inspired by nicowyss.ch / wyss.cx.
   ============================================================ */

:root {
  /* Aurora palette — six anchor hues for every conic gradient */
  --sk-peach:  #D97757;
  --sk-rose:   #C5759A;
  --sk-violet: #8E7FB8;
  --sk-indigo: #6B8DC9;
  --sk-mint:   #7FB69E;
  --sk-amber:  #D9B377;

  /* Per-blob opacity multipliers — JS or CSS can adjust these */
  --sk-mul-peach:  0.45;
  --sk-mul-rose:   0.18;
  --sk-mul-violet: 0.18;
  --sk-mul-indigo: 0.30;
  --sk-mul-mint:   0.18;
  --sk-mul-amber:  0.18;

  /* Foundation tokens (override in your project if needed) */
  --sk-bg-base:      #0A0A0A;
  --sk-bg-elevated:  #141413;
  --sk-text-primary: #F5F1EB;
  --sk-text-secondary: #8B8884;
  --sk-text-muted:   #5A5754;
  --sk-border-subtle: rgba(245, 241, 235, 0.06);

  /* Active section color (RGB) — components reference this */
  --sk-section-rgb: 217, 119, 87;
}

/* ------------------------------------------------------------
   Animated gradient angles (registered properties for smooth
   conic-gradient rotation without keyframe juddering)
   ------------------------------------------------------------ */
@property --sk-edge-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --sk-shim-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes sk-edge-spin {
  to { --sk-edge-angle: 360deg; }
}

@keyframes sk-shim-rotate {
  to { --sk-shim-angle: 360deg; }
}

/* ============================================================
   1. Aurora background blobs
   ------------------------------------------------------------
   <div class="sk-aurora-layer" aria-hidden="true">
     <div class="sk-blob sk-blob-peach"></div>
     <div class="sk-blob sk-blob-indigo"></div>
     ...
   </div>
   ============================================================ */
.sk-aurora-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--sk-bg-base);
}

.sk-blob {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(150px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  opacity: 0.42;
  transition: opacity 1500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sk-blob-peach  { background: radial-gradient(circle, var(--sk-peach)  0%, transparent 60%); top: -20%;  left: -15%; opacity: calc(0.42 * var(--sk-mul-peach));  animation: sk-drift-a 70s ease-in-out infinite alternate; }
.sk-blob-indigo { background: radial-gradient(circle, var(--sk-indigo) 0%, transparent 60%); bottom: -25%; right: -20%; opacity: calc(0.42 * var(--sk-mul-indigo)); animation: sk-drift-b 95s ease-in-out infinite alternate; }
.sk-blob-violet { background: radial-gradient(circle, var(--sk-violet) 0%, transparent 60%); bottom: -30%; left: 10%;   opacity: calc(0.42 * var(--sk-mul-violet)); animation: sk-drift-c 110s ease-in-out infinite alternate; }
.sk-blob-mint   { background: radial-gradient(circle, var(--sk-mint)   0%, transparent 60%); top: -25%;  right: -10%;  opacity: calc(0.42 * var(--sk-mul-mint));   animation: sk-drift-d 80s ease-in-out infinite alternate; }
.sk-blob-rose   { width: 50vmax; height: 50vmax; background: radial-gradient(circle, var(--sk-rose)  0%, transparent 60%); top: 30%; left: -10%; opacity: calc(0.42 * var(--sk-mul-rose));  animation: sk-drift-e 85s ease-in-out infinite alternate; }
.sk-blob-amber  { width: 50vmax; height: 50vmax; background: radial-gradient(circle, var(--sk-amber) 0%, transparent 60%); top: 25%; right: -5%; opacity: calc(0.42 * var(--sk-mul-amber)); animation: sk-drift-f 90s ease-in-out infinite alternate; }

@keyframes sk-drift-a { from { transform: translate3d(0,0,0); } to { transform: translate3d(8vw, 6vh, 0); } }
@keyframes sk-drift-b { from { transform: translate3d(0,0,0); } to { transform: translate3d(-7vw, -8vh, 0); } }
@keyframes sk-drift-c { from { transform: translate3d(0,0,0); } to { transform: translate3d(10vw, -3vh, 0); } }
@keyframes sk-drift-d { from { transform: translate3d(0,0,0); } to { transform: translate3d(-6vw, 8vh, 0); } }
@keyframes sk-drift-e { from { transform: translate3d(0,0,0); } to { transform: translate3d(5vw, -6vh, 0); } }
@keyframes sk-drift-f { from { transform: translate3d(0,0,0); } to { transform: translate3d(-5vw, 5vh, 0); } }

.sk-aurora-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(10,10,10,0.35) 70%, rgba(10,10,10,0.7) 100%);
}

/* ============================================================
   1b. Grid background — fixed dotted/lined overlay
   ------------------------------------------------------------
   <div class="sk-grid-bg" aria-hidden="true"></div>
   <div class="sk-grid-bg sk-grid-lined" aria-hidden="true"></div>

   Sits between aurora veil (z:1) and sparkles (z:2). Faint enough
   that it reads as structure rather than pattern; pairs naturally
   with the Linear-look feature tiles on top.
   ============================================================ */
.sk-grid-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(245, 241, 235, 0.045) 1px, transparent 1.4px);
  background-size: 28px 28px;
}

.sk-grid-bg.sk-grid-lined {
  background-image:
    linear-gradient(to right, rgba(245, 241, 235, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245, 241, 235, 0.035) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
}

/* ============================================================
   1c. Color spill — tile-sized aurora accent blob
   ------------------------------------------------------------
   <div class="sk-color-spill sk-spill-violet"
        style="position:absolute; top:120px; left:40%;"></div>

   Different from .sk-blob (which is fullscreen-sized for the
   ambient layer). Use these for *localized* accents — behind a
   hero headline, beside a feature card, at section transitions.
   Six color modifiers matching the aurora palette.
   ============================================================ */
.sk-color-spill {
  width: 320px;
  aspect-ratio: 1;
  border-radius: 50%;
  /* lighter blur keeps the saturated center visible; the radial
     gradient already does most of the soft falloff work */
  filter: blur(36px);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.85;
  will-change: transform;
}

.sk-color-spill.sk-spill-peach  { background: radial-gradient(circle, var(--sk-peach)  0%, rgba(217,119,87,0.55)  35%, transparent 70%); }
.sk-color-spill.sk-spill-rose   { background: radial-gradient(circle, var(--sk-rose)   0%, rgba(197,117,154,0.55) 35%, transparent 70%); }
.sk-color-spill.sk-spill-violet { background: radial-gradient(circle, var(--sk-violet) 0%, rgba(142,127,184,0.55) 35%, transparent 70%); }
.sk-color-spill.sk-spill-indigo { background: radial-gradient(circle, var(--sk-indigo) 0%, rgba(107,141,201,0.55) 35%, transparent 70%); }
.sk-color-spill.sk-spill-mint   { background: radial-gradient(circle, var(--sk-mint)   0%, rgba(127,182,158,0.55) 35%, transparent 70%); }
.sk-color-spill.sk-spill-amber  { background: radial-gradient(circle, var(--sk-amber)  0%, rgba(217,179,119,0.55) 35%, transparent 70%); }

/* Optional slow drift — opt in by adding the modifier class.
   Irregular path via multiple keyframe stops; per-color durations
   + delays desync the six spills so they never line up. */
.sk-color-spill.sk-spill-drift {
  animation: sk-color-spill-drift 26s ease-in-out infinite;
}

.sk-color-spill.sk-spill-peach.sk-spill-drift  { animation-duration: 22s; animation-delay:  -3s; }
.sk-color-spill.sk-spill-rose.sk-spill-drift   { animation-duration: 26s; animation-delay:  -7s; }
.sk-color-spill.sk-spill-violet.sk-spill-drift { animation-duration: 30s; animation-delay:  -1s; }
.sk-color-spill.sk-spill-indigo.sk-spill-drift { animation-duration: 24s; animation-delay: -11s; }
.sk-color-spill.sk-spill-mint.sk-spill-drift   { animation-duration: 28s; animation-delay:  -5s; }
.sk-color-spill.sk-spill-amber.sk-spill-drift  { animation-duration: 32s; animation-delay:  -9s; }

@keyframes sk-color-spill-drift {
  0%   { transform: translate3d(  0%,   0%, 0); }
  18%  { transform: translate3d(  7%,  -3%, 0); }
  35%  { transform: translate3d(  2%,  -8%, 0); }
  52%  { transform: translate3d( -5%,  -4%, 0); }
  68%  { transform: translate3d( -3%,   5%, 0); }
  84%  { transform: translate3d(  4%,   7%, 0); }
  100% { transform: translate3d(  0%,   0%, 0); }
}

/* ============================================================
   2. Sparkles
   ------------------------------------------------------------
   <div class="sk-sparkle-layer" aria-hidden="true">
     <span class="sk-sparkle sk-sparkle-ambient" style="..."></span>
     ...
   </div>

   The .sk-sparkle-layer is fixed-position and pointer-events:none.
   Each sparkle is positioned via inline style (left/top, --sk-c, etc).
   ============================================================ */
.sk-sparkle-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.sk-sparkle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: var(--sk-c, #fff);
  color: var(--sk-c, #fff);
  box-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
  will-change: transform, opacity;
}

.sk-sparkle-ambient {
  opacity: var(--sk-base-opacity, 0.5);
  animation:
    sk-sp-drift var(--sk-drift-dur, 25s) ease-in-out var(--sk-drift-delay, 0s) infinite alternate,
    sk-sp-pulse var(--sk-pulse-dur, 5s)  ease-in-out var(--sk-pulse-delay, 0s) infinite;
}

@keyframes sk-sp-drift {
  to { transform: translate(var(--sk-drift-x, 0), var(--sk-drift-y, 0)); }
}

@keyframes sk-sp-pulse {
  0%, 100% { opacity: calc(var(--sk-base-opacity, 0.5) * 0.4); }
  50%      { opacity: var(--sk-base-opacity, 0.5); }
}

/* Cursor-trail sparkle: opt-in, JS attaches & removes a `.live` class. */
.sk-sparkle-transient {
  opacity: 0;
  transform: translate(0, 0) scale(0.4);
  transition:
    transform var(--sk-life, 700ms) cubic-bezier(0.16, 1, 0.3, 1),
    opacity   var(--sk-life, 700ms) cubic-bezier(0.16, 1, 0.3, 1);
}

.sk-sparkle-transient.live {
  opacity: var(--sk-peak-opacity, 0.9);
  transform: translate(var(--sk-dx, 0), var(--sk-dy, 0)) scale(1);
}

/* ============================================================
   3. Aurora-shimmer headline
   ------------------------------------------------------------
   <h1 class="sk-aurora-line" data-text="Hello world.">
     Hello world.
   </h1>

   Cream-white body text + a slowly-rotating conic gradient
   layered on top via background-clip:text. Reads like
   "shimmer on metal, not rainbow text".
   ============================================================ */
.sk-aurora-line {
  position: relative;
  display: block;
}

.sk-aurora-line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from var(--sk-shim-angle),
    var(--sk-peach), var(--sk-rose), var(--sk-violet),
    var(--sk-indigo), var(--sk-mint), var(--sk-amber), var(--sk-peach)
  );
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0.30;
  pointer-events: none;
  animation: sk-shim-rotate 22s linear infinite;
}

/* ============================================================
   4. Holo-edge card
   ------------------------------------------------------------
   <div class="sk-holo-card">…content…</div>
   <div class="sk-holo-card sk-holo-glow">…content…</div>

   `.sk-holo-card` paints a 1px conic-gradient border that
   rotates slowly. `.sk-holo-glow` adds an outer bloom halo.
   ============================================================ */
.sk-holo-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(245, 241, 235, 0.04) 0%, rgba(245, 241, 235, 0) 60%),
    var(--sk-bg-elevated);
  border-radius: 20px;
  padding: 32px;
  color: var(--sk-text-primary);
  transition:
    background 400ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
  isolation: isolate;
}

.sk-holo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--sk-edge-angle),
    var(--sk-peach), var(--sk-rose), var(--sk-violet),
    var(--sk-indigo), var(--sk-mint), var(--sk-amber), var(--sk-peach)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.32;
  pointer-events: none;
  z-index: -1;
  transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: sk-edge-spin 40s linear infinite;
}

.sk-holo-card:hover {
  background:
    linear-gradient(180deg, rgba(245, 241, 235, 0.06) 0%, rgba(245, 241, 235, 0) 60%),
    #181816;
}

.sk-holo-card:hover::before {
  opacity: 0.78;
}

.sk-holo-glow::after {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 36px;
  background: conic-gradient(
    from var(--sk-edge-angle),
    var(--sk-peach), var(--sk-rose), var(--sk-violet),
    var(--sk-indigo), var(--sk-mint), var(--sk-amber), var(--sk-peach)
  );
  filter: blur(34px);
  opacity: 0.22;
  z-index: -2;
  pointer-events: none;
  animation: sk-edge-spin 60s linear infinite reverse;
  transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sk-holo-glow:hover::after {
  opacity: 0.40;
}

/* ============================================================
   4b. Prism tile — holographic-foil background
   ------------------------------------------------------------
   <div class="sk-prism-tile">…content…</div>
   <div class="sk-prism-tile sk-prism-sweep">…sweep on hover…</div>
   <div class="sk-prism-tile sk-prism-festival">…full festival energy…</div>

   Mood: holographic trading-card / Pink-Floyd-prism / iridescent
   foil. Layered backgrounds — diagonal aurora stripe (animated),
   white glints in two corners, soft conic edge ring. JS-free.
   ============================================================ */
.sk-prism-tile {
  position: relative;
  border-radius: 20px;
  padding: 32px;
  color: var(--sk-text-primary);
  background:
    /* diagonal aurora dispersion stripe — bumped from 0.16 to 0.32
       so the rainbow actually reads on a dark base */
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(217, 119, 87, 0.32) 12%,
      rgba(197, 117, 154, 0.32) 24%,
      rgba(142, 127, 184, 0.32) 36%,
      rgba(107, 141, 201, 0.32) 48%,
      rgba(127, 182, 158, 0.32) 60%,
      rgba(217, 179, 119, 0.32) 72%,
      rgba(217, 119, 87, 0.32) 84%,
      transparent 100%
    ),
    /* white glints — also bumped */
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.16), transparent 24%),
    radial-gradient(circle at 78% 72%, rgba(255, 255, 255, 0.10), transparent 20%),
    /* dark base */
    var(--sk-bg-elevated);
  background-size: 220% 220%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0% 0%, 0 0, 0 0, 0 0;
  isolation: isolate;
  overflow: hidden;
  animation: sk-prism-shift 16s linear infinite;
  transition: background-color 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sk-prism-shift {
  to {
    background-position: 220% 220%, 0 0, 0 0, 0 0;
  }
}

/* Soft conic edge ring (slimmer than .sk-holo-card) */
.sk-prism-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--sk-edge-angle),
    var(--sk-peach), var(--sk-rose), var(--sk-violet),
    var(--sk-indigo), var(--sk-mint), var(--sk-amber), var(--sk-peach)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.40;
  pointer-events: none;
  z-index: 1;
  animation: sk-edge-spin 25s linear infinite;
  transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sweep variant — second iridescent stripe runs across on hover */
.sk-prism-tile.sk-prism-sweep::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    72deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 20%,
    rgba(217, 119, 87, 0.40) 35%,
    rgba(142, 127, 184, 0.45) 50%,
    rgba(107, 141, 201, 0.40) 65%,
    rgba(255, 255, 255, 0.12) 80%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: -100% 0;
  mix-blend-mode: screen;
  opacity: 0;
  transition:
    opacity 400ms ease-out,
    background-position 1400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sk-prism-tile.sk-prism-sweep:hover::after {
  opacity: 1;
  background-position: 100% 0;
}

.sk-prism-tile:hover::before {
  opacity: 0.85;
}

/* Festival variant — louder ambient sheen + thicker stripes */
.sk-prism-tile.sk-prism-festival {
  background:
    /* louder diagonal stripe */
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(217, 119, 87, 0.30) 10%,
      rgba(197, 117, 154, 0.30) 22%,
      rgba(142, 127, 184, 0.30) 34%,
      rgba(107, 141, 201, 0.30) 46%,
      rgba(127, 182, 158, 0.30) 58%,
      rgba(217, 179, 119, 0.30) 70%,
      rgba(217, 119, 87, 0.30) 82%,
      transparent 100%
    ),
    /* second crossing stripe — gives the prism dispersion feel */
    linear-gradient(
      -55deg,
      transparent 0%,
      rgba(142, 127, 184, 0.18) 30%,
      rgba(107, 141, 201, 0.18) 50%,
      rgba(127, 182, 158, 0.18) 70%,
      transparent 100%
    ),
    /* white caustics */
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.14), transparent 26%),
    radial-gradient(circle at 78% 82%, rgba(255, 255, 255, 0.10), transparent 22%),
    var(--sk-bg-elevated);
  background-size: 220% 220%, 280% 280%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0% 0%, 100% 100%, 0 0, 0 0, 0 0;
  animation: sk-prism-shift-festival 14s linear infinite;
}

@keyframes sk-prism-shift-festival {
  to {
    background-position: 220% 220%, -180% -180%, 0 0, 0 0, 0 0;
  }
}

/* ============================================================
   4c. Putty blob — morphing glitter blob
   ------------------------------------------------------------
   <div class="sk-putty-blob">…</div>
   <div class="sk-putty-blob sk-putty-aurora">…</div>

   Visual reference: glittery emerald "intelligent putty". The shape
   slowly morphs (animated border-radius), the surface has a glossy
   specular highlight + soft shadow, and a glitter sub-layer twinkles
   on top. Default flavor is emerald; .sk-putty-aurora hue-rotates
   through the full aurora palette.
   ============================================================ */
@property --sk-putty-hue {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.sk-putty-blob {
  position: relative;
  width: 240px;
  aspect-ratio: 1;
  border-radius: 48% 52% 71% 29% / 30% 30% 70% 70%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), transparent 38%),
    radial-gradient(circle at 90% 90%, rgba(0, 0, 0, 0.35), transparent 55%),
    linear-gradient(135deg, #1f6a4d 0%, #4dc28b 50%, #135036 100%);
  box-shadow:
    inset 10px 10px 28px rgba(255, 255, 255, 0.22),
    inset -12px -12px 32px rgba(0, 0, 0, 0.40),
    0 24px 48px rgba(77, 194, 139, 0.30);
  animation: sk-putty-morph 9s ease-in-out infinite;
  isolation: isolate;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sk-putty-blob:hover {
  transform: scale(1.04) rotate(-2deg);
}

@keyframes sk-putty-morph {
  0%, 100% { border-radius: 48% 52% 71% 29% / 30% 30% 70% 70%; }
  25%      { border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; }
  50%      { border-radius: 35% 65% 55% 45% / 45% 35% 65% 55%; }
  75%      { border-radius: 70% 30% 50% 50% / 38% 62% 38% 62%; }
}

/* Glitter sub-layer: scattered white pinpoints with a soft glow,
   slowly twinkling. Pseudo-element so the morph stays clean. */
.sk-putty-blob::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    radial-gradient(circle, white 0.6px, transparent 1.4px),
    radial-gradient(circle, white 0.4px, transparent 1.0px),
    radial-gradient(circle, white 0.5px, transparent 1.2px);
  background-size: 31px 29px, 47px 53px, 23px 41px;
  background-position: 0 0, 14px 8px, 6px 22px;
  mix-blend-mode: screen;
  opacity: 0.55;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.6));
  animation: sk-putty-twinkle 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sk-putty-twinkle {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.75; }
}

/* Aurora flavor — same structure, but the base color cycles through
   the aurora palette via a hue-rotate filter on a paired layer. */
.sk-putty-blob.sk-putty-aurora {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), transparent 38%),
    radial-gradient(circle at 90% 90%, rgba(0, 0, 0, 0.35), transparent 55%),
    conic-gradient(
      from var(--sk-putty-hue),
      var(--sk-peach), var(--sk-rose), var(--sk-violet),
      var(--sk-indigo), var(--sk-mint), var(--sk-amber), var(--sk-peach)
    );
  box-shadow:
    inset 10px 10px 28px rgba(255, 255, 255, 0.22),
    inset -12px -12px 32px rgba(0, 0, 0, 0.40),
    0 24px 48px rgba(142, 127, 184, 0.32);
  animation:
    sk-putty-morph 9s ease-in-out infinite,
    sk-putty-spin 14s linear infinite;
}

@keyframes sk-putty-spin {
  to { --sk-putty-hue: 360deg; }
}

/* ============================================================
   4c-bis. Liquid tile — flowing iridescent foil with real
                         fluid distortion (SVG turbulence)
   ------------------------------------------------------------
   <div class="sk-liquid-tile">…dark text on iridescent bg…</div>

   The fluid look comes from a hidden SVG <feTurbulence> +
   <feDisplacementMap> filter referenced as `filter: url(#sk-
   liquid-distort)`. Without the SVG mounted, the gradients still
   render — you just lose the wavy distortion (graceful fallback).

   Required once per page (see README — copy the <svg> snippet
   into your layout, or use sparkles-kit's BaseLayout which
   includes it automatically).
   ============================================================ */
.sk-liquid-tile {
  position: relative;
  border-radius: 18px;
  padding: 32px;
  color: #14101A;
  isolation: isolate;
  overflow: hidden;
  /* Solid-color fallback in case the ::before / SVG don't render */
  background: linear-gradient(135deg, #FFCDE5 0%, #C7D7FF 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 14px 36px rgba(160, 100, 200, 0.30);
}

/* The actual liquid-flowing layer — saturated radial blobs that
   the SVG filter distorts. inset: -10% lets the displaced edges
   land outside the visible tile so we don't see the torn boundary. */
.sk-liquid-tile::before {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: -1;
  background:
    /* Five saturated, substantial-color radial blobs — each at its
       own corner with its own size so the mixing reads as flow not
       as separate spots */
    radial-gradient(ellipse 90% 75% at 22% 22%, #E84CA0 0%, transparent 55%),
    radial-gradient(ellipse 95% 80% at 80% 28%, #5C82F0 0%, transparent 55%),
    radial-gradient(ellipse 85% 75% at 30% 80%, #A878E5 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 82% 78%, #FF895C 0%, transparent 55%),
    radial-gradient(ellipse 75% 60% at 50% 50%, #5BD9A0 0%, transparent 60%),
    /* Pearl wash beneath so the saturated blobs blend onto something
       light, not onto white — keeps it iridescent foil, not poster */
    linear-gradient(135deg, #FFEAF5 0%, #DCE7FF 100%);
  background-size:
    260% 260%, 280% 280%, 240% 240%, 300% 300%, 260% 260%, 100% 100%;
  background-position:
    0% 0%, 100% 0%, 0% 100%, 100% 100%, 50% 50%, 0 0;
  filter: url(#sk-liquid-distort);
  animation: sk-liquid-flow 30s ease-in-out infinite alternate;
}

@keyframes sk-liquid-flow {
  0% {
    background-position:
      0% 0%, 100% 0%, 0% 100%, 100% 100%, 50% 50%, 0 0;
  }
  50% {
    background-position:
      55% 80%, 25% 60%, 90% 25%, 40% 10%, 70% 75%, 0 0;
  }
  100% {
    background-position:
      100% 100%, 0% 100%, 100% 0%, 0% 0%, 30% 30%, 0 0;
  }
}

/* Glossy specular on top — wet-plastic sheen, sits ABOVE content
   via z-index but with pointer-events:none so it doesn't block clicks. */
.sk-liquid-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.40) 0%,
    rgba(255, 255, 255, 0.10) 18%,
    transparent 42%,
    transparent 62%,
    rgba(255, 255, 255, 0.08) 88%,
    rgba(255, 255, 255, 0.25) 100%
  );
  mix-blend-mode: overlay;
  z-index: 1;
}

/* Dark variant — same fluid distortion, but the saturated blobs
   shift to the kit's aurora palette on the dark substrate. */
.sk-liquid-tile.sk-liquid-dark {
  color: var(--sk-text-primary);
  background: var(--sk-bg-elevated);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 36px rgba(0, 0, 0, 0.45);
}

.sk-liquid-tile.sk-liquid-dark::before {
  background:
    radial-gradient(ellipse 90% 75% at 22% 22%, var(--sk-peach), transparent 60%),
    radial-gradient(ellipse 95% 80% at 80% 28%, var(--sk-indigo), transparent 60%),
    radial-gradient(ellipse 85% 75% at 30% 80%, var(--sk-violet), transparent 65%),
    radial-gradient(ellipse 90% 70% at 82% 78%, var(--sk-rose), transparent 60%),
    radial-gradient(ellipse 75% 60% at 50% 50%, var(--sk-mint), transparent 65%),
    var(--sk-bg-elevated);
  background-size:
    260% 260%, 280% 280%, 240% 240%, 300% 300%, 260% 260%, 100% 100%;
}

/* ============================================================
   4d. Antigravity tile — floating glass in the Linear-look idiom
   ------------------------------------------------------------
   <div class="sk-antigrav-tile">…content…</div>
   <div class="sk-antigrav-tile sk-antigrav-grid">…with grid bg…</div>

   Three Linear-look ingredients: backdrop-blur glass (semi-
   transparent fill + filter), animated specular hairline border
   (rotating conic-gradient via mask-composite), and aurora
   underglow welling up from below. Plus our flourish: tiny
   particles drifting upward inside, and an idle ~3px bob.
   Hover lifts 8px and intensifies the underglow + edge highlight.
   ============================================================ */
.sk-antigrav-tile {
  position: relative;
  border-radius: 24px;
  padding: 32px;
  color: var(--sk-text-primary);
  background:
    /* glossy hairline top highlight */
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, transparent 7%),
    /* faint vertical sheen */
    linear-gradient(180deg, transparent 0%, rgba(245, 241, 235, 0.025) 100%),
    /* aurora underglow — illuminated from below */
    radial-gradient(ellipse 110% 65% at 50% 115%, rgba(107, 141, 201, 0.30), transparent 72%),
    radial-gradient(ellipse 75% 55% at 50% 105%, rgba(142, 127, 184, 0.20), transparent 65%),
    /* semi-transparent dark fill so backdrop-filter has something to blur through */
    rgba(20, 20, 19, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
          backdrop-filter: blur(18px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 36px rgba(0, 0, 0, 0.50),
    0 8px 18px rgba(107, 141, 201, 0.18);
  isolation: isolate;
  animation: sk-antigrav-float 6s ease-in-out infinite;
  transition:
    transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sk-antigrav-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.sk-antigrav-tile:hover {
  transform: translateY(-8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 32px 56px rgba(0, 0, 0, 0.55),
    0 18px 32px rgba(107, 141, 201, 0.32),
    0 8px 16px rgba(142, 127, 184, 0.22);
  animation-play-state: paused;
}

/* Floating particles drifting upward inside the tile.
   Three radial-gradient layers at different sizes/speeds give a
   sense of depth — closer particles bigger, farther smaller. */
.sk-antigrav-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    radial-gradient(circle, rgba(245, 241, 235, 0.55) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(107, 141, 201, 0.65) 0.8px, transparent 1.3px),
    radial-gradient(circle, rgba(142, 127, 184, 0.60) 0.6px, transparent 1.0px);
  background-size: 71px 89px, 53px 67px, 41px 53px;
  background-position: 12px 100%, 35px 80%, 8px 60%;
  animation: sk-antigrav-drift 14s linear infinite;
  opacity: 0.7;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask: linear-gradient(180deg, transparent 0%, black 25%, black 88%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0%, black 25%, black 88%, transparent 100%);
  z-index: -1;
}

@keyframes sk-antigrav-drift {
  to {
    background-position: 12px -20%, 35px -40%, 8px -60%;
  }
}

/* Animated specular hairline ring — same mask-composite pattern as
   .sk-holo-card::before, but at much lower opacity (reads as "metal
   catching light," not as a rainbow ring). Reuses --sk-edge-angle. */
.sk-antigrav-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--sk-edge-angle),
    var(--sk-peach), var(--sk-rose), var(--sk-violet),
    var(--sk-indigo), var(--sk-mint), var(--sk-amber), var(--sk-peach)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
  animation: sk-edge-spin 50s linear infinite;
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sk-antigrav-tile:hover::after { opacity: 0.32; }

/* Opt-in modifier — paints a subtle 24px dotted grid behind the
   particles. Layered, doesn't replace any of the existing background. */
.sk-antigrav-tile.sk-antigrav-grid {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, transparent 7%),
    linear-gradient(180deg, transparent 0%, rgba(245, 241, 235, 0.025) 100%),
    radial-gradient(ellipse 110% 65% at 50% 115%, rgba(107, 141, 201, 0.30), transparent 72%),
    radial-gradient(ellipse 75% 55% at 50% 105%, rgba(142, 127, 184, 0.20), transparent 65%),
    /* dotted grid layer */
    radial-gradient(circle, rgba(245, 241, 235, 0.05) 1px, transparent 1.4px),
    rgba(20, 20, 19, 0.62);
  background-size:
    auto, auto, auto, auto,
    24px 24px,
    auto;
}

/* ============================================================
   5. Pill buttons
   ------------------------------------------------------------
   <button class="sk-pill">primary</button>
   <button class="sk-pill sk-pill-ghost">ghost</button>
   <button class="sk-pill sk-pill-holo">holo</button>
   ============================================================ */
.sk-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 9999px;
  font-family: var(--sk-font-mono, ui-monospace, "Geist Mono", "JetBrains Mono", SFMono-Regular, monospace);
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  background: var(--sk-peach);
  color: #0A0A0A;
  border: 1px solid transparent;
  user-select: none;
  text-decoration: none;
  position: relative;
  transition:
    background-color 250ms ease-out,
    color 250ms ease-out,
    border-color 250ms ease-out,
    box-shadow 250ms ease-out,
    transform 100ms ease-out;
}

.sk-pill:hover {
  background: #E08967;
  box-shadow: 0 0 32px rgba(217, 119, 87, 0.45);
}

.sk-pill:active { transform: scale(0.97); }

.sk-pill-ghost {
  background: transparent;
  color: var(--sk-text-primary);
  border-color: rgba(245, 241, 235, 0.15);
}

.sk-pill-ghost:hover {
  background: rgba(245, 241, 235, 0.04);
  border-color: rgb(var(--sk-section-rgb));
  box-shadow: none;
}

/* Holo pill: rotating conic-gradient edge that bleeds outward on hover. */
.sk-pill-holo {
  background: var(--sk-bg-elevated);
  color: var(--sk-text-primary);
  isolation: isolate;
}

.sk-pill-holo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--sk-edge-angle),
    var(--sk-peach), var(--sk-rose), var(--sk-violet),
    var(--sk-indigo), var(--sk-mint), var(--sk-amber), var(--sk-peach)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.55;
  pointer-events: none;
  animation: sk-edge-spin 12s linear infinite;
  transition: opacity 250ms ease-out;
  z-index: -1;
}

.sk-pill-holo::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--sk-edge-angle),
    var(--sk-peach), var(--sk-rose), var(--sk-violet),
    var(--sk-indigo), var(--sk-mint), var(--sk-amber), var(--sk-peach)
  );
  filter: blur(14px);
  opacity: 0;
  z-index: -2;
  pointer-events: none;
  animation: sk-edge-spin 18s linear infinite reverse;
  transition: opacity 250ms ease-out;
}

.sk-pill-holo:hover { background: #181816; box-shadow: none; }
.sk-pill-holo:hover::before { opacity: 1; }
.sk-pill-holo:hover::after  { opacity: 0.55; }

/* ============================================================
   6. Holo slider (range input)
   ------------------------------------------------------------
   <input type="range" class="sk-slider" min="0" max="100" value="50" />
   ============================================================ */
.sk-slider {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
  outline: none;
}

.sk-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    var(--sk-peach), var(--sk-rose), var(--sk-violet),
    var(--sk-indigo), var(--sk-mint), var(--sk-amber)
  );
  box-shadow: 0 0 14px rgba(217, 119, 87, 0.25);
}

.sk-slider::-moz-range-track {
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    var(--sk-peach), var(--sk-rose), var(--sk-violet),
    var(--sk-indigo), var(--sk-mint), var(--sk-amber)
  );
  box-shadow: 0 0 14px rgba(217, 119, 87, 0.25);
}

.sk-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: #F5F1EB;
  border: 2px solid var(--sk-bg-base);
  box-shadow:
    0 0 0 1px rgba(245, 241, 235, 0.4),
    0 0 18px rgba(217, 119, 87, 0.45);
  cursor: grab;
  transition: transform 120ms ease-out, box-shadow 250ms ease-out;
}

.sk-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #F5F1EB;
  border: 2px solid var(--sk-bg-base);
  box-shadow:
    0 0 0 1px rgba(245, 241, 235, 0.4),
    0 0 18px rgba(217, 119, 87, 0.45);
  cursor: grab;
  transition: transform 120ms ease-out, box-shadow 250ms ease-out;
}

.sk-slider:hover::-webkit-slider-thumb,
.sk-slider:active::-webkit-slider-thumb {
  transform: scale(1.1);
  box-shadow:
    0 0 0 1px rgba(245, 241, 235, 0.6),
    0 0 28px rgba(217, 119, 87, 0.65);
}

.sk-slider:hover::-moz-range-thumb,
.sk-slider:active::-moz-range-thumb {
  transform: scale(1.1);
  box-shadow:
    0 0 0 1px rgba(245, 241, 235, 0.6),
    0 0 28px rgba(217, 119, 87, 0.65);
}

/* ============================================================
   7. Holo toggle (checkbox-as-pill-switch)
   ------------------------------------------------------------
   <label class="sk-toggle">
     <input type="checkbox" />
     <span class="sk-toggle-track"><span class="sk-toggle-thumb"></span></span>
   </label>
   ============================================================ */
.sk-toggle {
  display: inline-block;
  cursor: pointer;
}

.sk-toggle input { position: absolute; opacity: 0; pointer-events: none; }

.sk-toggle-track {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 30px;
  border-radius: 9999px;
  background: var(--sk-bg-elevated);
  border: 1px solid var(--sk-border-subtle);
  transition: background 250ms ease-out, border-color 250ms ease-out;
}

.sk-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sk-text-muted);
  transition: left 250ms cubic-bezier(0.16, 1, 0.3, 1), background 250ms ease-out, box-shadow 250ms ease-out;
}

.sk-toggle input:checked ~ .sk-toggle-track {
  background: linear-gradient(90deg, var(--sk-peach), var(--sk-rose), var(--sk-violet), var(--sk-indigo));
  border-color: transparent;
}

.sk-toggle input:checked ~ .sk-toggle-track .sk-toggle-thumb {
  left: 27px;
  background: #F5F1EB;
  box-shadow: 0 0 12px rgba(245, 241, 235, 0.5);
}

/* ============================================================
   8. Holo-hover panel (rainbow background bleed on hover)
   ------------------------------------------------------------
   <div class="sk-holo-panel">…hover me…</div>

   A flat tile that, on hover, blooms a soft conic gradient
   underneath. Lighter than `.sk-holo-card` — no border ring.
   ============================================================ */
.sk-holo-panel {
  position: relative;
  border-radius: 16px;
  padding: 24px;
  background: var(--sk-bg-elevated);
  color: var(--sk-text-primary);
  transition: background 350ms ease-out;
  isolation: isolate;
}

.sk-holo-panel::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--sk-edge-angle),
    var(--sk-peach), var(--sk-rose), var(--sk-violet),
    var(--sk-indigo), var(--sk-mint), var(--sk-amber), var(--sk-peach)
  );
  filter: blur(28px);
  opacity: 0;
  z-index: -1;
  transition: opacity 350ms ease-out;
  animation: sk-edge-spin 30s linear infinite;
}

.sk-holo-panel:hover { background: #181816; }
.sk-holo-panel:hover::before { opacity: 0.55; }

/* ============================================================
   9. Aurora ring avatar (Instagram-style)
   ------------------------------------------------------------
   <div class="sk-avatar">
     <div class="sk-avatar-ring"></div>
     <div class="sk-avatar-photo">NW</div>
   </div>
   ============================================================ */
.sk-avatar {
  position: relative;
  width: 144px;
  height: 144px;
}

.sk-avatar-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from var(--sk-edge-angle),
    var(--sk-peach), var(--sk-rose), var(--sk-violet),
    var(--sk-indigo), var(--sk-mint), var(--sk-amber), var(--sk-peach)
  );
  padding: 3px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: sk-edge-spin 18s linear infinite;
}

.sk-avatar-photo {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--sk-bg-elevated);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: var(--sk-font-display, ui-sans-serif, "Geist", "Inter", system-ui, sans-serif);
  font-size: 44px;
  color: var(--sk-text-secondary);
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

.sk-avatar-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   11. Aurora text — static gradient text utility
   ------------------------------------------------------------
   <h1 class="sk-aurora-text">42</h1>
   ============================================================ */
.sk-aurora-text {
  background: linear-gradient(
    135deg,
    var(--sk-peach), var(--sk-rose), var(--sk-violet),
    var(--sk-indigo), var(--sk-mint), var(--sk-amber)
  );
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Edge anti-aliasing fix on some Safari builds */
  display: inline-block;
}

/* ============================================================
   12. Skeleton loader — shimmer wave for loading states
   ------------------------------------------------------------
   <div class="sk-skeleton" style="width:100%; height:16px;"></div>
   ============================================================ */
.sk-skeleton {
  position: relative;
  border-radius: 8px;
  background: rgba(245, 241, 235, 0.05);
  overflow: hidden;
}

.sk-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(217, 119, 87, 0.10) 25%,
    rgba(142, 127, 184, 0.18) 50%,
    rgba(107, 141, 201, 0.10) 75%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: sk-skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes sk-skeleton-shimmer {
  0%   { background-position: -150% 0; }
  100% { background-position:  150% 0; }
}

/* ============================================================
   13. Progress bar — determinate + indeterminate
   ------------------------------------------------------------
   <div class="sk-progress">
     <div class="sk-progress-fill" style="width: 60%"></div>
   </div>

   <div class="sk-progress sk-progress-indeterminate">
     <div class="sk-progress-fill"></div>
   </div>
   ============================================================ */
.sk-progress {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: rgba(245, 241, 235, 0.06);
  overflow: hidden;
}

.sk-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--sk-peach), var(--sk-rose), var(--sk-violet),
    var(--sk-indigo), var(--sk-mint), var(--sk-amber)
  );
  box-shadow: 0 0 10px rgba(217, 119, 87, 0.4);
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sk-progress-indeterminate .sk-progress-fill {
  width: 40%;
  animation: sk-progress-slide 1.6s ease-in-out infinite;
}

@keyframes sk-progress-slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

/* ============================================================
   14. Form inputs — sk-input + sk-textarea with aurora focus
   ------------------------------------------------------------
   <input type="text" class="sk-input" placeholder="…" />
   <textarea class="sk-textarea" placeholder="…"></textarea>
   ============================================================ */
.sk-input,
.sk-textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: rgba(20, 20, 19, 0.45);
  border: 1px solid var(--sk-border-subtle);
  border-radius: 12px;
  color: var(--sk-text-primary);
  font-family: var(--sk-font-mono, ui-monospace, "Geist Mono", monospace);
  font-size: 14px;
  line-height: 1.4;
  outline: none;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, background 200ms ease-out;
}

.sk-input::placeholder,
.sk-textarea::placeholder {
  color: var(--sk-text-muted);
}

.sk-input:hover,
.sk-textarea:hover {
  border-color: rgba(245, 241, 235, 0.14);
}

.sk-input:focus,
.sk-textarea:focus {
  border-color: rgb(var(--sk-section-rgb));
  box-shadow: 0 0 0 3px rgba(var(--sk-section-rgb), 0.22);
  background: rgba(20, 20, 19, 0.6);
}

.sk-textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--sk-font-body, var(--sk-font-mono));
}

/* ============================================================
   15. Marquee — smooth horizontal scroll with edge fade
   ------------------------------------------------------------
   <div class="sk-marquee">
     <div class="sk-marquee-track">
       <span>item 1</span><span>item 2</span>…
       <!-- duplicate the items so the loop is seamless -->
       <span>item 1</span><span>item 2</span>…
     </div>
   </div>
   ============================================================ */
.sk-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
          mask: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.sk-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 48px;
  white-space: nowrap;
  animation: sk-marquee-scroll 28s linear infinite;
  will-change: transform;
}

.sk-marquee:hover .sk-marquee-track {
  animation-play-state: paused;
}

@keyframes sk-marquee-scroll {
  to { transform: translateX(-50%); }
}

/* ============================================================
   16. Divider — subtle horizontal line, optional aurora flavor
   ------------------------------------------------------------
   <hr class="sk-divider" />
   <hr class="sk-divider sk-divider-aurora" />
   ============================================================ */
.sk-divider {
  height: 1px;
  width: 100%;
  border: 0;
  margin: 24px 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--sk-border-subtle) 25%,
    var(--sk-border-subtle) 75%,
    transparent
  );
}

.sk-divider-aurora {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(217, 119, 87, 0.4) 18%,
    rgba(142, 127, 184, 0.4) 50%,
    rgba(107, 141, 201, 0.4) 82%,
    transparent
  );
}

/* ============================================================
   17. Status dot — colored pulse for online/busy/away/offline
   ------------------------------------------------------------
   <span class="sk-status-dot sk-status-online"></span>
   ============================================================ */
.sk-status-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sk-text-muted);
  vertical-align: middle;
}

.sk-status-online  { background: var(--sk-mint); }
.sk-status-busy    { background: var(--sk-peach); }
.sk-status-away    { background: var(--sk-amber); }
.sk-status-offline { background: var(--sk-text-muted); }

.sk-status-online::after,
.sk-status-busy::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: inherit;
  animation: sk-status-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sk-status-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.5; }
  50%      { transform: scale(1.6); opacity: 0;   }
}

/* ============================================================
   18. Stat tile — big number + label + optional trend arrow
   ------------------------------------------------------------
   <div class="sk-stat-tile">
     <div class="sk-stat-label">monthly active</div>
     <div class="sk-stat-value sk-aurora-text">12,400</div>
     <div class="sk-stat-trend sk-stat-trend-up">↑ 18.4%</div>
   </div>
   ============================================================ */
.sk-stat-tile {
  border-radius: 16px;
  padding: 24px;
  background: rgba(20, 20, 19, 0.5);
  border: 1px solid var(--sk-border-subtle);
  isolation: isolate;
}

.sk-stat-label {
  font-family: var(--sk-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sk-text-secondary);
  margin-bottom: 12px;
}

.sk-stat-value {
  font-family: var(--sk-font-display, ui-sans-serif, "Geist", system-ui, sans-serif);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 500;
}

.sk-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sk-font-mono);
  font-size: 12px;
  margin-top: 14px;
}

.sk-stat-trend-up   { color: var(--sk-mint); }
.sk-stat-trend-down { color: var(--sk-peach); }

/* ============================================================
   19. Tooltip — CSS-only on hover via [data-tooltip]
   ------------------------------------------------------------
   <button class="sk-tooltip" data-tooltip="cmd-shift-p">⌘⇧P</button>
   ============================================================ */
.sk-tooltip {
  position: relative;
  display: inline-block;
}

.sk-tooltip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  /* Static transform — animating translateY caused subpixel
     rendering blur on the text mid-transition. */
  transform: translateX(-50%);
  padding: 6px 10px;
  /* Solid bg — backdrop-filter rasterizes the tooltip into a
     compositing layer that some browsers (notably Safari) render
     with softer text. */
  background: #1a1a18;
  border: 1px solid var(--sk-border-subtle);
  border-radius: 8px;
  font-family: var(--sk-font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--sk-text-primary);
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
  z-index: 100;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(var(--sk-section-rgb), 0.18);
}

.sk-tooltip[data-tooltip]:hover::after,
.sk-tooltip[data-tooltip]:focus-within::after {
  opacity: 1;
}

/* ============================================================
   20. Modal scaffold — backdrop-blur overlay + glass panel
   ------------------------------------------------------------
   <div class="sk-modal-backdrop" data-sk-modal>
     <div class="sk-modal sk-antigrav-tile">…</div>
   </div>

   The backdrop handles the dim + blur; .sk-modal is just a sized
   container. Compose with .sk-antigrav-tile or .sk-holo-card for
   the visual treatment. Show/hide is handled by your code.
   ============================================================ */
.sk-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 24px;
}

/* The display:grid above otherwise wins over [hidden]'s implicit
   display:none, so the modal stays visible by default. Force it. */
.sk-modal-backdrop[hidden] {
  display: none;
}

.sk-modal {
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
}

/* ============================================================
   21. Noise overlay — subtle grain layer for cinematic feel
   ------------------------------------------------------------
   <div class="sk-noise-overlay" aria-hidden="true"></div>

   Mount once near the top of <body>. Drops grain across the whole
   viewport via mix-blend-mode: overlay so it tints existing colors
   rather than overlaying them.
   ============================================================ */
.sk-noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ============================================================
   22. Bento grid recipes
   ------------------------------------------------------------
   <div class="sk-bento sk-bento-3">…three tiles, hero + 2…</div>
   <div class="sk-bento sk-bento-feature">
     <div class="sk-bento-hero">…</div>
     …other tiles…
   </div>
   ============================================================ */
.sk-bento {
  display: grid;
  gap: 16px;
}

.sk-bento.sk-bento-2     { grid-template-columns: 1fr 1fr; }
.sk-bento.sk-bento-3     { grid-template-columns: 2fr 1fr 1fr; }
.sk-bento.sk-bento-4     { grid-template-columns: 2fr 1fr 1fr 1fr; }
.sk-bento.sk-bento-2-2   { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(120px, auto); }
.sk-bento.sk-bento-feature { grid-template-columns: repeat(4, 1fr); }
.sk-bento.sk-bento-feature > .sk-bento-hero {
  grid-column: span 2;
  grid-row:    span 2;
}

@media (max-width: 720px) {
  .sk-bento.sk-bento-3,
  .sk-bento.sk-bento-4,
  .sk-bento.sk-bento-feature {
    grid-template-columns: 1fr;
  }
  .sk-bento.sk-bento-feature > .sk-bento-hero {
    grid-column: 1; grid-row: auto;
  }
}

/* ============================================================
   23. Tabs — pill-style with current-tab highlight
   ------------------------------------------------------------
   <div class="sk-tabs" role="tablist">
     <button class="sk-tab is-active" role="tab" aria-selected="true">overview</button>
     <button class="sk-tab" role="tab">details</button>
     <button class="sk-tab" role="tab">history</button>
   </div>

   The active tab gets a tinted background using the current
   --sk-section-rgb. Section-aurora colors flow through.
   ============================================================ */
.sk-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(20, 20, 19, 0.4);
  border: 1px solid var(--sk-border-subtle);
  border-radius: 9999px;
}

.sk-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: 9999px;
  font-family: var(--sk-font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--sk-text-secondary);
  cursor: pointer;
  transition: color 200ms ease-out, background 200ms ease-out;
  line-height: 1;
}

.sk-tab:hover { color: var(--sk-text-primary); }

.sk-tab.is-active,
.sk-tab[aria-selected="true"] {
  color: var(--sk-text-primary);
  background: rgba(var(--sk-section-rgb), 0.20);
}

/* ============================================================
   24. Spotlight tile — mouse-tracked radial highlight
   ------------------------------------------------------------
   <div class="sk-spotlight-tile" data-sk-spotlight>…</div>

   Needs sparkles-kit.js. The script attaches a mousemove handler
   that sets --sk-mx / --sk-my (percentages) so the tile's ::before
   spotlight follows the cursor.
   ============================================================ */
.sk-spotlight-tile {
  position: relative;
  border-radius: 18px;
  padding: 28px;
  background: var(--sk-bg-elevated);
  border: 1px solid var(--sk-border-subtle);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 300ms ease-out;
}

.sk-spotlight-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px circle at var(--sk-mx, 50%) var(--sk-my, 50%),
    rgba(var(--sk-section-rgb), 0.22),
    transparent 42%
  );
  opacity: 0;
  transition: opacity 350ms ease-out;
  pointer-events: none;
  z-index: -1;
}

.sk-spotlight-tile:hover {
  border-color: rgba(var(--sk-section-rgb), 0.30);
}

.sk-spotlight-tile:hover::before { opacity: 1; }

/* ============================================================
   25. Tilt tile — 3D perspective tilt toward cursor
   ------------------------------------------------------------
   <div class="sk-tilt-tile" data-sk-tilt>…</div>

   Needs sparkles-kit.js. Script tracks pointer relative to the
   tile center and updates --sk-tilt-x / --sk-tilt-y (degrees).
   ============================================================ */
.sk-tilt-tile {
  position: relative;
  border-radius: 18px;
  padding: 28px;
  background: var(--sk-bg-elevated);
  border: 1px solid var(--sk-border-subtle);
  transform-style: preserve-3d;
  transform:
    perspective(900px)
    rotateX(var(--sk-tilt-x, 0deg))
    rotateY(var(--sk-tilt-y, 0deg));
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   26. Command palette — ⌘K modal
   ------------------------------------------------------------
   <div class="sk-modal-backdrop" data-sk-cmdk-root hidden>
     <div class="sk-cmdk">
       <input class="sk-cmdk-input" placeholder="search…" data-sk-cmdk-input />
       <ul class="sk-cmdk-list" data-sk-cmdk-list>
         <li class="sk-cmdk-item">
           <span>Open project</span>
           <kbd class="sk-kbd">⌘O</kbd>
         </li>
         …
       </ul>
     </div>
   </div>

   sparkles-kit.js wires up: ⌘K to open, Esc to close, fuzzy filter
   on input, ↑↓ to navigate, ↵ to confirm.
   ============================================================ */
.sk-cmdk {
  width: 100%;
  max-width: 580px;
  border-radius: 16px;
  background: rgba(20, 20, 19, 0.85);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--sk-border-subtle);
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(var(--sk-section-rgb), 0.10);
}

.sk-cmdk-input {
  display: block;
  width: 100%;
  padding: 18px 22px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sk-border-subtle);
  color: var(--sk-text-primary);
  font-family: var(--sk-font-mono);
  font-size: 15px;
  outline: none;
}

.sk-cmdk-input::placeholder { color: var(--sk-text-muted); }

.sk-cmdk-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  list-style: none;
  margin: 0;
}

.sk-cmdk-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  color: var(--sk-text-secondary);
  transition: background 150ms ease-out, color 150ms ease-out;
}

.sk-cmdk-item:hover,
.sk-cmdk-item.is-active,
.sk-cmdk-item[aria-selected="true"] {
  background: rgba(var(--sk-section-rgb), 0.14);
  color: var(--sk-text-primary);
}

.sk-cmdk-empty {
  padding: 24px;
  text-align: center;
  color: var(--sk-text-muted);
  font-family: var(--sk-font-mono);
  font-size: 13px;
}

/* Keyboard-key chip — looks great inside cmdk-item or anywhere */
.sk-kbd {
  display: inline-block;
  padding: 2px 6px;
  font-family: var(--sk-font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--sk-text-secondary);
  background: rgba(245, 241, 235, 0.06);
  border: 1px solid var(--sk-border-subtle);
  border-radius: 5px;
  line-height: 1.4;
  vertical-align: middle;
}

/* ============================================================
   31. Flip card — 3D card-flip on hover (or click-toggle)
   ------------------------------------------------------------
   <div class="sk-flip-card" style="height: 240px;">
     <div class="sk-flip-card-inner">
       <div class="sk-flip-card-face sk-flip-card-front">…front…</div>
       <div class="sk-flip-card-face sk-flip-card-back">…back…</div>
     </div>
   </div>

   Or click-to-toggle (CSS-only via hidden checkbox + :has()):

   <label class="sk-flip-card sk-flip-card-toggle" style="height: 240px;">
     <input type="checkbox" hidden />
     <div class="sk-flip-card-inner">
       <div class="sk-flip-card-face sk-flip-card-front">…</div>
       <div class="sk-flip-card-face sk-flip-card-back">…</div>
     </div>
   </label>

   Pure CSS — transform-style:preserve-3d on the inner, with
   backface-visibility:hidden on each face so only one shows at
   a time. The back face starts pre-rotated 180° so when the
   inner spins, the back swings forward into view.
   ============================================================ */
.sk-flip-card {
  position: relative;
  width: 100%;
  height: 240px;
  perspective: 1200px;
  cursor: pointer;
}

.sk-flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.sk-flip-card-face {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 24px;
  background: var(--sk-bg-elevated);
  border: 1px solid var(--sk-border-subtle);
  color: var(--sk-text-primary);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.sk-flip-card-back {
  transform: rotateY(180deg);
}

/* Hover-flip is the default. The :has() rule below covers
   click-toggle when .sk-flip-card-toggle is present. */
.sk-flip-card:hover .sk-flip-card-inner {
  transform: rotateY(180deg);
}

/* Click-to-toggle modifier — the parent is a <label> with a
   hidden checkbox; clicking anywhere toggles checked, and :has()
   drives the rotation. Hover-flip is disabled here so the click
   state owns the card. */
.sk-flip-card-toggle {
  cursor: pointer;
}

.sk-flip-card-toggle:hover .sk-flip-card-inner {
  transform: none; /* let click-state win */
}

.sk-flip-card-toggle:has(input:checked) .sk-flip-card-inner,
.sk-flip-card-toggle:has(input:checked):hover .sk-flip-card-inner {
  transform: rotateY(180deg);
}

/* ============================================================
   28. Custom cursor — soft glow following the OS pointer
   ------------------------------------------------------------
   <div class="sk-cursor" aria-hidden="true"></div>

   Mount once in your layout. sparkles-kit.js animates --sk-cx /
   --sk-cy (lerped target → smooth follow), and toggles .is-hover
   when the pointer is over interactive elements. The OS cursor
   stays visible — this is a co-cursor halo, not a replacement.
   ============================================================ */
.sk-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  background: rgba(245, 241, 235, 0.05);
  border: 1px solid rgba(245, 241, 235, 0.55);
  box-shadow:
    0 0 16px rgba(var(--sk-section-rgb), 0.35),
    inset 0 0 6px rgba(var(--sk-section-rgb), 0.20);
  transform: translate(var(--sk-cx, -100px), var(--sk-cy, -100px));
  transition: width 250ms ease-out, height 250ms ease-out,
              margin 250ms ease-out, opacity 250ms ease-out,
              border-color 250ms ease-out;
  opacity: 0;
}

.sk-cursor.is-active { opacity: 1; }

.sk-cursor.is-hover {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-color: rgb(var(--sk-section-rgb));
  background: rgba(var(--sk-section-rgb), 0.12);
}

/* Hide on coarse pointers (touch devices) — no cursor exists. */
@media (pointer: coarse) {
  .sk-cursor { display: none; }
}

/* ============================================================
   29. Magnetic — element pulls toward cursor on hover
   ------------------------------------------------------------
   <button class="sk-pill sk-magnetic" data-sk-magnetic>click me</button>
   <button class="sk-pill sk-magnetic" data-sk-magnetic
           data-sk-magnetic-strength="0.5">stronger pull</button>

   Needs sparkles-kit.js. The script tracks pointer position
   relative to the element center and applies a translate via
   --sk-mag-x / --sk-mag-y. Strength defaults to 0.3 (cursor
   moves the element 30% of the cursor-to-center distance);
   override per-element with data-sk-magnetic-strength.
   ============================================================ */
.sk-magnetic {
  transform: translate(var(--sk-mag-x, 0), var(--sk-mag-y, 0));
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ============================================================
   30. Ripple — Material-style click wave from cursor position
   ------------------------------------------------------------
   <button class="sk-pill sk-ripple" data-sk-ripple>tap me</button>

   Needs sparkles-kit.js. On click the script appends a
   <span class="sk-ripple-wave"> at the click coordinates inside
   the parent; the CSS animation expands and fades it out, then
   the script removes the element.
   ============================================================ */
.sk-ripple {
  position: relative;
  overflow: hidden;
}

.sk-ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(245, 241, 235, 0.4);
  pointer-events: none;
  transform: scale(0);
  animation: sk-ripple-expand 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sk-ripple-expand {
  0%   { transform: scale(0);   opacity: 0.85; }
  100% { transform: scale(2.4); opacity: 0;    }
}

/* ============================================================
   27. Reveal + stagger — scroll-driven entrance animations
   ------------------------------------------------------------
   <div class="sk-reveal">…fades + slides up as it scrolls in…</div>

   <ul class="sk-stagger-children">
     <li>first  — enters at scroll position 0</li>
     <li>second — enters slightly later</li>
     <li>third  — slightly later again</li>
   </ul>

   Uses `animation-timeline: view()` — the animation progress is
   tied to the element's scroll position relative to the viewport.
   Zero JS. In browsers that support it (Chrome/Edge 115+, Firefox
   140+), the element animates AS you scroll past it. In browsers
   that don't, the keyframe runs over its default 0s duration so
   the element jumps to its end state on load — i.e. it just shows
   up normally. Graceful fallback.
   ============================================================ */
.sk-reveal,
.sk-stagger-children > * {
  animation: sk-reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 60%;
}

@keyframes sk-reveal {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger via nth-child --i fallback. For >12 children, set --i
   inline (e.g. style="--i: 12"). Each child's reveal range slides
   forward in the entry phase, so they cascade as you scroll. */
.sk-stagger-children > * {
  animation-range:
    entry calc(var(--i, 0) * 4%)
    entry calc(50% + var(--i, 0) * 4%);
}

.sk-stagger-children > *:nth-child(1)  { --i:  0; }
.sk-stagger-children > *:nth-child(2)  { --i:  1; }
.sk-stagger-children > *:nth-child(3)  { --i:  2; }
.sk-stagger-children > *:nth-child(4)  { --i:  3; }
.sk-stagger-children > *:nth-child(5)  { --i:  4; }
.sk-stagger-children > *:nth-child(6)  { --i:  5; }
.sk-stagger-children > *:nth-child(7)  { --i:  6; }
.sk-stagger-children > *:nth-child(8)  { --i:  7; }
.sk-stagger-children > *:nth-child(9)  { --i:  8; }
.sk-stagger-children > *:nth-child(10) { --i:  9; }
.sk-stagger-children > *:nth-child(11) { --i: 10; }
.sk-stagger-children > *:nth-child(12) { --i: 11; }

/* ============================================================
   10. Reduced motion — respect users who don't want spinning
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sk-blob,
  .sk-sparkle-ambient,
  .sk-aurora-line::after,
  .sk-holo-card::before,
  .sk-holo-card.sk-holo-glow::after,
  .sk-pill-holo::before,
  .sk-pill-holo::after,
  .sk-holo-panel::before,
  .sk-prism-tile,
  .sk-prism-tile::before,
  .sk-prism-tile.sk-prism-festival,
  .sk-putty-blob,
  .sk-putty-blob::before,
  .sk-putty-blob.sk-putty-aurora,
  .sk-antigrav-tile,
  .sk-antigrav-tile::before,
  .sk-antigrav-tile::after,
  .sk-color-spill.sk-spill-drift,
  .sk-liquid-tile,
  .sk-skeleton::after,
  .sk-progress-indeterminate .sk-progress-fill,
  .sk-marquee-track,
  .sk-status-online::after,
  .sk-status-busy::after,
  .sk-avatar-ring {
    animation: none !important;
  }
  .sk-tilt-tile,
  .sk-magnetic {
    transform: none !important;
  }
  .sk-flip-card-inner {
    transition: none !important;
  }
  .sk-ripple-wave { display: none; }
  .sk-cursor      { opacity: 0 !important; }
  /* Reveal/stagger: skip the entrance animation so elements show
     at their final state instead of staying invisible. */
  .sk-reveal,
  .sk-stagger-children > * {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}