/* ============================================================
   FOXIFY EXPERIENCE LAYER — fx.css
   Custom cursor, grain, spotlight, ghost numbers, SVG graphics,
   process progress, marquee v2, chat widget, magnetic buttons
   ============================================================ */

/* ---------- selection ---------- */
::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- film grain ---------- */
.fx-grain {
  position: fixed; inset: -100px; z-index: 350; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: no-preference) {
  .fx-grain { animation: fxGrain 0.6s steps(3) infinite; }
}
@keyframes fxGrain {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-40px, 28px); }
  66% { transform: translate(32px, -36px); }
  100% { transform: translate(0, 0); }
}

/* ---------- custom cursor ---------- */
.fx-hidecursor, .fx-hidecursor * { cursor: none !important; }
.fx-hidecursor input, .fx-hidecursor textarea { cursor: text !important; }
.fx-hidecursor select { cursor: none !important; }
.fx-cursor-dot {
  position: fixed; top: 0; left: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); z-index: 420; pointer-events: none;
  translate: -50% -50%;
}
.fx-cursor-ring {
  position: fixed; top: 0; left: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--accent) 65%, transparent);
  z-index: 410; pointer-events: none;
  translate: -50% -50%;
  transition: width .25s ease, height .25s ease, border-color .25s ease, opacity .25s ease;
}
.fx-cursor-ring.is-hover { width: 56px; height: 56px; border-color: var(--accent); }
.fx-cursor-ring.is-down { width: 24px; height: 24px; }

/* ---------- spotlight ---------- */
.fx-spot {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(640px circle at var(--mx, 50%) var(--my, 35%),
    color-mix(in oklab, var(--accent) 7%, transparent), transparent 65%);
}

/* ---------- ghost section numbers ---------- */
.fx-ghost {
  position: absolute; top: 4%; right: -1%;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(180px, 26vw, 400px); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--fg) 11%, transparent);
  pointer-events: none; z-index: 0; user-select: none;
}
.section .wrap { position: relative; z-index: 1; }

/* ---------- hero line reveal ---------- */
.hero h1.fx-lines { animation: none !important; opacity: 1 !important; }
.hero h1 .hl { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero h1 .hl-i { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .hl-i { transform: translateY(115%); animation: fxHlUp 1.1s cubic-bezier(.16,1,.3,1) var(--d, 0.15s) forwards; }
}
@keyframes fxHlUp { to { transform: translateY(0); } }

/* ---------- magnetic buttons + shine ---------- */
.btn { position: relative; overflow: hidden; }
.btn-primary::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%;
  left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: none;
}
.btn-primary:hover::before { animation: fxShine .7s ease; }
@keyframes fxShine { to { left: 130%; } }

/* ---------- service graphics ---------- */
@media (min-width: 1001px) {
  .service { grid-template-columns: 60px 1fr 130px auto !important; }
}
.svc-fx { width: 120px; height: 84px; color: var(--fg-dim); align-self: center; }
.svc-fx svg { width: 100%; height: 100%; display: block; }
.svc-fx .ac { color: var(--accent); }
@media (max-width: 1000px) { .svc-fx { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .svc-sweep { animation: fxSpin 4.5s linear infinite; transform-origin: 60px 42px; }
  .svc-blink { animation: fxBlink 2.2s ease infinite; }
  .svc-blink2 { animation: fxBlink 2.2s ease 0.7s infinite; }
  .svc-blink3 { animation: fxBlink 2.2s ease 1.4s infinite; }
  .svc-dash { stroke-dasharray: 5 5; animation: fxDash 1.4s linear infinite; }
  .svc-pulse { animation: fxPulse 2s ease infinite; transform-origin: center; transform-box: fill-box; }
}
@keyframes fxSpin { to { transform: rotate(360deg); } }
@keyframes fxBlink { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }
@keyframes fxDash { to { stroke-dashoffset: -20; } }
@keyframes fxPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } }

/* ---------- case mini-charts ---------- */
.case-chart { height: 86px; margin-top: 6px; }
.case-chart svg { height: 100%; width: auto; display: block; overflow: visible; }
.case-chart .bar { transform: scaleY(0); transform-origin: bottom; transition: transform 1s cubic-bezier(.16,1,.3,1); transform-box: fill-box; }
.case.in .case-chart .bar { transform: scaleY(1); }
.case.in .case-chart .bar.b2 { transition-delay: .15s; }
.case.in .case-chart .bar.b3 { transition-delay: .3s; }
.case.in .case-chart .bar.b4 { transition-delay: .45s; }
.case.in .case-chart .bar.b5 { transition-delay: .6s; }
.case.in .case-chart .bar.b6 { transition-delay: .75s; }
.case-chart .donut-arc { transition: stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1) .2s; }

/* ---------- process progress bar ---------- */
.fx-procbar { position: relative; height: 2px; background: var(--line); margin-bottom: 0; }
.fx-procbar-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--accent); box-shadow: 0 0 10px var(--accent); transition: width .15s linear; }
.fx-procbar .pdot {
  position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  translate: -50% -50%; background: var(--bg-3); border: 1px solid var(--line-strong);
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.fx-procbar .pdot.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px var(--accent); }
.step { transition: opacity .5s ease; }
.step:not(.on) { opacity: 0.45; }
.step.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .step:not(.on) { opacity: 1; } }

/* ---------- marquee v2 ---------- */
.marquee:has(+ .marquee.m2) { border-bottom: 0; padding-bottom: 10px; }
.marquee.m2 { border-top: 0; padding-top: 10px; }
.marquee.m2 .marquee-track { animation-direction: reverse; animation-duration: 75s; }
.marquee.m2 .marquee-track span:not(.mdot) {
  color: transparent;
  -webkit-text-stroke: 1px var(--fg-dim);
}

/* ---------- footer giant ticker ---------- */
.fx-foottext {
  overflow: hidden; white-space: nowrap; pointer-events: none;
  margin-bottom: 64px; user-select: none;
}
.fx-foottext-inner {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(64px, 9vw, 140px); line-height: 1; letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--fg) 16%, transparent);
}
.fx-foottext-inner .acfill { color: var(--accent); -webkit-text-stroke: 0; font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
@media (prefers-reduced-motion: no-preference) {
  .fx-foottext-inner { animation: fxTicker 50s linear infinite; }
}
@keyframes fxTicker { to { transform: translateX(-50%); } }

/* ---------- chat widget ---------- */
.fxchat-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 250;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line-strong);
  color: var(--fg); font-family: 'Space Grotesk', sans-serif; font-size: 13.5px; font-weight: 500;
  cursor: pointer; box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s, background .25s;
}
.fxchat-btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.fxchat-btn .cdot { width: 8px; height: 8px; border-radius: 50%; background: #6fd97a; position: relative; flex: 0 0 auto; }
.fxchat-btn .cdot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #6fd97a; animation: fxChatPulse 1.8s infinite; }
@keyframes fxChatPulse { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.fxchat-btn.hidden { display: none; }

.fxchat {
  position: fixed; bottom: 24px; right: 24px; z-index: 260;
  width: min(380px, calc(100vw - 32px));
  background: var(--bg-2); border: 1px solid var(--line-strong);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  display: none; flex-direction: column;
  font-family: 'Space Grotesk', sans-serif;
}
.fxchat.open { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .fxchat.open { animation: fxChatIn .4s cubic-bezier(.16,1,.3,1); }
}
@keyframes fxChatIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }

.fxchat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: var(--bg-3);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.fxchat-head .hdot { width: 7px; height: 7px; border-radius: 50%; background: #6fd97a; flex: 0 0 auto; }
.fxchat-head .x {
  margin-left: auto; cursor: pointer; color: var(--fg); font-size: 18px; line-height: 1;
  padding: 2px 6px; border-radius: 6px; transition: background .2s;
}
.fxchat-head .x:hover { background: var(--bg); }

.fxchat-msgs {
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  max-height: 380px; overflow-y: auto; min-height: 220px;
}
.fxchat-msg {
  max-width: 85%; padding: 10px 14px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.5;
}
.fxchat-msg.agent { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); align-self: flex-start; border-bottom-left-radius: 4px; }
.fxchat-msg.user { background: var(--accent); color: var(--accent-ink); align-self: flex-end; border-bottom-right-radius: 4px; }
.fxchat-typing { display: inline-flex; gap: 5px; padding: 12px 14px; }
.fxchat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-muted); animation: fxTypeDot 1.2s ease infinite; }
.fxchat-typing i:nth-child(2) { animation-delay: 0.18s; }
.fxchat-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes fxTypeDot { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.fxchat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
.fxchat-chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--fg); font-size: 12.5px; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  transition: border-color .2s, background .2s, color .2s;
}
.fxchat-chip:hover { border-color: var(--accent); color: var(--accent); }

/* mobile: chat above content */
@media (max-width: 600px) {
  .fxchat { bottom: 16px; right: 16px; }
  .fxchat-btn { bottom: 16px; right: 16px; }
}

/* keep tweaks panel clear of the chat button */
.tweaks { bottom: 92px !important; }