/* ===========================================================================
   MiniScript Labs — premium interaction & visual layer
   Works alongside Tailwind. All motion is opt-in via data-* hooks and is
   disabled for users who prefer reduced motion.
   =========================================================================== */

:root {
  --ink: #1A1922;
  --ink-2: #21202E;
  --leaf: #9FD786;
  --leafdark: #7CB868;
  --cherry: #E5484D;
  --indigo: #6366F1;
  --violet: #8B5CF6;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---- Base polish ---------------------------------------------------------- */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

::selection { background: rgba(159, 215, 134, 0.35); color: inherit; }

/* Branded scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--leaf), var(--leafdark));
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}

/* ---- Film grain overlay --------------------------------------------------- */
.grain {
  position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ---- Aurora / mesh background -------------------------------------------- */
.aurora { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.aurora .orb {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55;
  will-change: transform;
}
.orb-leaf   { background: radial-gradient(circle, var(--leaf), transparent 65%); }
.orb-indigo { background: radial-gradient(circle, var(--indigo), transparent 65%); }
.orb-cherry { background: radial-gradient(circle, var(--cherry), transparent 65%); }
.orb-violet { background: radial-gradient(circle, var(--violet), transparent 65%); }
.orb-azure  { background: radial-gradient(circle, #2E90FA, transparent 65%); }
.orb-mint   { background: radial-gradient(circle, #2DD4BF, transparent 65%); }

@keyframes drift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33%      { transform: translate3d(4%, -6%, 0) scale(1.08); }
  66%      { transform: translate3d(-5%, 4%, 0) scale(0.95); }
}
.orb-anim { animation: drift 18s var(--ease-in-out) infinite; }
.orb-anim.delay-1 { animation-duration: 22s; animation-delay: -6s; }
.orb-anim.delay-2 { animation-duration: 26s; animation-delay: -12s; }

/* Conic spotlight that follows nothing — just adds depth on dark sections */
.spotlight::before {
  content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 0%, rgba(159,215,134,0.12), transparent 70%);
}

/* ---- Gradient text -------------------------------------------------------- */
.text-gradient {
  background: linear-gradient(110deg, var(--leaf), #cfeec0 40%, var(--indigo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-gradient-cherry {
  background: linear-gradient(110deg, var(--cherry), #ff8a8d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-gradient-indigo {
  background: linear-gradient(110deg, #818cf8, var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Animated shimmer sweep */
.text-shimmer {
  background-size: 200% auto; animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

/* ---- Buttons -------------------------------------------------------------- */
.btn-shine { position: relative; overflow: hidden; isolation: isolate; }
.btn-shine::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg); transition: none; z-index: 1;
}
.btn-shine:hover::after { animation: shine 0.85s var(--ease-out); }
@keyframes shine { to { left: 130%; } }

.btn-glow { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.btn-glow:hover { transform: translateY(-2px); }
.btn-glow.glow-leaf:hover   { box-shadow: 0 12px 40px -8px rgba(159,215,134,0.65); }
.btn-glow.glow-cherry:hover { box-shadow: 0 12px 40px -8px rgba(229,72,77,0.6); }
.btn-glow.glow-indigo:hover { box-shadow: 0 12px 40px -8px rgba(99,102,241,0.6); }
.btn-glow.glow-azure:hover  { box-shadow: 0 12px 40px -8px rgba(46,144,250,0.6); }
.btn-glow.glow-mint:hover   { box-shadow: 0 12px 40px -8px rgba(45,212,191,0.55); }

/* ---- Premium cards -------------------------------------------------------- */
.card-premium {
  position: relative; transition: box-shadow .5s var(--ease-out), transform .6s var(--ease-out);
  transform-style: preserve-3d; will-change: transform;
}
.card-premium:hover { box-shadow: 0 30px 60px -25px rgba(33,32,46,0.35); }

/* ---- 3D tilt (JS-driven perspective on .card-premium / [data-tilt]) ------- */
/* JS owns the `transform` during pointer move; layers pop via translateZ. */
[data-tilt-depth] { transition: transform .5s var(--ease-out); will-change: transform; }
.tilt-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity .45s var(--ease-out); mix-blend-mode: soft-light;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,0.35), transparent 55%);
}
.is-tilting .tilt-glare { opacity: 1; }

/* Pointer-reactive scene layers use the individual `translate` property so
   they COMPOSE with GSAP's scroll `transform` and CSS keyframe transforms. */
[data-pointer-depth] { transition: translate .5s var(--ease-out); will-change: translate; }
/* Spotlight that follows the cursor (driven by JS vars --mx/--my) */
.card-spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  transition: opacity .4s var(--ease-out); pointer-events: none; z-index: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
              rgba(159,215,134,0.18), transparent 60%);
}
.card-spot:hover::before { opacity: 1; }
.card-spot > * { position: relative; z-index: 1; }

/* Gradient border ring on hover */
.ring-hover { position: relative; }
.ring-hover::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(130deg, var(--leaf), var(--indigo), var(--cherry));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--ease-out); pointer-events: none;
}
.ring-hover:hover::after { opacity: 1; }

/* ---- Marquee -------------------------------------------------------------- */
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; flex-shrink: 0; gap: 4rem; padding-right: 4rem; animation: marquee 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---- Reveal initial states (only when JS + motion are available) ---------- */
html.has-js:not(.reduce-motion) [data-reveal] { opacity: 0; will-change: transform, opacity; }
html.has-js:not(.reduce-motion) [data-reveal="up"]    { transform: translateY(32px); }
html.has-js:not(.reduce-motion) [data-reveal="down"]  { transform: translateY(-32px); }
html.has-js:not(.reduce-motion) [data-reveal="left"]  { transform: translateX(40px); }
html.has-js:not(.reduce-motion) [data-reveal="right"] { transform: translateX(-40px); }
html.has-js:not(.reduce-motion) [data-reveal="scale"] { transform: scale(0.94); }
html.has-js:not(.reduce-motion) [data-reveal="blur"]  { filter: blur(12px); }
/* Failsafe: if scripts never run, reveal everything after a moment */
html.anims-failed [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }

/* Word-split spans for headline staggering */
.split-line { display: block; overflow: hidden; }
.split-word { display: inline-block; will-change: transform; }

/* ---- Scroll cue ----------------------------------------------------------- */
.scroll-cue { width: 26px; height: 42px; border: 2px solid rgba(255,255,255,0.35); border-radius: 999px; position: relative; }
.scroll-cue::after {
  content: ""; position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px;
  background: var(--leaf); border-radius: 999px; animation: cue 1.8s var(--ease-in-out) infinite;
}
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---- Floating product mock ----------------------------------------------- */
.glass {
  background: rgba(255,255,255,0.06); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.floaty { animation: float 7s var(--ease-in-out) infinite; }

/* ---- Homepage app showcase (auto-rotating slider) ------------------------ */
/* First slide carries .is-active in the HTML so it shows even if JS never runs. */
.showcase-slide { position: absolute; inset: 0; opacity: 0; transform: translateY(10px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); pointer-events: none; }
.showcase-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.showcase-tab { transition: color .3s var(--ease-out), background-color .3s var(--ease-out), border-color .3s var(--ease-out); }

/* ---- Nav scrolled state --------------------------------------------------- */
header[data-nav] { transition: backdrop-filter .4s var(--ease-out), background-color .4s var(--ease-out), box-shadow .4s var(--ease-out), height .4s var(--ease-out); }
header[data-nav].nav-scrolled { box-shadow: 0 10px 30px -18px rgba(33,32,46,0.4); }

/* Scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; z-index: 60; background: linear-gradient(90deg, var(--leaf), var(--indigo), var(--cherry)); }

/* ---- Blog article prose --------------------------------------------------- */
.article { color: #374151; font-size: 1.075rem; }
.article > p:first-of-type { font-size: 1.2rem; line-height: 1.7; color: #4b5563; }
.article h2 {
  font-size: 1.9rem; font-weight: 800; color: #1A1922; letter-spacing: -0.02em;
  margin-top: 3.25rem; margin-bottom: 1rem; scroll-margin-top: 96px; line-height: 1.2;
}
.article h3 { font-size: 1.2rem; font-weight: 700; color: #21202E; margin-top: 2rem; margin-bottom: .5rem; }
.article p { margin: 1.15rem 0; line-height: 1.8; }
.article ul, .article ol { margin: 1.15rem 0; padding-left: 1.35rem; }
.article ul { list-style: disc; } .article ol { list-style: decimal; }
.article li { margin: .55rem 0; line-height: 1.7; padding-left: .25rem; }
.article li::marker { color: var(--leafdark); font-weight: 700; }
.article strong { color: #1A1922; font-weight: 700; }
.article a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
.article a:hover { color: var(--violet); }
.article hr { margin: 3rem 0; border: 0; border-top: 1px solid #e5e7eb; }
.article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  background: #f4f4f5; color: var(--cherry); padding: .12em .42em; border-radius: .35em;
}
.article blockquote { border-left: 3px solid var(--leaf); padding: .25rem 0 .25rem 1.1rem; margin: 1.75rem 0; color: #4b5563; font-style: italic; }

/* Callout used for the "why this matters" / key blocks */
.article .callout {
  background: linear-gradient(180deg, rgba(159,215,134,0.10), rgba(99,102,241,0.06));
  border: 1px solid rgba(159,215,134,0.35); border-radius: 1rem; padding: 1.25rem 1.5rem; margin: 2rem 0;
}
.article .callout p { margin: 0; }
.article .callout.cherry { background: linear-gradient(180deg, rgba(229,72,77,0.09), rgba(229,72,77,0.03)); border-color: rgba(229,72,77,0.3); }

/* ---- Reduced motion: strip everything ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .orb-anim, .text-shimmer, .floaty, .scroll-cue::after, .marquee__track { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  html { scroll-behavior: auto; }
}