/* ============================================
   Fluid Hero canvas overlay & Lottie icon styles
   ============================================ */

.hero-section { position: relative; }

/* ============================================
   Advanced Parallax Particles (injected by JS)
   ============================================ */
.parallax-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.px-particle {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
    transition: opacity 0.6s ease;
    box-shadow: 0 0 6px currentColor;
}

/* Subtle pulse animation staggered per particle */
.px-particle:nth-child(3n)   { animation: pxPulse 4s ease-in-out infinite; }
.px-particle:nth-child(3n+1) { animation: pxPulse 5s ease-in-out 0.8s infinite; }
.px-particle:nth-child(3n+2) { animation: pxPulse 6s ease-in-out 1.6s infinite; }

@keyframes pxPulse {
    0%, 100% { opacity: var(--px-opacity, 0.2); transform: scale(1); }
    50%      { opacity: calc(var(--px-opacity, 0.2) + 0.15); transform: scale(1.5); }
}

/* Parallax section items get smooth GPU-accelerated transforms */
section,
.about-tile, .services-tile, .feature-card,
.float-card, .contact-tile, .cta-content, .cf-card {
    will-change: transform;
    transition: transform 0.15s linear;
}

/* Hero content fades with scroll - GPU layer */
.hero-content, .apps-hero-content {
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    .parallax-particles { display: none; }
    .px-particle { animation: none !important; }
}

.fluid-hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    z-index: 0;
    mix-blend-mode: screen;
    opacity: 0.85;
}

/* Lift hero content above fluid canvas */
.hero-section .hero-content,
.hero-section .hero-visual {
    position: relative;
    z-index: 2;
}

/* Lottie icon inside floating card */
.lottie-icon {
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================================
   3D Product Configurator
   ============================================ */
.configurator-section {
    padding: 6rem 0 5rem;
    position: relative;
}

.configurator-wrap {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2.5rem;
    align-items: stretch;
}

@media (max-width: 900px) {
    .configurator-wrap { grid-template-columns: 1fr; }
}

#configurator3d {
    width: 100%;
    min-height: 460px;
    border-radius: 24px;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(250,204,21,0.08), transparent 60%),
        linear-gradient(180deg, rgba(15,23,42,0.6), rgba(15,23,42,0.2));
    overflow: hidden;
}

.configurator-controls {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.configurator-controls h3 {
    color: #facc15;
    font-size: 1.6rem;
    margin: 0;
}

.config-group { display: flex; flex-direction: column; gap: .6rem; }
.config-group .label {
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .15em;
    color: #cbd5e1;
}

.swatches { display: flex; gap: .65rem; flex-wrap: wrap; }
.swatch {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.25);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.swatch:hover { transform: scale(1.12); }
.swatch.active {
    border-color: #facc15;
    box-shadow: 0 0 0 3px rgba(250,204,21,0.25), 0 0 22px rgba(250,204,21,0.45);
    transform: scale(1.12);
}

.chip-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip {
    padding: .55rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.15);
    color: #e5e7eb;
    cursor: pointer;
    font-size: .9rem;
    transition: all .25s ease;
}
.chip:hover { border-color: rgba(250,204,21,0.5); color: #facc15; }
.chip.active {
    background: linear-gradient(135deg, rgba(250,204,21,0.20), rgba(250,204,21,0.05));
    border-color: #facc15;
    color: #facc15;
    box-shadow: 0 0 20px rgba(250,204,21,0.20);
}

.config-hint {
    font-size: .85rem;
    color: #94a3b8;
    margin-top: auto;
}
.config-hint i { color: #facc15; margin-right: .4rem; }

/* ============================================
   Parallax Scene (shared across all pages)
   ============================================ */
.parallax-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.parallax-layer {
    position: absolute;
    inset: -20%;
    will-change: transform;
    transition: transform 0.1s linear;
}

.parallax-layer--deep  { z-index: 0; }
.parallax-layer--mid   { z-index: 1; }
.parallax-layer--near  { z-index: 2; }

.parallax-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}

.parallax-orb--blue {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(30,64,175,0.30) 0%, transparent 70%);
    top: 5%; left: -5%;
}

.parallax-orb--red {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(127,29,29,0.25) 0%, transparent 70%);
    bottom: 10%; right: 5%;
}

.parallax-orb--gold {
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(250,204,21,0.14) 0%, transparent 70%);
    top: 40%; right: 20%;
}

.parallax-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(250,204,21,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(250,204,21,0.025) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at 60% 40%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 60% 40%, black 20%, transparent 70%);
}

/* ============================================
   Multi-layer parallax - ultra-deep & foreground
   ============================================ */
.parallax-layer--ultra-deep,
.parallax-layer--foreground { position: absolute; inset: 0; pointer-events: none; will-change: transform; }

.parallax-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(250,204,21,0.08);
}
.parallax-ring--lg {
    width: 600px; height: 600px;
    top: -10%; left: -8%;
    animation: ringDrift 30s linear infinite;
}
.parallax-ring--sm {
    width: 300px; height: 300px;
    bottom: 5%; right: -5%;
    border-color: rgba(59,130,246,0.1);
    animation: ringDrift 22s linear infinite reverse;
}
@keyframes ringDrift { to { transform: rotate(360deg); } }

.parallax-streak {
    position: absolute;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(250,204,21,0.15), transparent);
    border-radius: 2px;
}
.parallax-streak--1 { height: 120px; top: 15%; left: 12%; }
.parallax-streak--2 { height: 80px;  top: 40%; right: 18%; background: linear-gradient(180deg, transparent, rgba(59,130,246,0.12), transparent); }
.parallax-streak--3 { height: 160px; top: 60%; left: 55%; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.06), transparent); }

/* data-depth: GPU-promote only the direct parallax layers, not every descendant */
[data-depth] { contain: layout style; }