/* ─── 3D scene shells ─── */
.cs-scene {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.cs-scene__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.cs-scene__content {
    position: relative;
    z-index: 2;
}

.cs-scene__aurora {
    position: absolute;
    inset: -20%;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 45% at 15% 20%, rgba(244, 119, 53, 0.35), transparent 55%),
        radial-gradient(ellipse 50% 40% at 85% 15%, rgba(62, 184, 255, 0.22), transparent 50%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(16, 34, 61, 0.5), transparent 60%);
    animation: cs-aurora-drift 18s var(--cs-ease) infinite alternate;
    filter: blur(40px);
    opacity: 0.85;
}

.cs-scene__grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
    transform: perspective(800px) rotateX(58deg) scale(1.4);
    transform-origin: center 80%;
    opacity: 0.5;
}

@keyframes cs-aurora-drift {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(3%, -2%) scale(1.05);
    }
}

/* ─── Scroll reveal ─── */
[data-cs-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity var(--cs-duration) var(--cs-ease),
        transform var(--cs-duration) var(--cs-ease);
}

[data-cs-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-cs-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ─── 3D tilt cards ─── */
[data-cs-tilt] {
    transform-style: preserve-3d;
    transition: transform 0.12s var(--cs-ease), box-shadow 0.35s var(--cs-ease);
    will-change: transform;
}

[data-cs-tilt] .cs-tilt-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--cs-shine-x, 50%) var(--cs-shine-y, 0%), rgba(255, 255, 255, 0.35), transparent 45%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 3;
}

[data-cs-tilt]:hover .cs-tilt-shine,
[data-cs-tilt]:focus-within .cs-tilt-shine {
    opacity: 1;
}

/* ─── Floating orbs (CSS 3D) ─── */
.cs-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    perspective: 900px;
}

.cs-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    animation: cs-orb-float 12s var(--cs-ease) infinite alternate;
}

.cs-orb--1 {
    width: clamp(120px, 18vw, 220px);
    height: clamp(120px, 18vw, 220px);
    top: 12%;
    right: 8%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 154, 92, 0.9), rgba(244, 119, 53, 0.15));
    animation-delay: 0s;
}

.cs-orb--2 {
    width: clamp(80px, 12vw, 140px);
    height: clamp(80px, 12vw, 140px);
    bottom: 18%;
    left: 6%;
    background: radial-gradient(circle at 40% 40%, rgba(62, 184, 255, 0.7), rgba(62, 184, 255, 0.05));
    animation-delay: -4s;
}

.cs-orb--3 {
    width: clamp(60px, 8vw, 100px);
    height: clamp(60px, 8vw, 100px);
    top: 45%;
    left: 42%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent);
    animation-delay: -7s;
}

@keyframes cs-orb-float {
    0% {
        transform: translate3d(0, 0, 0) rotateX(0deg);
    }
    100% {
        transform: translate3d(0, -16px, 40px) rotateX(12deg);
    }
}

/* ─── Gradient border animation ─── */
.cs-gradient-border {
    position: relative;
    border-radius: var(--cs-radius-xl);
    padding: 1px;
    background: linear-gradient(135deg, rgba(244, 119, 53, 0.8), rgba(62, 184, 255, 0.5), rgba(244, 119, 53, 0.6));
    background-size: 200% 200%;
    animation: cs-border-shift 8s ease infinite;
}

.cs-gradient-border__inner {
    border-radius: calc(var(--cs-radius-xl) - 1px);
    background: var(--cs-glass-dark);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

@keyframes cs-border-shift {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-scene__aurora,
    .cs-orb,
    .cs-gradient-border {
        animation: none;
    }
}

/* ─── Section background blocks ─── */
.cs-bg-block {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.cs-bg-block__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.cs-bg-block__content {
    position: relative;
    z-index: 2;
}

.cs-bg-block--ribbon {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.cs-bg-block--lattice {
    background: linear-gradient(165deg, #f4f7fb 0%, #eef3f9 50%, #f8fafc 100%);
}

.cs-bg-block--lattice::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 50% at 100% 0%, rgba(244, 119, 53, 0.07), transparent 55%);
}

.cs-bg-block--depth {
    background: #f0f4f8;
}

.cs-bg-block--depth::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at 20% 80%, rgba(11, 25, 43, 0.04), transparent 45%);
}

.cs-bg-block--sparkle {
    background: linear-gradient(180deg, #fafbfd 0%, #f0f5fa 100%);
}

.cs-bg-block--sparkle::after {
    content: "";
    position: absolute;
    width:  min(480px, 90vw);
    height: min(480px, 90vw);
    right: -12%;
    top: -20%;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle, rgba(62, 184, 255, 0.12), transparent 65%);
    filter: blur(8px);
}

.cs-bg-block--dark {
    background: transparent;
}

.cs-bg-block--light {
    background: transparent;
}

.cs-bg-block--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 45% 35% at 12% 10%, rgba(255, 245, 210, 0.06), transparent 55%),
        linear-gradient(180deg, rgba(80, 50, 120, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse 100% 45% at 50% 100%, rgba(40, 25, 65, 0.45), transparent 60%);
}

.cs-bg-block--light::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 55% at 50% 35%, rgba(255, 255, 255, 0.35), transparent 60%),
        linear-gradient(180deg, transparent 55%, rgba(200, 230, 255, 0.25) 100%);
    mix-blend-mode: soft-light;
}