/* ==========================================================================
   Nextrobic — motion & depth layer (3D / 4D)
   Adds dimensional animation on top of app.css + it.css:
   floating tech orbit, parallax cards, gradient mesh, marquee, 3D tilt.
   Everything respects prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Animated gradient mesh — a living backdrop behind hero + CTA
   -------------------------------------------------------------------------- */
.mesh-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.mesh-bg::before,
.mesh-bg::after {
    content: "";
    position: absolute;
    width: 60vw;
    height: 60vw;
    max-width: 720px;
    max-height: 720px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    will-change: transform;
}
.mesh-bg::before {
    top: -20%;
    left: -10%;
    background: radial-gradient(circle, rgba(0,183,212,.55), transparent 65%);
    animation: mesh-float-a 18s ease-in-out infinite;
}
.mesh-bg::after {
    bottom: -25%;
    right: -10%;
    background: radial-gradient(circle, rgba(122,60,240,.5), transparent 65%);
    animation: mesh-float-b 22s ease-in-out infinite;
}
@keyframes mesh-float-a {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(12%,18%) scale(1.15); }
    66%     { transform: translate(-8%,8%) scale(.92); }
}
@keyframes mesh-float-b {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(-14%,-10%) scale(1.1); }
    66%     { transform: translate(10%,-16%) scale(.9); }
}

/* --------------------------------------------------------------------------
   3D tech orbit — rings of cloud/devops badges circling the hero mark
   -------------------------------------------------------------------------- */
.orbit {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 460px;
    margin-inline: auto;
    transform-style: preserve-3d;
    perspective: 1000px;
}
.orbit__core {
    position: absolute;
    inset: 34%;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: var(--carbon);
    box-shadow: 0 30px 60px -30px rgba(47,107,255,.6), inset 0 0 0 1px rgba(255,255,255,.06);
    animation: core-pulse 4s ease-in-out infinite;
    z-index: 5;
}
.orbit__core img { width: 74%; height: 74%; object-fit: contain; }
@keyframes core-pulse {
    0%,100% { transform: translateZ(40px) scale(1); box-shadow: 0 30px 60px -30px rgba(47,107,255,.6), inset 0 0 0 1px rgba(255,255,255,.06); }
    50%     { transform: translateZ(40px) scale(1.05); box-shadow: 0 40px 80px -30px rgba(122,60,240,.7), inset 0 0 0 1px rgba(255,255,255,.1); }
}

.orbit__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(47,107,255,.22);
    transform-style: preserve-3d;
}
.orbit__ring--1 { animation: spin 26s linear infinite; }
.orbit__ring--2 { inset: 13%; border-color: rgba(0,183,212,.22); animation: spin 20s linear infinite reverse; }
.orbit__ring--3 { inset: 26%; border-color: rgba(122,60,240,.22); animation: spin 32s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.orbit__badge {
    position: absolute;
    top: -22px;
    left: 50%;
    width: 44px;
    height: 44px;
    margin-left: -22px;
    border-radius: 12px;
    box-shadow: 0 10px 24px -12px rgba(10,14,23,.8);
    transform-origin: center;
    animation: badge-counter 26s linear infinite;
    background: var(--carbon);
}
.orbit__ring--1 .orbit__badge:nth-child(2) { transform: rotate(90deg) translateY(-230px) ; }
.orbit__badge img { width: 100%; height: 100%; border-radius: 12px; }

/* Simple stable placement: distribute badges with transforms */
.orbit__sat {
    position: absolute;
    width: 46px; height: 46px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--carbon);
    box-shadow: 0 12px 26px -14px rgba(10,14,23,.85);
    top: 50%; left: 50%;
    margin: -23px 0 0 -23px;
    will-change: transform;
}
.orbit__sat img { width: 100%; height: 100%; }
.orbit__sat:nth-child(1) { animation: orbit-1 24s linear infinite; }
.orbit__sat:nth-child(2) { animation: orbit-2 24s linear infinite; }
.orbit__sat:nth-child(3) { animation: orbit-3 24s linear infinite; }
.orbit__sat:nth-child(4) { animation: orbit-4 30s linear infinite; }
.orbit__sat:nth-child(5) { animation: orbit-5 30s linear infinite; }
.orbit__sat:nth-child(6) { animation: orbit-6 30s linear infinite; }
@keyframes orbit-1 { from { transform: rotate(0deg) translateX(190px) rotate(0deg); } to { transform: rotate(360deg) translateX(190px) rotate(-360deg); } }
@keyframes orbit-2 { from { transform: rotate(120deg) translateX(190px) rotate(-120deg); } to { transform: rotate(480deg) translateX(190px) rotate(-480deg); } }
@keyframes orbit-3 { from { transform: rotate(240deg) translateX(190px) rotate(-240deg); } to { transform: rotate(600deg) translateX(190px) rotate(-600deg); } }
@keyframes orbit-4 { from { transform: rotate(60deg) translateX(130px) rotate(-60deg); } to { transform: rotate(420deg) translateX(130px) rotate(-420deg); } }
@keyframes orbit-5 { from { transform: rotate(180deg) translateX(130px) rotate(-180deg); } to { transform: rotate(540deg) translateX(130px) rotate(-540deg); } }
@keyframes orbit-6 { from { transform: rotate(300deg) translateX(130px) rotate(-300deg); } to { transform: rotate(660deg) translateX(130px) rotate(-660deg); } }

/* --------------------------------------------------------------------------
   Marquee — infinite scroll of tech badges ("works with")
   -------------------------------------------------------------------------- */
.marquee {
    position: relative;
    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;
    gap: 18px;
    width: max-content;
    animation: marquee 26s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    font-family: var(--display);
    font-weight: 600;
    font-size: .92rem;
    color: var(--ink-2);
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}
.marquee__item img { width: 30px; height: 30px; border-radius: 8px; }

/* --------------------------------------------------------------------------
   Floating parallax cards (data-float) — gentle 4D drift + depth
   -------------------------------------------------------------------------- */
.float { animation: floaty 6s ease-in-out infinite; will-change: transform; }
.float--slow { animation-duration: 9s; }
.float--delay { animation-delay: -3s; }
@keyframes floaty {
    0%,100% { transform: translateY(0) rotate(0deg); }
    50%     { transform: translateY(-14px) rotate(.6deg); }
}

/* 3D tilt on hover for feature cards (JS adds --rx/--ry) */
.tilt3d {
    transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
    transition: transform .18s ease-out;
    transform-style: preserve-3d;
}

/* Shine sweep across dark panels */
.shine { position: relative; overflow: hidden; }
.shine::after {
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.14), transparent);
    transform: skewX(-18deg);
    animation: shine-sweep 6s ease-in-out infinite;
}
@keyframes shine-sweep { 0%,100% { left: -60%; } 55% { left: 130%; } }

/* --------------------------------------------------------------------------
   Count-up numbers pop
   -------------------------------------------------------------------------- */
.metric__value { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.metric:hover .metric__value { transform: translateY(-3px) scale(1.06); }

/* --------------------------------------------------------------------------
   Reduced motion — kill all the movement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .mesh-bg::before, .mesh-bg::after,
    .orbit__ring, .orbit__sat, .orbit__core,
    .marquee__track, .float, .shine::after {
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
    .orbit { max-width: 320px; }
    @keyframes orbit-1 { from { transform: rotate(0deg) translateX(130px) rotate(0deg); } to { transform: rotate(360deg) translateX(130px) rotate(-360deg); } }
    @keyframes orbit-2 { from { transform: rotate(120deg) translateX(130px) rotate(-120deg); } to { transform: rotate(480deg) translateX(130px) rotate(-480deg); } }
    @keyframes orbit-3 { from { transform: rotate(240deg) translateX(130px) rotate(-240deg); } to { transform: rotate(600deg) translateX(130px) rotate(-600deg); } }
    .orbit__sat:nth-child(4), .orbit__sat:nth-child(5), .orbit__sat:nth-child(6) { display: none; }
}