/* ============================================================================
   Taskhooker — "magical / dynamic" preview layer
   Loaded AFTER /styles.css. Adds motion, depth and brand-blue atmosphere on top
   of the existing static landing. Nothing here changes content or layout flow —
   only atmosphere, reveal-on-scroll, and interaction polish.
   All motion is disabled under prefers-reduced-motion (see bottom of file).
   ========================================================================== */

:root {
  --blue: #0C66E4;
  --blue-bright: #3D8BFF;
  --blue-deep: #0747A6;
  --blue-violet: #5B5BF0;
  --glow-x: 50%;
  --glow-y: 30%;
}

/* ---------------------------------------------------------------------------
   1. Scroll progress bar
   --------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 120;
  background: transparent;
  pointer-events: none;
}
.scroll-progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--blue-bright), var(--blue-violet));
  box-shadow: 0 0 12px rgba(12, 102, 228, 0.6);
  transition: width 80ms linear;
}

/* ---------------------------------------------------------------------------
   2. Hero atmosphere — animated aurora + grid + cursor glow
   --------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero .wrap { position: relative; z-index: 2; }

.hero-bg {
  position: absolute;
  inset: -10% -5% -20%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  will-change: transform;
  mix-blend-mode: multiply;
}
.aurora-1 {
  width: 46vw; height: 46vw;
  top: -12%; left: -6%;
  background: radial-gradient(circle at 30% 30%, rgba(61,139,255,0.9), rgba(12,102,228,0) 70%);
  animation: drift1 18s ease-in-out infinite alternate;
}
.aurora-2 {
  width: 40vw; height: 40vw;
  top: -8%; right: -8%;
  background: radial-gradient(circle at 60% 40%, rgba(91,91,240,0.75), rgba(91,91,240,0) 70%);
  animation: drift2 22s ease-in-out infinite alternate;
}
.aurora-3 {
  width: 50vw; height: 50vw;
  bottom: -30%; left: 25%;
  background: radial-gradient(circle at 50% 50%, rgba(12,102,228,0.6), rgba(12,102,228,0) 70%);
  animation: drift3 26s ease-in-out infinite alternate;
}

@keyframes drift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vw,4vh,0) scale(1.12); } }
@keyframes drift2 { from { transform: translate3d(0,0,0) scale(1.05); } to { transform: translate3d(-5vw,5vh,0) scale(0.95); } }
@keyframes drift3 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-4vw,-5vh,0) scale(1.15); } }

/* faint technical grid that fades toward the edges */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(12,102,228,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,102,228,0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%);
  opacity: 0.7;
}

/* cursor-following soft glow (position fed by JS via --glow-x / --glow-y) */
.hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(280px circle at var(--glow-x) var(--glow-y), rgba(61,139,255,0.18), transparent 70%);
  transition: background 120ms ease-out;
}

/* ---------------------------------------------------------------------------
   3. Animated gradient accent text
   --------------------------------------------------------------------------- */
.gradient-text {
  background: linear-gradient(100deg, var(--blue-deep), var(--blue), var(--blue-bright), var(--blue-violet), var(--blue));
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sheen 6s ease-in-out infinite;
}
@keyframes sheen { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------------------------------------------------------------------------
   4. Reveal-on-scroll
   --------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms cubic-bezier(0.22,0.8,0.24,1),
              transform 700ms cubic-bezier(0.22,0.8,0.24,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   5. Magnetic buttons + shine sweep
   --------------------------------------------------------------------------- */
.btn { position: relative; overflow: hidden; }
.btn.magnetic { transition: transform 200ms cubic-bezier(0.22,0.8,0.24,1), background 180ms ease, color 180ms ease, box-shadow 200ms ease; }
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg);
  transition: left 600ms ease;
  pointer-events: none;
}
.btn:hover::after { left: 140%; }
.btn.dark:hover { box-shadow: 0 16px 34px -12px rgba(12,102,228,0.45); }

/* ---------------------------------------------------------------------------
   6. Card depth — tilt + glow on portfolio / drawers / trust / pricing
   --------------------------------------------------------------------------- */
.pcard, .drawer, .trust-card {
  transition: transform 260ms cubic-bezier(0.22,0.8,0.24,1),
              box-shadow 260ms ease, border-color 260ms ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.pcard { position: relative; overflow: hidden; }
/* radial sheen that tracks the pointer inside portfolio cards */
.pcard::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(12,102,228,0.10), transparent 60%);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}
.pcard:hover::before { opacity: 1; }
.pcard:hover {
  border-color: rgba(12,102,228,0.4);
  box-shadow: 0 26px 60px -26px rgba(12,102,228,0.35);
}
.pcard .pcard-mark { transition: transform 300ms cubic-bezier(0.22,0.8,0.24,1); }
.pcard:hover .pcard-mark { transform: translateY(-2px) scale(1.06) rotate(-3deg); }

.drawer:hover { box-shadow: 0 22px 48px -24px rgba(12,102,228,0.30); }
.trust-card { position: relative; overflow: hidden; }
.trust-card:hover {
  transform: translateY(-3px);
  border-color: rgba(12,102,228,0.35);
  box-shadow: 0 22px 48px -26px rgba(12,102,228,0.30);
}
.trust-card .glyph { transition: transform 320ms cubic-bezier(0.22,0.8,0.24,1); }
.trust-card:hover .glyph { transform: scale(1.1) rotate(-4deg); }

/* ---------------------------------------------------------------------------
   7. Nav — sharpen on scroll
   --------------------------------------------------------------------------- */
.nav { transition: box-shadow 240ms ease, background 240ms ease, border-color 240ms ease; }
.nav.scrolled {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 30px -16px rgba(0,0,0,0.18);
  border-bottom-color: rgba(12,102,228,0.18);
}
.nav-cta { position: relative; overflow: hidden; transition: transform 180ms ease, background 160ms ease; }
.nav-cta:hover { transform: translateY(-1px); }

/* ---------------------------------------------------------------------------
   8. Floating product artifacts (receipt / byline / create card)
   --------------------------------------------------------------------------- */
.receipt, .wc-byline, .tmpl-create {
  will-change: transform;
  transition: transform 300ms cubic-bezier(0.22,0.8,0.24,1);
}
.app-split-art:hover .receipt,
.app-split-art:hover .wc-byline,
.app-split-art:hover .tmpl-create {
  transform: translateY(-6px) rotate(-0.4deg);
}

/* gentle idle float for the dark-section artifacts */
.section-dark .app-split-art { animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* count-up figures use tabular numerals so width doesn't jump while animating */
.countup { font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   9. Section-dark gets a subtle blue vignette for richness
   --------------------------------------------------------------------------- */
.section-dark.app-open { position: relative; overflow: hidden; isolation: isolate; }
.section-dark.app-open .wrap { position: relative; z-index: 2; }
.section-dark.app-open::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: 60vw; height: 60vw;
  top: -20%; right: -15%;
  background: radial-gradient(circle, rgba(12,102,228,0.22), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   10. Reduced motion — strip every animation, keep content fully visible
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .aurora, .gradient-text, .section-dark .app-split-art { animation: none !important; }
  .hero-glow { display: none; }
  .gradient-text {
    -webkit-text-fill-color: var(--blue);
    color: var(--blue);
  }
  .btn::after { display: none; }
}