/* DkTechnoLab — effects (pairs with assets/js/effects.js)
 * Hidden initial states only apply under html.js-fx (added by effects.js),
 * so content stays visible if JS fails or motion is reduced. */

:root {
  --fx-ease: cubic-bezier(.2, .8, .2, 1);
  --fx-cyan-rgb: 255, 193, 7;
}

.fx-rel { position: relative; }

/* ------------------------------------------------------------ Scroll reveal */
html.js-fx [data-anim]:not(.fx-done) {
  opacity: 0;
  transition:
    opacity var(--fx-dur, 800ms) var(--fx-ease) var(--fx-delay, 0ms),
    transform var(--fx-dur, 800ms) var(--fx-ease) var(--fx-delay, 0ms),
    filter var(--fx-dur, 800ms) var(--fx-ease) var(--fx-delay, 0ms);
}
html.js-fx [data-anim="fade-up"]:not(.fx-done)    { transform: translate3d(0, 32px, 0); }
html.js-fx [data-anim="fade-down"]:not(.fx-done)  { transform: translate3d(0, -32px, 0); }
html.js-fx [data-anim="fade-left"]:not(.fx-done)  { transform: translate3d(40px, 0, 0); }
html.js-fx [data-anim="fade-right"]:not(.fx-done) { transform: translate3d(-40px, 0, 0); }
html.js-fx [data-anim="zoom-in"]:not(.fx-done)    { transform: scale(.92); }
html.js-fx [data-anim="blur-in"]:not(.fx-done)    { filter: blur(12px); transform: scale(1.02); }
html.js-fx [data-anim="flip-up"]:not(.fx-done)    { transform: perspective(900px) rotateX(18deg) translate3d(0, 24px, 0); transform-origin: 50% 100%; }
html.js-fx [data-anim].fx-in:not(.fx-done) { opacity: 1; transform: none; filter: none; }

/* Word split */
.fx-split .fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.fx-split .fx-wi { display: inline-block; }
html.js-fx .fx-split:not(.fx-done) .fx-wi {
  opacity: 0;
  transform: translate3d(0, 105%, 0);
  transition:
    transform var(--fx-dur, 800ms) var(--fx-ease) calc(var(--fx-delay, 0ms) + var(--i, 0) * var(--fx-step, 70ms)),
    opacity var(--fx-dur, 800ms) ease calc(var(--fx-delay, 0ms) + var(--i, 0) * var(--fx-step, 70ms));
}
html.js-fx .fx-split.fx-in:not(.fx-done) .fx-wi { opacity: 1; transform: none; }

/* Image clip-path wipe */
html.js-fx img[data-reveal-img]:not(.fx-done) {
  clip-path: inset(0 100% 0 0 round 20px);
  transform: scale(1.06);
  transition:
    clip-path var(--fx-dur, 1100ms) cubic-bezier(.77, 0, .18, 1) var(--fx-delay, 0ms),
    transform calc(var(--fx-dur, 1100ms) + 300ms) var(--fx-ease) var(--fx-delay, 0ms);
}
html.js-fx img[data-reveal-img].fx-in:not(.fx-done) { clip-path: inset(0 0 0 0 round 20px); transform: none; }

/* ------------------------------------------------------------ Typewriter */
.fx-typed { white-space: nowrap; }
.fx-typed::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -.1em;
  background: currentColor;
  border-radius: 1px;
  animation: fxCaret 1s steps(1) infinite;
}
.text-grad .fx-typed::after, .fx-typed.text-grad::after { background: var(--dk-cyan-600, #9A6B00); }
.fx-typed-static::after { display: none; }
@keyframes fxCaret { 50% { opacity: 0; } }

/* ------------------------------------------------------------ Tilt + glare */
.fx-tilt { transform-style: preserve-3d; will-change: auto; }
.fx-tilt.fx-tilt-on { will-change: transform; }
.fx-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%);
  mix-blend-mode: soft-light;
  transition: opacity .35s ease;
}
.fx-tilt-on > .fx-glare { opacity: 1; }

/* ------------------------------------------------------------ Spotlight */
.fx-spot { isolation: isolate; }
.fx-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1; /* above host background, below content (host is isolated) */
  opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--fx-cyan-rgb), .13), rgba(var(--fx-cyan-rgb), 0) 60%);
  transition: opacity .35s ease;
}
.fx-spot:hover::before { opacity: 1; }
.bg-navy .fx-spot::before { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--fx-cyan-rgb), .18), rgba(var(--fx-cyan-rgb), 0) 60%); }

/* ------------------------------------------------------------ Ripple */
.fx-ripple-wrap { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.fx-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .22;
  transform: scale(0);
  pointer-events: none;
  animation: fxRipple .6s ease-out forwards;
}
@keyframes fxRipple { to { transform: scale(1); opacity: 0; } }

/* ------------------------------------------------------------ Parallax */
.fx-plx { will-change: translate; }

/* ------------------------------------------------------------ Scroll progress */
.fx-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2000;
  pointer-events: none;
  background: var(--dk-grad, linear-gradient(90deg, #FFC107, #F59E0B));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ------------------------------------------------------------ Navbar hide on scroll down */
.dk-nav.fx-nav {
  transition: box-shadow .3s ease, border-color .3s ease, padding .3s ease, background-color .3s ease, transform .4s var(--fx-ease);
}
.dk-nav.fx-nav-hide { transform: translateY(calc(-100% - 4px)); }

/* ------------------------------------------------------------ Page loader */
.fx-loader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  background: #fff;
  pointer-events: none; /* never blocks interaction */
  transition: opacity .3s ease, visibility .3s ease;
  animation: fxLoaderAuto .4s ease 2s forwards; /* CSS fallback if JS stalls */
}
.fx-loader-out { opacity: 0; visibility: hidden; }
.fx-loader-mark { display: grid; justify-items: center; gap: 14px; }
.fx-loader-mark img { width: 56px; height: 56px; object-fit: contain; animation: fxPulse 1s ease-in-out infinite; }
.fx-loader-bar { display: block; width: 64px; height: 3px; border-radius: 3px; background: rgba(var(--fx-cyan-rgb), .15); overflow: hidden; position: relative; }
.fx-loader-bar::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: inherit; background: var(--dk-grad, linear-gradient(90deg, #FFC107, #F59E0B)); animation: fxLoadBar .9s ease-in-out infinite; }
@keyframes fxLoaderAuto { to { opacity: 0; visibility: hidden; } }
@keyframes fxPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.9); opacity: .75; } }
@keyframes fxLoadBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* ------------------------------------------------------------ Hover micro-interactions */
/* .link-arrow: underline grows from left */
.link-arrow {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size .35s var(--fx-ease), color .25s ease;
  padding-bottom: 2px;
}
.link-arrow:hover, .link-arrow:focus-visible { background-size: 100% 1.5px; }

/* .dk-card icon bounce (animates the glyph so it doesn't fight the .ico hover transform) */
.dk-card .ico i { display: inline-block; }
.dk-card:hover .ico i { animation: fxIconBounce .7s var(--fx-ease); }
@keyframes fxIconBounce {
  0% { transform: translateY(0); }
  30% { transform: translateY(-6px) scale(1.08); }
  55% { transform: translateY(1px) scale(.98); }
  75% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

/* Blog thumbnail zoom */
.blog-card .thumb { overflow: hidden; }
.blog-card .thumb img { transition: transform .7s var(--fx-ease), filter .7s ease; }
.blog-card:hover .thumb img { transform: scale(1.07); filter: saturate(1.08); }

/* Button shine sweep */
.btn-accent, .btn-grad { position: relative; isolation: isolate; }
.btn-accent::before, .btn-grad::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 65%) no-repeat;
  background-size: 250% 100%;
  background-position: 160% 0;
  transition: background-position .8s var(--fx-ease);
}
.btn-accent:hover::before, .btn-grad:hover::before, .btn-accent:focus-visible::before, .btn-grad:focus-visible::before { background-position: -60% 0; }

/* ------------------------------------------------------------ Reduced motion: show everything instantly */
@media (prefers-reduced-motion: reduce) {
  html.js-fx [data-anim], html.js-fx .fx-split .fx-wi, html.js-fx img[data-reveal-img] {
    opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important;
  }
  .fx-loader, .fx-glare, .fx-ripple-wrap { display: none !important; }
  .fx-typed::after { animation: none; }
  .dk-nav.fx-nav-hide { transform: none; }
}
.fx-loader-mark img { object-fit: contain; }