/* ============================================================
   NetCloud Global Services — motion layer
   Loaded after site.css. Purely additive: remove this file and the
   site still looks and works correctly, just without the movement.

   Every effect is opacity/transform only (compositor-friendly) and
   every one of them is switched off under prefers-reduced-motion.
   ============================================================ */

:root {
  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:    .22s;
  --dur:         .5s;
  --dur-slow:    .8s;
}

/* ---------- 1. scroll progress ---------- */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 200;
  pointer-events: none; background: transparent;
}
.scroll-progress i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan) 60%, var(--amber));
  box-shadow: 0 0 12px -2px var(--cyan);
}

/* ---------- 2. scroll reveal ---------- */
.motion .reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 60ms);
  will-change: opacity, transform;
}
.motion .reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* Cards get a touch of scale so a grid feels like it assembles */
.motion .card.reveal,
.motion .post-card.reveal,
.motion .prod.reveal {
  transform: translate3d(0, 22px, 0) scale(.985);
}
.motion .card.reveal.is-in,
.motion .post-card.reveal.is-in,
.motion .prod.reveal.is-in { transform: none; }

/* ---------- 3. hero ---------- */
.hero { position: relative; overflow: hidden; }

.hero .hero-grid-bg,
.hero .hero-rack { will-change: transform; }

/* An aurora that drifts behind the hero copy. */
.motion .hero::before {
  content: "";
  position: absolute; inset: -30% -10% auto -10%; height: 130%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 55% at 18% 28%, rgba(36,211,238,.20), transparent 62%),
    radial-gradient(38% 50% at 82% 18%, rgba(255,180,84,.14), transparent 60%),
    radial-gradient(46% 60% at 60% 88%, rgba(8,145,178,.20), transparent 64%);
  filter: blur(28px);
  animation: aurora 22s var(--ease-out) infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(-2%, 0, 0) scale(1);    opacity: .85; }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.06); opacity: 1; }
  100% { transform: translate3d(-1%, 2%, 0) scale(1.02); opacity: .9; }
}

/* Cursor spotlight. */
.motion .hero.has-spot::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 35%),
    rgba(36,211,238,.13), transparent 68%);
  transition: background .16s linear;
}
.hero > * { position: relative; z-index: 1; }

/* Hero copy lifts in on load, line by line. */
@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: none; }
}
.motion .hero-copy > * {
  animation: riseIn .7s var(--ease-out) both;
}
.motion .hero-copy > .eyebrow  { animation-delay: .04s; }
.motion .hero-copy > h1        { animation-delay: .12s; }
.motion .hero-copy > .lede     { animation-delay: .22s; }
.motion .hero-copy > .hero-cta { animation-delay: .32s; }
.motion .hero-copy > .hero-stats { animation-delay: .42s; }

.motion .hero-rack { animation: riseIn .9s var(--ease-out) .2s both; }

/* A slow shimmer across the h1 — subtle, not a rainbow. */
.motion .hero-copy h1 {
  background: linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 38%,
    var(--ink-4) 50%,
    var(--ink) 62%, var(--ink) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: riseIn .7s var(--ease-out) .12s both, sheen 9s linear 1.4s infinite;
}
@keyframes sheen {
  0%, 62% { background-position: 130% 0; }
  100%    { background-position: -30% 0; }
}

/* ---------- 4. header ---------- */
.hdr {
  transition: transform .35s var(--ease-out),
              background .3s var(--ease-out),
              box-shadow .3s var(--ease-out),
              backdrop-filter .3s var(--ease-out);
}
.motion .hdr.tucked { transform: translate3d(0, -110%, 0); }
.hdr.scrolled {
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}

/* Nav: sliding ink underline. */
.nav ul { position: relative; }
.nav-ink {
  position: absolute; bottom: -2px; left: 0; height: 2px; width: 0; opacity: 0;
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));
  border-radius: 2px; pointer-events: none;
  transition: transform .32s var(--ease-spring), width .32s var(--ease-spring), opacity .2s;
}
.nav ul a { position: relative; }
.nav ul a > span { display: inline-block; transition: transform .22s var(--ease-out); }
.motion .nav ul a:hover > span { transform: translateY(-1px); }

/* ---------- 5. buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  transform: translate3d(var(--mag-x, 0), var(--mag-y, 0), 0);
  transition: transform .28s var(--ease-spring), background .2s var(--ease-out),
              border-color .2s var(--ease-out), color .2s var(--ease-out),
              box-shadow .25s var(--ease-out);
}
.motion .btn-solid::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease-out);
}
.motion .btn-solid:hover::before { transform: translateX(120%); }
.btn:active { transform: translate3d(var(--mag-x, 0), var(--mag-y, 0), 0) scale(.97); }

.btn.is-busy { pointer-events: none; opacity: .8; }
.btn.is-busy::after {
  content: ""; width: 14px; height: 14px; margin-left: 4px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 6. cards: tilt + sheen ---------- */
.tiltable {
  transform-style: preserve-3d;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.motion .tiltable:hover {
  transform: perspective(900px)
             rotateX(var(--tilt-x, 0deg))
             rotateY(var(--tilt-y, 0deg))
             translate3d(0, -4px, 0);
  box-shadow: var(--shadow);
}
.motion .tiltable::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .3s var(--ease-out);
  background: radial-gradient(220px circle at var(--sheen-x, 50%) var(--sheen-y, 50%),
              rgba(36,211,238,.10), transparent 70%);
}
.motion .tiltable:hover::after { opacity: 1; }
.card, .post-card, .prod { position: relative; }

/* ---------- 7. section headings draw their own rule ---------- */
.eyebrow::before { transition: width .55s var(--ease-out); }
.motion .eyebrow { --rule: 24px; }
.motion .eyebrow:not(.drawn)::before { width: 0; }
.motion .eyebrow.drawn::before { width: 24px; }

/* ---------- 8. the rack keeps breathing ---------- */
.motion .rack-u .led { animation: led 2.6s ease-in-out var(--d, 0s) infinite; }
@keyframes led {
  0%, 100% { opacity: .35; }
  45%      { opacity: 1; }
}
.motion .rack-bars i { animation: bar 3.4s ease-in-out var(--d, 0s) infinite; }
@keyframes bar {
  0%, 100% { transform: scaleY(.4); }
  30%      { transform: scaleY(1); }
  60%      { transform: scaleY(.65); }
}
.motion .pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: .35; }
}

/* ---------- 9. view transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vtOut .22s var(--ease-out) both; }
  ::view-transition-new(root) { animation: vtIn  .34s var(--ease-out) both; }
}
@keyframes vtOut { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn  { from { opacity: 0; transform: translateY(10px); } }

/* ============================================================
   Chat widget — the modern pass
   ============================================================ */

/* Launcher */
.nc-launch { position: relative; }
.nc-launch .nc-launch-ring {
  position: absolute; inset: -4px; border-radius: inherit; pointer-events: none;
  border: 1.5px solid var(--cyan); opacity: 0;
}
.motion .nc-launch.online .nc-launch-ring { animation: launchRing 2.8s var(--ease-out) infinite; }
@keyframes launchRing {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.22); }
  100% { opacity: 0;   transform: scale(1.22); }
}

.nc-unread {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff;
  font: 600 11px/20px var(--font-body); text-align: center;
  box-shadow: 0 0 0 2px var(--paper);
}
.motion .nc-launch.has-unread .nc-unread { animation: pop .34s var(--ease-spring) both; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

/* An unanswered agent reply makes the launcher nudge, twice, then stop. */
.motion .nc-launch.nc-attention { animation: nudge 1s var(--ease-out) 2; }
@keyframes nudge {
  0%, 100%  { transform: translateY(0) rotate(0); }
  15%       { transform: translateY(-5px) rotate(-4deg); }
  30%       { transform: translateY(0) rotate(3deg); }
  45%       { transform: translateY(-3px) rotate(-2deg); }
  60%       { transform: translateY(0) rotate(0); }
}

/* Panel open/close */
.nc-panel {
  transform-origin: bottom right;
  opacity: 0; transform: translate3d(0, 14px, 0) scale(.96);
  transition: opacity .22s var(--ease-out), transform .28s var(--ease-spring);
}
.nc-panel.is-open { opacity: 1; transform: none; }
.no-motion .nc-panel { opacity: 1; transform: none; transition: none; }

.nc-head-act { display: flex; align-items: center; gap: 2px; }
.nc-mute {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; color: inherit; opacity: .7;
  transition: opacity .2s, background .2s;
}
.nc-mute:hover { opacity: 1; background: rgba(255,255,255,.10); }
.nc-mute .ico-off { display: none; }
.nc-mute.off .ico-on { display: none; }
.nc-mute.off .ico-off { display: block; }

/* Messages spring in from the correct side */
.nc-msg { transition: opacity .26s var(--ease-out), transform .3s var(--ease-spring); }
.nc-msg.nc-enter { opacity: 0; transform: translate3d(0, 10px, 0) scale(.97); }
.nc-msg.visitor.nc-enter { transform: translate3d(8px, 8px, 0) scale(.97); }
.nc-msg.agent.nc-enter,
.nc-msg.bot.nc-enter     { transform: translate3d(-8px, 8px, 0) scale(.97); }

/* Quick replies cascade */
.motion .nc-quick button {
  animation: riseIn .34s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* Presence dot */
#ncPresence .dot { transition: background .3s, box-shadow .3s; }
.motion #ncPresence.on .dot { animation: pulseDot 2.2s ease-in-out infinite; }
.motion #ncPresence.seeking .dot { animation: pulseDot .9s ease-in-out infinite; }
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.55); }
  70%      { box-shadow: 0 0 0 6px rgba(22,163,74,0); }
}

/* Typing dots */
.motion .nc-typing i { animation: typing 1.25s ease-in-out infinite; }
.motion .nc-typing i:nth-child(2) { animation-delay: .16s; }
.motion .nc-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* Send button wakes up when there is something to send */
.nc-send { transition: transform .24s var(--ease-spring), opacity .2s, background .2s; opacity: .5; }
.nc-send.ready { opacity: 1; }
.motion .nc-send.ready:hover { transform: scale(1.08) rotate(6deg); }

/* Honeypot + optional label, kept out of the markup */
.nc-hp { position: absolute; left: -9999px; }
.nc-gate .opt { color: var(--text-mut); font-weight: 400; }
.nc-gate input.bad { border-color: var(--bad); }

/* ---------- reduced motion: switch it all off ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero::before, .hero::after { display: none; }
  .hero-copy h1 {
    -webkit-text-fill-color: var(--ink); color: var(--ink); background: none;
  }
}

/* If JS never runs, nothing may stay hidden. */
html:not(.js) .reveal { opacity: 1; transform: none; }