/* KDS v1.0 · css/effects.css · © Khosha Systems. All rights reserved.
   The design-type layer: section backdrops, textures, motion surfaces. Every animated effect has a
   prefers-reduced-motion fallback (bottom of file). Tints use the *-soft tokens so any brand re-colours them.
   JS hooks: motion.js sets --mx/--my/--rx/--ry on .kds-spotlight, width on .kds-scroll-progress__bar,
   and clones .kds-marquee__track into .kds-marquee__clone. */

/* ---------- backdrops ---------- */
.kds-aurora { --kds-aurora-blur: 46px; position: relative; isolation: isolate; }
.kds-aurora::before { content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none; filter: blur(var(--kds-aurora-blur)) saturate(1.3); background:
    radial-gradient(38% 48% at 18% 28%, var(--kds-brand-soft), transparent 70%),
    radial-gradient(40% 44% at 82% 20%, var(--kds-accent-soft), transparent 70%),
    radial-gradient(48% 50% at 62% 82%, var(--kds-warning-soft), transparent 70%);
  animation: kds-aurora-drift 20s var(--kds-ease-standard) infinite alternate; }
@keyframes kds-aurora-drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.12); } }
.kds-mesh { background:
    radial-gradient(50% 60% at 0% 0%, var(--kds-brand-soft), transparent 60%),
    radial-gradient(40% 50% at 100% 0%, var(--kds-accent-soft), transparent 55%),
    var(--kds-bg); }
.kds-grain { position: relative; }
.kds-grain::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
.kds-grain > * { position: relative; z-index: 1; }
.kds-grid-bg { --kds-grid-bg-size: 28px; background-image:
    linear-gradient(color-mix(in srgb, var(--kds-fg) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--kds-fg) 6%, transparent) 1px, transparent 1px);
  background-size: var(--kds-grid-bg-size) var(--kds-grid-bg-size); }
.kds-dot-grid { --kds-dot-grid-size: 18px; background-image: radial-gradient(color-mix(in srgb, var(--kds-fg) 12%, transparent) 1px, transparent 1px); background-size: var(--kds-dot-grid-size) var(--kds-dot-grid-size); }
.kds-glass { background: color-mix(in srgb, var(--kds-surface) 62%, transparent); backdrop-filter: blur(12px) saturate(1.2); border: var(--kds-border-w) solid color-mix(in srgb, var(--kds-fg) 10%, transparent); border-radius: var(--kds-radius-lg); }

/* ---------- text + surface accents ---------- */
.kds-gradient-text { background: linear-gradient(100deg, var(--kds-brand), var(--kds-warning) 45%, var(--kds-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kds-shine { position: relative; overflow: hidden; }
.kds-shine::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; pointer-events: none; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--kds-n10) 35%, transparent), transparent); transition: left var(--kds-dur-slow) var(--kds-ease-standard); }
.kds-shine:hover::after { left: 140%; }
.kds-noise-divider { height: 6px; margin-block: var(--kds-sp-6); border: 0; opacity: 0.7; background: linear-gradient(90deg, transparent, var(--kds-fg-muted), transparent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- bento ---------- */
.kds-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kds-sp-3); }
@media (min-width: 768px) { /* bp-md */ .kds-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(120px, auto); } }
.kds-bento__item { padding: var(--kds-sp-4); background: var(--kds-surface); border: var(--kds-border-w) solid var(--kds-border); border-radius: var(--kds-radius-lg); transition: border-color var(--kds-dur-base) var(--kds-ease-standard), transform var(--kds-dur-base) var(--kds-ease-standard); }
.kds-bento__item:hover { border-color: color-mix(in srgb, var(--kds-brand) 40%, var(--kds-border)); transform: translateY(-2px); }
.kds-bento__item--wide { grid-column: span 2; }
.kds-bento__item--tall { grid-row: span 2; }

/* ---------- marquee + ticker ---------- */
.kds-marquee { --kds-marquee-gap: var(--kds-sp-8); --kds-marquee-dur: 36s; width: 100%; overflow: hidden; }
.kds-marquee--fade { -webkit-mask-image: linear-gradient(90deg, transparent, var(--kds-n0) 8%, var(--kds-n0) 92%, transparent); mask-image: linear-gradient(90deg, transparent, var(--kds-n0) 8%, var(--kds-n0) 92%, transparent); }
.kds-marquee__track { display: flex; align-items: center; gap: var(--kds-marquee-gap); width: max-content; animation: kds-marquee-scroll var(--kds-marquee-dur) linear infinite; }
.kds-marquee__clone { display: flex; align-items: center; gap: var(--kds-marquee-gap); }
.kds-marquee[data-reverse="true"] .kds-marquee__track { animation-direction: reverse; }
.kds-marquee--pause:hover .kds-marquee__track { animation-play-state: paused; }
@keyframes kds-marquee-scroll { to { transform: translateX(-50%); } }
.kds-ticker { --kds-marquee-gap: var(--kds-sp-6); --kds-marquee-dur: 48s; display: flex; align-items: stretch; overflow: hidden; background: var(--kds-surface-2); border-block: var(--kds-border-w) solid var(--kds-border); font: var(--kds-weight-medium) var(--kds-text-xs) / 1 var(--kds-font-mono); letter-spacing: var(--kds-tracking-wide); text-transform: uppercase; color: var(--kds-fg-muted); white-space: nowrap; }
.kds-ticker__label { display: flex; align-items: center; flex-shrink: 0; padding: var(--kds-sp-2) var(--kds-sp-3); background: var(--kds-accent); color: var(--kds-accent-fg); font-weight: var(--kds-weight-semibold); }
.kds-ticker__track { display: flex; align-items: center; gap: var(--kds-marquee-gap); width: max-content; padding: var(--kds-sp-2) 0 var(--kds-sp-2) var(--kds-marquee-gap); animation: kds-marquee-scroll var(--kds-marquee-dur) linear infinite; }
.kds-ticker__item { display: inline-flex; align-items: center; gap: var(--kds-marquee-gap); }
.kds-ticker__item::after { content: "\2022"; color: var(--kds-fg-faint); }
.kds-ticker:hover .kds-ticker__track { animation-play-state: paused; }

/* ---------- spotlight / tilt card (motion.js spotlight() drives --mx --my --rx --ry) ---------- */
.kds-spotlight { --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; position: relative; border-radius: var(--kds-radius-lg); perspective: 900px; }
.kds-spotlight__inner { position: relative; height: 100%; overflow: hidden; background: var(--kds-surface); border: var(--kds-border-w) solid var(--kds-border); border-radius: var(--kds-radius-lg); transition: transform var(--kds-dur-base) var(--kds-ease-standard), border-color var(--kds-dur-base) var(--kds-ease-standard), box-shadow var(--kds-dur-base) var(--kds-ease-standard); }
.kds-spotlight__inner::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; background: radial-gradient(340px circle at var(--mx) var(--my), color-mix(in srgb, var(--kds-brand) 18%, transparent), transparent 60%); transition: opacity var(--kds-dur-base) var(--kds-ease-standard); }
.kds-spotlight__inner > * { position: relative; z-index: 1; }
.kds-spotlight:hover .kds-spotlight__inner { border-color: color-mix(in srgb, var(--kds-brand) 45%, var(--kds-border)); box-shadow: var(--kds-shadow-2); }
.kds-spotlight:hover .kds-spotlight__inner::before { opacity: 1; }
.kds-spotlight--tilt .kds-spotlight__inner { transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; }

/* ---------- page chrome: scroll progress, caret, confetti ---------- */
.kds-scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--kds-z-top); pointer-events: none; }
.kds-scroll-progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--kds-brand), var(--kds-warning) 55%, var(--kds-accent)); box-shadow: 0 0 8px color-mix(in srgb, var(--kds-brand) 50%, transparent); transition: width var(--kds-dur-fast) linear; }
.kds-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: text-bottom; background: var(--kds-brand); animation: kds-caret-blink 1s steps(1) infinite; }
@keyframes kds-caret-blink { 50% { opacity: 0; } }
.kds-confetti-layer { position: fixed; inset: 0; z-index: var(--kds-z-top); pointer-events: none; overflow: hidden; }
.kds-confetti-bit { position: absolute; width: 8px; height: 12px; border-radius: 1px; background: var(--kds-brand); will-change: transform, opacity; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .kds-aurora::before, .kds-marquee__track, .kds-ticker__track, .kds-caret { animation: none; }
  .kds-marquee, .kds-ticker { overflow-x: auto; }
  .kds-marquee__clone { display: none; }
  .kds-shine::after { display: none; }
  .kds-spotlight--tilt .kds-spotlight__inner { transform: none; }
  .kds-bento__item:hover { transform: none; }
  .kds-spotlight__inner, .kds-bento__item, .kds-scroll-progress__bar { transition: none; }
}