/* Kinva — visual effects layer (original code, no external libraries)
   Stars + waves canvas, glow orbs, scroll-reveal, button bounce & glow.
   Performance rules: GPU-only properties (transform/opacity), zero layout thrash,
   everything disabled under prefers-reduced-motion. */

/* keep page content above the fx canvas/orbs */
.k-header, .k-app-main, main, footer, .k-container { position: relative; z-index: 2; }

/* ---- fx canvas (stars + interactive waves) ---- */
#kfxCanvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none; display: block;
}

/* ---- floating glow orbs (توهجات ضوئية متحركة) ---- */
.k-orb {
  position: fixed; z-index: 0; pointer-events: none;
  width: 38vmin; height: 38vmin; border-radius: 50%;
  filter: blur(42px); opacity: .5; will-change: transform;
}
.k-orb-1 { background: radial-gradient(circle, rgba(139,92,246,.40), transparent 70%); top: -14vmin; left: -8vmin;  animation: kOrbA 26s ease-in-out infinite alternate, k-orb-breathe 7.5s ease-in-out infinite; }
.k-orb-2 { background: radial-gradient(circle, rgba(37,182,242,.34), transparent 70%); bottom: -14vmin; right: -10vmin; animation: kOrbB 32s ease-in-out infinite alternate, k-orb-breathe 9s ease-in-out infinite .8s; }
.k-orb-3 { background: radial-gradient(circle, rgba(236,72,153,.30), transparent 70%); top: -6vmin; left: 50%; animation: kOrbC 38s ease-in-out infinite alternate, k-orb-breathe 8.2s ease-in-out infinite 1.6s; }
@keyframes kOrbA { from { transform: translate3d(0,0,0) scale(1); }    to { transform: translate3d(14vmin,10vmin,0) scale(1.25); } }
@keyframes kOrbB { from { transform: translate3d(0,0,0) scale(1.15); } to { transform: translate3d(-12vmin,-8vmin,0) scale(.9); } }
@keyframes kOrbC { from { transform: translate3d(0,0,0) scale(.85); }  to { transform: translate3d(-10vmin,12vmin,0) scale(1.2); } }
/* slow "breathing" glow — the top lights swell and fade */
@keyframes k-orb-breathe { 0%, 100% { opacity: .34; } 50% { opacity: .72; } }

/* ---- scroll reveal: cards / posts / sections float up one after another ---- */
.k-fxr {
  opacity: 0;
  transform: translate3d(0, 42px, 0) scale(.985);
  transition: opacity .68s ease, transform .78s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.k-fxr.k-in { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.k-fxr.k-pop-in,
.k-fxr.k-fade-up,
.k-stagger > .k-fxr {
  animation: none !important;
}
.k-fxr.post-card,
.k-fxr.blog-card,
.k-fxr.k-sublist-card,
.k-fxr.k-word-tile {
  backface-visibility: hidden;
}

/* ---- buttons: jump + glow on touch/click ---- */
.k-btn, .k-nav-tab, .tabrow button {
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.k-btn:active, .k-nav-tab:active, .tabrow button:active { transform: scale(.93); }
.k-pressed { animation: kBounce .42s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes kBounce {
  0% { transform: scale(.9); }
  55% { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.k-btn-primary { position: relative; }
.k-btn-primary::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit; z-index: -1;
  background: linear-gradient(135deg, rgba(139,92,246,.6), rgba(236,72,153,.5), rgba(37,182,242,.55));
  filter: blur(12px); opacity: 0; transition: opacity .3s ease;
}
.k-btn-primary:hover::after, .k-btn-primary:focus-visible::after, .k-pressed.k-btn-primary::after { opacity: .95; }
.k-btn-primary:hover, .k-pressed.k-btn-primary { box-shadow: 0 10px 28px -6px rgba(108,76,241,.5); }

/* touch ripple ring on any button */
.k-tapring {
  position: fixed; z-index: 3; pointer-events: none; border-radius: 50%;
  border: 2px solid rgba(108,76,241,.55); width: 14px; height: 14px;
  transform: translate(-50%, -50%) scale(.6); opacity: .9;
  animation: kRing .5s ease-out forwards;
}
@keyframes kRing { to { transform: translate(-50%, -50%) scale(4.2); opacity: 0; } }

/* ---- nav links: animated gradient underline (desktop) ---- */
.desktop-nav a, .nav-list a { position: relative; }
.desktop-nav a::after, .nav-list a::after {
  content: ""; position: absolute; inset-inline: 6px; bottom: 1px; height: 2.5px; border-radius: 3px;
  background: var(--k-grad-aurora); transform: scaleX(0); transform-origin: center;
  transition: transform .3s var(--k-ease-smooth);
}
.desktop-nav a:hover::after, .nav-list a:hover::after { transform: scaleX(1); }

/* ---- post thumbnails: shine sweep + gentle image zoom on hover ---- */
.post-card .thumb, .blog-card .thumb { position: relative; overflow: hidden; }
.post-card .thumb::after, .blog-card .thumb::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.4) 50%, transparent 62%);
  transform: translateX(-140%); transition: transform .7s var(--k-ease-smooth);
}
.post-card:hover .thumb::after, .blog-card:hover .thumb::after { transform: translateX(140%); }
.post-card .thumb img, .blog-card .thumb img { transition: transform .6s var(--k-ease-smooth), filter .4s ease; }
.post-card:hover .thumb img, .blog-card:hover .thumb img { transform: scale(1.07); filter: saturate(1.12); }

/* ---- post cards: gradient top-accent that reveals on hover ---- */
.post-card, .blog-card { position: relative; }
.post-card::before, .blog-card::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; z-index: 3;
  background: var(--k-grad-aurora); opacity: 0; transition: opacity .3s ease;
}
.post-card:hover::before, .blog-card:hover::before { opacity: 1; }

/* ---- header reacts to scroll (soft shadow once you move down) ---- */
.topbar, .k-header { transition: box-shadow .28s ease, background .28s ease; }
.topbar.is-scrolled, .k-header.is-scrolled { box-shadow: 0 10px 30px -16px rgba(33, 23, 84, .35); }

/* ---- reading progress bar (articles) ---- */
.k-read-progress {
  position: fixed; top: 0; inset-inline-start: 0; width: 100%; height: 3px; z-index: 300;
  background: var(--k-grad-aurora); transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}
[dir="rtl"] .k-read-progress { transform-origin: 100% 50%; }

/* ---- floating back-to-top button ---- */
.k-totop {
  position: fixed; inset-block-end: 84px; inset-inline-start: 18px; z-index: 86;
  width: 46px; height: 46px; border: none; border-radius: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: var(--k-grad-aurora); box-shadow: 0 12px 28px -8px rgba(108,76,241,.6);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.92);
  transition: opacity .3s ease, transform .3s var(--k-ease), visibility .3s;
}
.k-totop.show { opacity: 1; visibility: visible; transform: none; }
.k-totop:hover { transform: translateY(-3px); }
.k-totop:active { transform: scale(.9); }
.k-totop svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ================= autonomous luxe motion (visible without hover / on mobile) ================= */

/* periodic shine sweep across post thumbnails */
@keyframes k-auto-shine { 0% { transform: translateX(-150%); } 16%, 100% { transform: translateX(150%); } }
.post-card .thumb::after, .blog-card .thumb::after { animation: k-auto-shine 7s ease-in-out infinite; }
.post-card:nth-child(2) .thumb::after, .blog-card:nth-child(2) .thumb::after { animation-delay: 1.3s; }
.post-card:nth-child(3) .thumb::after, .blog-card:nth-child(3) .thumb::after { animation-delay: 2.6s; }
.post-card:nth-child(4) .thumb::after, .blog-card:nth-child(4) .thumb::after { animation-delay: 3.9s; }
.post-card:nth-child(5) .thumb::after, .blog-card:nth-child(5) .thumb::after { animation-delay: 5.2s; }

/* single-article card breathes a soft colored glow */
@keyframes k-card-breathe {
  0%, 100% { box-shadow: 0 12px 34px -18px rgba(108,76,241,.5); }
  50%      { box-shadow: 0 20px 48px -16px rgba(236,72,153,.55); }
}
.article.k-card { animation: k-card-breathe 4.5s ease-in-out infinite; }

/* (card/tile entrance is handled by the scroll-reveal system above: .k-fxr → .k-in) */

/* ===== icons come alive: pop in, then gently bob; lively on hover/press ===== */
.icon-btn, .k-hicon, .k-burger { animation: k-icon-pop .5s var(--k-ease) both; }
.top-actions .icon-btn:nth-child(1), .k-top-actions .k-hicon:nth-child(1) { animation-delay: .05s; }
.top-actions .icon-btn:nth-child(2), .k-top-actions .k-hicon:nth-child(2) { animation-delay: .13s; }
.top-actions .icon-btn:nth-child(3), .k-top-actions .k-hicon:nth-child(3) { animation-delay: .21s; }
.icon-btn svg, .k-hicon svg { transition: transform .25s var(--k-ease); }
.icon-btn:hover svg, .k-hicon:hover svg { transform: scale(1.18) rotate(-8deg); }
.icon-btn:active svg, .k-hicon:active svg { transform: scale(.85); }
/* category chips pop in */
.k-chip { animation: k-icon-pop .5s var(--k-ease) both; }

/* section heading accent bar glows */
@keyframes k-bar-pulse { 0%, 100% { opacity: .82; filter: saturate(1); } 50% { opacity: 1; filter: saturate(1.45) brightness(1.12); } }
.section-heading::before { animation: k-bar-pulse 2.8s ease-in-out infinite; }

/* main call-to-action breathes a glow */
@keyframes k-cta-glow {
  0%, 100% { box-shadow: 0 8px 22px -6px rgba(108,76,241,.55); }
  50%      { box-shadow: 0 12px 30px -4px rgba(236,72,153,.6); }
}
.top-login.k-btn-primary, .k-fab, #goBtn.k-btn-primary { animation: k-cta-glow 3s ease-in-out infinite; }

/* playful life: word-tile emojis wiggle, word-card visual floats */
@keyframes k-wiggle { 0%, 84%, 100% { transform: rotate(0); } 88% { transform: rotate(-9deg); } 92% { transform: rotate(8deg); } 96% { transform: rotate(-4deg); } }
.k-word-tile .k-emoji { animation: k-wiggle 4.2s ease-in-out infinite; display: inline-block; }
.k-wordcard .k-visual { animation: k-float-soft 4s ease-in-out infinite; }

/* ---- accessibility & battery: kill all motion when user asks ---- */
@media (prefers-reduced-motion: reduce) {
  .k-orb { animation: none; }
  .k-fxr { opacity: 1; transform: none; }
  .k-pressed { animation: none; }
  .k-tapring { display: none; }
  .k-blobs::before, .k-blobs::after { animation: none; }
  .k-logo .k-logo-name, .brand-glow, .k-brand { animation: none !important; }
}