/* ==========================================================================
   Nextrobic — dev & cloud animation layer  (v7.0)
   Everything in this file is decorative motion built around the DevOps /
   cloud story: live deploy terminal, CI/CD packet flow, cloud topology,
   Kubernetes autoscaling, uptime pulse, data streams, scroll progress.

   Rules kept throughout:
     - light theme, brand navy #0B1E4C / blue #2F7BF6 / green #22B14C
     - GPU-friendly properties only (transform / opacity)
     - every animation is disabled under prefers-reduced-motion
   ========================================================================== */

:root {
    --nx-navy: #0b1e4c;
    --nx-navy-2: #17399b;
    --nx-blue: #2f7bf6;
    --nx-green: #22b14c;
    --nx-code-bg: #0a1226;
}

/* --------------------------------------------------------------------------
   0. Scroll progress bar — thin brand line across the top of the viewport
   -------------------------------------------------------------------------- */
.scrollbeam {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--nx-blue), #00b7d4 45%, var(--nx-green));
    z-index: 999;
    pointer-events: none;
    will-change: transform;
}

/* --------------------------------------------------------------------------
   1. Section shell used by every animation band
   -------------------------------------------------------------------------- */
.animband {
    position: relative;
    border-radius: var(--r-lg, 24px);
    overflow: hidden;
    background: linear-gradient(160deg, #f7faff 0%, #eef4fd 55%, #e8f1ff 100%);
    border: 1px solid rgba(47, 123, 246, .16);
    box-shadow: 0 30px 60px -40px rgba(11, 30, 76, .35);
}
.animband--dark {
    background: radial-gradient(120% 140% at 20% 0%, #14295e 0%, #0a1226 60%, #070d1c 100%);
    border-color: rgba(120, 170, 255, .18);
    color: #e7eeff;
}
.animband--dark h2,
.animband--dark h3 { color: #fff; }
.animband--dark p { color: #a9bbdd; }
.animband__inner { position: relative; z-index: 2; padding: clamp(24px, 4vw, 46px); }

/* Moving blueprint grid behind a band */
.animband__grid {
    position: absolute;
    inset: -40% -10%;
    background-image:
        linear-gradient(rgba(47, 123, 246, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 123, 246, .10) 1px, transparent 1px);
    background-size: 46px 46px;
    animation: nx-grid-drift 26s linear infinite;
    pointer-events: none;
    z-index: 0;
}
.animband--dark .animband__grid {
    background-image:
        linear-gradient(rgba(120, 170, 255, .11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 170, 255, .11) 1px, transparent 1px);
}
@keyframes nx-grid-drift {
    to { transform: translate3d(46px, 46px, 0); }
}

/* Aurora blobs */
.animband__aura {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.animband__aura::before,
.animband__aura::after {
    content: "";
    position: absolute;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
}
.animband__aura::before {
    top: -18%; left: -8%;
    background: radial-gradient(circle, rgba(47, 123, 246, .55), transparent 68%);
    animation: nx-aura-a 19s ease-in-out infinite;
}
.animband__aura::after {
    bottom: -22%; right: -6%;
    background: radial-gradient(circle, rgba(34, 177, 76, .42), transparent 68%);
    animation: nx-aura-b 23s ease-in-out infinite;
}
@keyframes nx-aura-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(16%, 14%) scale(1.18); }
}
@keyframes nx-aura-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-14%, -12%) scale(1.12); }
}

/* --------------------------------------------------------------------------
   2. Live deploy terminal
   -------------------------------------------------------------------------- */
.term {
    background: var(--nx-code-bg);
    border-radius: 18px;
    border: 1px solid rgba(120, 170, 255, .22);
    overflow: hidden;
    box-shadow: 0 40px 80px -44px rgba(6, 14, 36, .9);
    font-family: var(--mono, monospace);
    position: relative;
}
.term__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    background: rgba(255, 255, 255, .05);
    border-bottom: 1px solid rgba(120, 170, 255, .16);
}
.term__dot { width: 11px; height: 11px; border-radius: 50%; display: block; }
.term__dot--r { background: #ff5f56; }
.term__dot--y { background: #ffbd2e; }
.term__dot--g { background: #27c93f; }
.term__title {
    margin-left: 10px;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7d92c4;
}
.term__body {
    padding: 18px 18px 22px;
    font-size: .82rem;
    line-height: 1.85;
    color: #cfe0ff;
    min-height: 268px;
    white-space: pre-wrap;
    word-break: break-word;
}
.term__line { display: block; opacity: 0; animation: nx-line-in .35s ease forwards; }
@keyframes nx-line-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.term__ok   { color: #48d97b; }
.term__warn { color: #ffc65c; }
.term__key  { color: #6fb0ff; }
.term__dim  { color: #6b7ea8; }
.term__cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    vertical-align: -2px;
    background: #48d97b;
    animation: nx-blink 1s steps(1) infinite;
}
@keyframes nx-blink { 50% { opacity: 0; } }

/* --------------------------------------------------------------------------
   3. CI/CD pipeline with a travelling build packet
   -------------------------------------------------------------------------- */
.cicd {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    padding: 26px 18px 30px;
}
.cicd__rail {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 52px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(47, 123, 246, .18), rgba(34, 177, 76, .22));
    overflow: hidden;
}
.cicd__rail::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(47, 123, 246, .95), transparent);
    width: 26%;
    animation: nx-rail 4.4s linear infinite;
}
@keyframes nx-rail {
    from { transform: translateX(-40%); }
    to   { transform: translateX(420%); }
}
.cicd__packet {
    position: absolute;
    top: 40px;
    left: 6%;
    width: 28px; height: 28px;
    margin-left: -14px;
    border-radius: 9px;
    background: linear-gradient(140deg, var(--nx-blue), var(--nx-green));
    box-shadow: 0 0 0 6px rgba(47, 123, 246, .14), 0 14px 26px -12px rgba(11, 30, 76, .8);
    animation: nx-packet 8.8s cubic-bezier(.6, .05, .35, .95) infinite;
    z-index: 3;
}
@keyframes nx-packet {
    0%   { left: 6%;  transform: scale(.85); }
    14%  { left: 6%;  transform: scale(1); }
    22%  { left: 24%; }
    36%  { left: 24%; }
    44%  { left: 42%; }
    56%  { left: 42%; }
    64%  { left: 60%; }
    74%  { left: 60%; }
    84%  { left: 78%; }
    92%  { left: 94%; transform: scale(1.12); }
    100% { left: 94%; transform: scale(.85); opacity: .4; }
}
.cicd__stage {
    position: relative;
    z-index: 2;
    text-align: center;
}
.cicd__node {
    width: 52px; height: 52px;
    margin: 0 auto 12px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(47, 123, 246, .28);
    display: grid;
    place-items: center;
    box-shadow: 0 14px 30px -18px rgba(11, 30, 76, .6);
    animation: nx-node-pop 8.8s ease-in-out infinite;
}
.cicd__node img { width: 26px; height: 26px; border-radius: 7px; }
.cicd__stage:nth-child(1) .cicd__node { animation-delay: 0s; }
.cicd__stage:nth-child(2) .cicd__node { animation-delay: 1.5s; }
.cicd__stage:nth-child(3) .cicd__node { animation-delay: 3.0s; }
.cicd__stage:nth-child(4) .cicd__node { animation-delay: 4.5s; }
.cicd__stage:nth-child(5) .cicd__node { animation-delay: 6.0s; }
.cicd__stage:nth-child(6) .cicd__node { animation-delay: 7.4s; }
@keyframes nx-node-pop {
    0%, 8%, 100% { transform: translateY(0) scale(1); border-color: rgba(47, 123, 246, .28); }
    3%           { transform: translateY(-6px) scale(1.1); border-color: var(--nx-green); box-shadow: 0 0 0 8px rgba(34, 177, 76, .12); }
}
.cicd__label {
    font-family: var(--display, sans-serif);
    font-weight: 650;
    font-size: .85rem;
    color: var(--ink, #0a1020);
}
.cicd__meta {
    font-family: var(--mono, monospace);
    font-size: .68rem;
    color: var(--ink-3, #77839a);
}
@media (max-width: 760px) {
    .cicd { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
    .cicd__rail, .cicd__packet { display: none; }
}

/* --------------------------------------------------------------------------
   4. Cloud topology — animated SVG (edges draw, nodes breathe, packets fly)
   -------------------------------------------------------------------------- */
.topo { width: 100%; height: auto; display: block; }
.topo__edge {
    stroke-dasharray: 6 8;
    animation: nx-dash 2.4s linear infinite;
}
@keyframes nx-dash { to { stroke-dashoffset: -56; } }

.topo__pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: nx-breathe 3.4s ease-in-out infinite;
}
.topo__pulse--b { animation-delay: .5s; }
.topo__pulse--c { animation-delay: 1s; }
.topo__pulse--d { animation-delay: 1.5s; }
@keyframes nx-breathe {
    0%, 100% { transform: scale(1); opacity: .95; }
    50%      { transform: scale(1.09); opacity: 1; }
}

.topo__halo {
    transform-box: fill-box;
    transform-origin: center;
    animation: nx-halo 3s ease-out infinite;
}
.topo__halo--b { animation-delay: 1s; }
.topo__halo--c { animation-delay: 2s; }
@keyframes nx-halo {
    0%   { transform: scale(.6); opacity: .55; }
    100% { transform: scale(1.85); opacity: 0; }
}

.topo__bit { offset-rotate: 0deg; animation: nx-bit 3.6s linear infinite; }
.topo__bit--2 { animation-delay: 1.2s; }
.topo__bit--3 { animation-delay: 2.4s; }
@keyframes nx-bit {
    0%   { offset-distance: 0%;   opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}

/* --------------------------------------------------------------------------
   5. Kubernetes autoscaling — pods spawn under load
   -------------------------------------------------------------------------- */
.pods {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 12px;
    padding: 6px 2px 2px;
}
.pod {
    aspect-ratio: 1;
    border-radius: 14px;
    background: linear-gradient(150deg, rgba(47, 123, 246, .14), rgba(34, 177, 76, .12));
    border: 1px solid rgba(47, 123, 246, .3);
    display: grid;
    place-items: center;
    font-family: var(--mono, monospace);
    font-size: .6rem;
    color: #2f5fb0;
    opacity: 0;
    transform: scale(.5);
    animation: nx-pod-up .6s cubic-bezier(.2, .9, .3, 1.3) forwards;
}
.animband--dark .pod { color: #9dc0ff; border-color: rgba(120, 170, 255, .3); }
@keyframes nx-pod-up {
    to { opacity: 1; transform: scale(1); }
}
.pod::after {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--nx-green);
    box-shadow: 0 0 0 0 rgba(34, 177, 76, .6);
    animation: nx-pod-beat 2.2s ease-out infinite;
}
@keyframes nx-pod-beat {
    0%   { box-shadow: 0 0 0 0 rgba(34, 177, 76, .55); }
    70%  { box-shadow: 0 0 0 10px rgba(34, 177, 76, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 177, 76, 0); }
}

/* Load meter driving the pod count */
.loadbar {
    height: 10px;
    border-radius: 10px;
    background: rgba(47, 123, 246, .14);
    overflow: hidden;
    position: relative;
}
.loadbar__fill {
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--nx-blue), var(--nx-green));
    width: 12%;
    transition: width .6s cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   6. Uptime pulse / sparkline
   -------------------------------------------------------------------------- */
.spark { width: 100%; height: 90px; display: block; }
.spark__line {
    fill: none;
    stroke: var(--nx-green);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: nx-draw 3.2s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes nx-draw {
    0%   { stroke-dashoffset: 1400; }
    55%  { stroke-dashoffset: 0; }
    92%  { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
.spark__scan {
    animation: nx-scan 3.2s linear infinite;
}
@keyframes nx-scan {
    from { transform: translateX(0); }
    to   { transform: translateX(520px); }
}

/* --------------------------------------------------------------------------
   7. Falling data streams (matrix-lite, brand coloured)
   -------------------------------------------------------------------------- */
.stream {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    opacity: .5;
}
.stream span {
    position: absolute;
    top: -20%;
    width: 1px;
    height: 26%;
    background: linear-gradient(180deg, transparent, rgba(47, 123, 246, .8), transparent);
    animation: nx-fall 6s linear infinite;
}
.animband--dark .stream span {
    background: linear-gradient(180deg, transparent, rgba(120, 190, 255, .9), transparent);
}
@keyframes nx-fall {
    to { transform: translateY(560%); }
}

/* --------------------------------------------------------------------------
   8. Floating tech chips that drift around a container
   -------------------------------------------------------------------------- */
.chipfield { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.chipfield span {
    position: absolute;
    width: 46px; height: 46px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(47, 123, 246, .2);
    box-shadow: 0 16px 32px -20px rgba(11, 30, 76, .7);
    display: grid;
    place-items: center;
    animation: nx-drift 11s ease-in-out infinite;
}
.chipfield span img { width: 26px; height: 26px; }
.chipfield span:nth-child(1) { top: 8%;  left: 4%;  animation-delay: 0s; }
.chipfield span:nth-child(2) { top: 62%; left: 2%;  animation-delay: -2.6s; }
.chipfield span:nth-child(3) { top: 14%; right: 5%; animation-delay: -5.2s; }
.chipfield span:nth-child(4) { top: 70%; right: 3%; animation-delay: -7.8s; }
@keyframes nx-drift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%      { transform: translate3d(0, -20px, 0) rotate(4deg); }
}

/* --------------------------------------------------------------------------
   9. Code window with a typed Terraform / YAML snippet
   -------------------------------------------------------------------------- */
.codewin {
    background: var(--nx-code-bg);
    border-radius: 18px;
    border: 1px solid rgba(120, 170, 255, .2);
    overflow: hidden;
    box-shadow: 0 40px 80px -46px rgba(6, 14, 36, .9);
}
.codewin__tabs {
    display: flex;
    gap: 4px;
    padding: 10px 12px 0;
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(120, 170, 255, .14);
}
.codewin__tab {
    padding: 8px 14px;
    font-family: var(--mono, monospace);
    font-size: .72rem;
    color: #7d92c4;
    border-radius: 10px 10px 0 0;
    cursor: default;
}
.codewin__tab.is-on { background: rgba(47, 123, 246, .16); color: #cfe0ff; }
.codewin__code {
    margin: 0;
    padding: 18px 20px 22px;
    font-family: var(--mono, monospace);
    font-size: .78rem;
    line-height: 1.75;
    color: #cfe0ff;
    overflow-x: auto;
    min-height: 250px;
}
.tok-k { color: #ff9ad2; }
.tok-s { color: #7ee0a8; }
.tok-n { color: #ffc65c; }
.tok-c { color: #5f7099; font-style: italic; }
.tok-f { color: #6fb0ff; }

/* --------------------------------------------------------------------------
   10. Magnetic buttons + gradient border cards
   -------------------------------------------------------------------------- */
.magnet { transition: transform .22s cubic-bezier(.2, .7, .3, 1); will-change: transform; }

.gradcard {
    position: relative;
    border-radius: var(--r-md, 16px);
    background: #fff;
    z-index: 0;
}
.gradcard::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--nx-angle, 0deg), rgba(47, 123, 246, .0) 0deg, var(--nx-blue) 90deg, var(--nx-green) 180deg, rgba(47, 123, 246, 0) 270deg);
    -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 .3s ease;
    z-index: -1;
}
.gradcard:hover::before { opacity: 1; animation: nx-spin-border 3.4s linear infinite; }
@property --nx-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@keyframes nx-spin-border { to { --nx-angle: 360deg; } }

/* --------------------------------------------------------------------------
   11. Region globe / latency ring
   -------------------------------------------------------------------------- */
.regions { display: flex; flex-wrap: wrap; gap: 10px; }
.region {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(47, 123, 246, .22);
    font-family: var(--mono, monospace);
    font-size: .74rem;
    color: var(--ink-2, #46536b);
}
.region i {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--nx-green);
    animation: nx-pod-beat 2.4s ease-out infinite;
}
.region:nth-child(2) i { animation-delay: .4s; }
.region:nth-child(3) i { animation-delay: .8s; }
.region:nth-child(4) i { animation-delay: 1.2s; }
.region:nth-child(5) i { animation-delay: 1.6s; }

/* --------------------------------------------------------------------------
   12. Product screenshot showcase
   -------------------------------------------------------------------------- */
.shot {
    position: relative;
    border-radius: 20px;
    overflow: visible;
    perspective: 1400px;
}
.shot img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    transform: rotateX(6deg) rotateY(-7deg) translateZ(0);
    transition: transform .7s cubic-bezier(.2, .7, .3, 1);
    will-change: transform;
}
.shot:hover img { transform: rotateX(0deg) rotateY(0deg) scale(1.02); }
.shot--flat img { transform: none; }
.shot__glow {
    position: absolute;
    inset: 12% 6% -6%;
    border-radius: 50%;
    filter: blur(52px);
    background: radial-gradient(circle, rgba(47, 123, 246, .40), transparent 70%);
    z-index: -1;
}
.shot__tag {
    position: absolute;
    right: -10px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(47, 123, 246, .22);
    box-shadow: 0 20px 40px -22px rgba(11, 30, 76, .7);
    font-family: var(--mono, monospace);
    font-size: .72rem;
    color: var(--ink-2, #46536b);
    animation: nx-drift 9s ease-in-out infinite;
}
.shot__tag i {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--nx-green);
    animation: nx-pod-beat 2.2s ease-out infinite;
}

/* App icon plate (the real installable icon, shown next to a screenshot) */
.appicon {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px 12px 12px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--line, #dde6f2);
    box-shadow: 0 20px 40px -26px rgba(11, 30, 76, .6);
}
.appicon img {
    width: 56px; height: 56px;
    border-radius: 16px;
    animation: nx-drift 8s ease-in-out infinite;
}
.appicon b { display: block; font-family: var(--display, sans-serif); font-size: .95rem; }
.appicon span { font-family: var(--mono, monospace); font-size: .7rem; color: var(--ink-3, #77839a); }

/* --------------------------------------------------------------------------
   13. Headline word rotator
   -------------------------------------------------------------------------- */
.rotator {
    display: inline-grid;
    vertical-align: bottom;
    overflow: hidden;
    height: 1.16em;
}
.rotator > span {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
    background: linear-gradient(100deg, #00b7d4, #2f7bf6 45%, #22b14c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
}
.rotator > span.is-on { opacity: 1; transform: none; }
.rotator > span.is-out { opacity: 0; transform: translateY(-100%); }

/* --------------------------------------------------------------------------
   14. Reduced motion — stop everything, keep the layout
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .scrollbeam { display: none; }
    .animband__grid,
    .animband__aura::before,
    .animband__aura::after,
    .cicd__rail::after,
    .cicd__packet,
    .cicd__node,
    .topo__edge,
    .topo__pulse,
    .topo__halo,
    .topo__bit,
    .pod,
    .pod::after,
    .spark__line,
    .spark__scan,
    .stream span,
    .chipfield span,
    .region i,
    .shot__tag,
    .appicon img,
    .gradcard:hover::before,
    .term__cursor {
        animation: none !important;
    }
    .pod { opacity: 1; transform: none; }
    .spark__line { stroke-dashoffset: 0; }
    .shot img { transform: none; }
    .rotator { height: auto; }
    .rotator > span { opacity: 1; transform: none; }
    .rotator > span:not(.is-on) { display: none; }
}


/* --------------------------------------------------------------------------
   15. Utilities
   -------------------------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The hero needs a stacking context for the drifting chip field */
.hero { position: relative; }
.hero .stream { opacity: .28; z-index: 0; }
.hero .chipfield { z-index: 0; }
@media (max-width: 1100px) {
    .hero .chipfield,
    .hero .stream { display: none; }
}