/* Visual polish layer (2026-10-28): ambient hero light, gradient headline, glass + spotlight cards, button feedback,
   scroll progress, animated process line, connected-systems diagram, smoother portfolio/builder transitions.
   Purely presentational: remove this file and fx.js (plus the fx-* hooks in index.html) to roll back.
   Every animation is transform/opacity only, paused off-screen, and switched off by prefers-reduced-motion (see end). */
:root { --fx-ease: cubic-bezier(.2, .7, .2, 1); --fx-glow: rgba(22,119,255, .18); }

/* ---------- scroll progress (top of the sticky nav) ---------- */
.fx-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(var(--fx-p, 0));
  background: linear-gradient(90deg, var(--cobalt), var(--blue-tint)); pointer-events: none; }
.topnav { position: sticky; }
.nav-links a { transition: color .2s ease, background-color .2s ease; }
.brand-logo:not(:has(img)) { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 6px 18px rgba(22,119,255,.3); }

/* ---------- hero: ambient aurora + faint grid, glass eyebrow, gradient headline, entrance ---------- */
#portfolio { position: relative; isolation: isolate; overflow: hidden; }
.fx-aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fx-aurora i { position: absolute; width: 46vw; max-width: 640px; aspect-ratio: 1; border-radius: 50%; opacity: .45; }  /* static: animated drift measured as a scroll-frame cost */
.fx-aurora i:nth-child(1) { top: -28%; right: -6%; background: radial-gradient(circle, rgba(22,119,255,.45), transparent 65%); }
.fx-aurora i:nth-child(2) { top: -18%; left: -12%; background: radial-gradient(circle, rgba(120,190,255,.25), transparent 65%); }
.fx-aurora i:nth-child(3) { top: 30%; left: 35%; width: 30vw; background: radial-gradient(circle, rgba(22,119,255,.16), transparent 65%); }
.fx-aurora::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(120,190,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(120,190,255,.05) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); }

.pf-head .kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.78);
  border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(16,19,24,.06); }
.fx-grad { background: linear-gradient(120deg, #0B5CD6 0%, var(--cobalt) 50%, #0E9AD0 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fx-enter > * { animation: fxUp .7s var(--fx-ease) backwards; }
.fx-enter > :nth-child(2) { animation-delay: .08s; } .fx-enter > :nth-child(3) { animation-delay: .16s; } .fx-enter > :nth-child(4) { animation-delay: .24s; }
@keyframes fxUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pf-stats > div { transition: transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease); }
.pf-stats > div:hover { transform: translateY(-2px); }

/* ---------- section headings: kicker accent line grows in with the reveal ---------- */
.sec-head .kicker { position: relative; }
.reveal-on .sec-head.reveal .kicker::after { content: ""; display: block; width: 36px; height: 2px; margin-top: 6px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--fx-ease) .15s; }
.reveal-on .sec-head.reveal.in .kicker::after { transform: scaleX(1); }
.sec-head h2 { letter-spacing: -.02em; }

/* ---------- cards: glass edge, hover lift, pointer spotlight (fine pointers only, set by fx.js) ---------- */
.why, .plat, .ind, .card, .pf-card, .sb-col, .step { transition: transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease), border-color .3s ease; }
.fx-spot { background-image: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), var(--fx-glow), transparent 45%); }
.sec-dark .fx-spot, .pc .fx-spot { --fx-glow: rgba(120,190,255, .14); }
.why:hover, .ind:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px rgba(16,19,24,.10); border-color: rgba(22,119,255,.35); }
.plat { box-shadow: 0 1px 0 rgba(255,255,255,.08) inset; }
.plat:hover { transform: translateY(-3px); border-color: rgba(120,190,255,.45); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 18px 40px rgba(0,0,0,.35); }
.card:hover { border-color: rgba(22,119,255,.35); }
.card .thumb img.shot, .pf-card .frame img { transition: transform .5s var(--fx-ease); }
.card:hover .thumb img.shot, .pf-card:hover .frame img { transform: scale(1.035); }
.pf-item { transition: background-color .2s ease, transform .2s var(--fx-ease), box-shadow .2s ease; }
.pf-item:hover { transform: translateX(2px); }

/* ---------- buttons: lift, light sweep, clear focus ---------- */
.btn, .launch, .nav-cta, .tile-preview { position: relative; overflow: hidden; transition: transform .2s var(--fx-ease), filter .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.btn:hover, .launch:not([aria-disabled]):hover, .nav-links .nav-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn:active, .launch:active { transform: translateY(0) scale(.98); }
.btn-dark::after, .launch:not([aria-disabled])::after, .nav-links .nav-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); }
.btn-dark:hover::after, .launch:not([aria-disabled]):hover::after, .nav-links .nav-cta:hover::after { transform: translateX(120%); transition: transform .7s var(--fx-ease); }
.btn-dark:hover { box-shadow: 0 10px 24px rgba(22,119,255,.35); }
:is(.btn, .launch, .chip, .pf-item, .nav-links a, .pc-card, .tile-preview, select, input):focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }

/* ---------- process: connecting line draws step by step when the list scrolls in ---------- */
.reveal-on .steps .step::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--fx-ease); }
.reveal-on .steps.fx-in .step::after { transform: scaleX(1); }
.reveal-on .steps.fx-in .step:nth-child(2)::after { transition-delay: .12s; } .reveal-on .steps.fx-in .step:nth-child(3)::after { transition-delay: .24s; }
.reveal-on .steps.fx-in .step:nth-child(4)::after { transition-delay: .36s; } .reveal-on .steps.fx-in .step:nth-child(5)::after { transition-delay: .48s; }
.reveal-on .steps.fx-in .step:nth-child(6)::after { transition-delay: .6s; }
.step::before { transition: transform .3s var(--fx-ease), box-shadow .3s ease; }
.step:hover::before { transform: scale(1.08); box-shadow: 0 8px 20px rgba(22,119,255,.4); }
@media (max-width: 1000px) { .reveal-on .steps .step::after { transform: scaleY(0); transform-origin: 50% 0; } .reveal-on .steps.fx-in .step::after { transform: scaleY(1); } }

/* ---------- connected-systems diagram (platforms section) ---------- */
.fx-sys { position: relative; height: 360px; margin: 6px 0 26px; border-radius: 22px; border: 1px solid rgba(255,255,255,.1);
  background: radial-gradient(520px 260px at 50% 50%, rgba(22,119,255,.14), transparent 70%), rgba(16,19,24,.5); overflow: hidden; }
.fx-sys::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; }
.fx-sys svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-sys .ln { fill: none; stroke: rgba(120,190,255,.22); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fx-sys .pk { fill: none; stroke: var(--blue-tint); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 5 95; stroke-dashoffset: 100;
  animation: fxPacket 3.2s linear infinite; animation-play-state: paused; }
.fx-sys .pk:nth-of-type(2n) { animation-duration: 3.8s; animation-delay: -1.1s; stroke: var(--cloud); } .fx-sys .pk:nth-of-type(3n) { animation-duration: 4.4s; animation-delay: -2.3s; }
@keyframes fxPacket { to { stroke-dashoffset: 0; } }
.fx-node { position: absolute; transform: translate(-50%, -50%); width: 190px; padding: 11px 13px; border-radius: 14px; color: #e2e8f0;
  background: rgba(22,27,35,.94); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.fx-node strong { display: block; color: #fff; font-size: 14px; } .fx-node small { display: block; color: #94a3b8; font-size: 12px; line-height: 1.35; }
.fx-node .st { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6);
  animation: fxPing 2.4s ease-out infinite; animation-play-state: paused; }
.fx-node .st.sim { background: var(--blue-tint); box-shadow: 0 0 0 0 rgba(120,190,255,.6); }
@keyframes fxPing { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } }
.fx-core { width: 210px; text-align: center; padding: 16px; border-color: rgba(120,190,255,.5);
  background: linear-gradient(160deg, #0B4FB8, var(--obsidian)); box-shadow: 0 0 0 1px rgba(120,190,255,.15), 0 0 40px rgba(22,119,255,.35); }
.fx-core strong { font-size: 16px; }
.fx-core::before { content: ""; position: absolute; inset: -12px; border-radius: 20px; border: 1px solid rgba(120,190,255,.35); animation: fxHalo 3.6s ease-out infinite; animation-play-state: paused; pointer-events: none; }
@keyframes fxHalo { from { transform: scale(.94); opacity: .9; } to { transform: scale(1.12); opacity: 0; } }
.fx-sys.fx-live .pk, .fx-sys.fx-live .st, .fx-sys.fx-live .fx-core::before { animation-play-state: running; }
.fx-sys-legend { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; bottom: 12px; margin: 0; font-size: 12px; color: #94a3b8; }
.fx-sys-legend b { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 10px; background: #22c55e; } .fx-sys-legend b.sim { background: var(--blue-tint); }
@media (max-width: 900px) {
  .fx-sys { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 14px 36px; }
  .fx-sys svg { display: none; }
  .fx-sys-legend { position: static; transform: none; white-space: normal; grid-column: 1 / -1; }
  .fx-node { position: relative; transform: none; left: auto !important; top: auto !important; width: auto; }
  .fx-core { grid-column: 1 / -1; order: -1; }
}

/* ---------- portfolio + showroom: content swaps fade/slide in instead of popping ---------- */
.pf-detail .pf-card, .sr-featured .pf-card, .pv .pf-card { animation: fxSwap .38s var(--fx-ease) backwards; }
@keyframes fxSwap { from { opacity: 0; } to { opacity: 1; } }  /* fade only: layout and measured positions never move */
#grid .card { animation: fxSwap .35s var(--fx-ease) backwards; }
.chip, .seg button { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; }
.chip:active, .seg button:active { transform: scale(.96); }

/* ---------- solution builder: rows assemble one by one, coverage meter ---------- */
.sb-rows li { animation: fxUp .4s var(--fx-ease) backwards; }
.sb-rows li:nth-child(2) { animation-delay: .05s; } .sb-rows li:nth-child(3) { animation-delay: .1s; } .sb-rows li:nth-child(4) { animation-delay: .15s; }
.sb-rows li:nth-child(5) { animation-delay: .2s; } .sb-rows li:nth-child(6) { animation-delay: .25s; } .sb-rows li:nth-child(n+7) { animation-delay: .3s; }
.sb-out { transition: border-color .3s ease, box-shadow .3s ease; }
.sb-out:has(.sb-result) { border-style: solid; border-color: rgba(120,190,255,.4); box-shadow: 0 18px 44px rgba(0,0,0,.3); }
.sb-caps label { transition: background-color .2s ease, border-color .2s ease; border-radius: 10px; }
.sb-caps label:has(input:checked) { background: var(--cobalt-soft); }
.fx-meter { margin: 12px 0 2px; } .fx-meter-bar { height: 8px; border-radius: 999px; background: rgba(120,190,255,.16); overflow: hidden; }
.fx-meter-bar span { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--cobalt), var(--blue-tint)); transition: width .8s var(--fx-ease); }
.fx-meter p { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }

/* ---------- reduced motion + print: everything static and visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-aurora i, .fx-grad, .fx-enter > *, .fx-sys .pk, .fx-node .st, .fx-core::before, .pf-card, #grid .card, .sb-rows li { animation: none !important; }
  .fx-sys .pk { stroke-dasharray: none; opacity: .35; }
  .reveal-on .steps .step::after { transform: none !important; }
  .fx-progress { display: none; }
}
@media print { .fx-aurora, .fx-progress, .fx-sys svg { display: none; } }