/* Transparante zwevende props — onboarding & auth */

.float-props {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.float-prop {
    position: absolute;
    background: none;
    box-shadow: none;
    will-change: transform;
    pointer-events: auto;
    cursor: default;
    transition: filter .25s ease;
}
.float-prop.is-hover {
    animation-play-state: paused !important;
    filter: brightness(1.05);
}
.float-prop.is-hover img {
    animation: propHop .45s ease;
}
@keyframes propHop {
    0%   { transform: rotate(0deg) scale(1); }
    35%  { transform: rotate(8deg) scale(1.08) translateY(-8px); }
    70%  { transform: rotate(-4deg) scale(1.04) translateY(-4px); }
    100% { transform: rotate(0deg) scale(1); }
}
.float-prop img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 22px 34px rgba(15, 23, 42, 0.18));
    user-select: none;
}

/* Posities — PNG cutouts */
.float-prop-1 { width: 110px; top: 12%; left: 5%;  --rot: -8deg;  animation: floatDrift1 9s ease-in-out infinite; }
.float-prop-2 { width: 120px; top: 8%;  right: 6%; --rot: 6deg;   animation: floatDrift2 11s ease-in-out infinite; }
.float-prop-3 { width: 130px; bottom: 14%; left: 4%;  --rot: 5deg;   animation: floatDrift3 10s ease-in-out infinite; }
.float-prop-4 { width: 140px; bottom: 10%; right: 5%; --rot: -5deg;  animation: floatDrift4 12s ease-in-out infinite; }
.float-prop-5 { width: 95px;  top: 42%; left: 2%;  --rot: -6deg;  animation: floatDrift5 8s ease-in-out infinite; }
.float-prop-6 { width: 150px; top: 38%; right: 3%; --rot: 3deg;   animation: floatDrift6 13s ease-in-out infinite; }

@keyframes floatDrift1 {
    0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
    50%      { transform: translate(14px, -20px) rotate(calc(var(--rot, 0deg) + 4deg)); }
}
@keyframes floatDrift2 {
    0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
    50%      { transform: translate(-16px, 18px) rotate(calc(var(--rot, 0deg) - 3deg)); }
}
@keyframes floatDrift3 {
    0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
    50%      { transform: translate(18px, -14px) rotate(calc(var(--rot, 0deg) + 5deg)); }
}
@keyframes floatDrift4 {
    0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
    50%      { transform: translate(-12px, -22px) rotate(calc(var(--rot, 0deg) - 4deg)); }
}
@keyframes floatDrift5 {
    0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
    50%      { transform: translate(10px, 16px) rotate(calc(var(--rot, 0deg) + 6deg)); }
}
@keyframes floatDrift6 {
    0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
    50%      { transform: translate(-14px, 12px) rotate(calc(var(--rot, 0deg) - 2deg)); }
}

/* Auth panel variant — props binnen linkerkolom */
.auth-left .float-props {
    position: absolute;
    inset: 0;
}

@media (max-width: 720px) {
    .float-prop { display: none; }
    .float-prop-1, .float-prop-2 { display: block; opacity: .55; }
    .float-prop-1 { width: 64px; top: 8%; left: 4%; }
    .float-prop-2 { width: 72px; top: 6%; right: 4%; }
}

/* Auth variant — groter & willekeuriger */
.float-props--auth .float-prop { opacity: .9; pointer-events: none; z-index: 1; }
.float-prop-a1 { width: 120px; top: 2%;  left: 3%;  --rot: -12deg; animation: floatDrift1 10s ease-in-out infinite; }
.float-prop-a2 { width: 145px; top: 18%; right: 2%; --rot: 18deg;  animation: floatDrift4 13s ease-in-out infinite; }
.float-prop-a3 { width: 110px; bottom: 8%; left: 8%;  --rot: 6deg;   animation: floatDrift3 11s ease-in-out infinite; }
.float-prop-a4 { width: 95px;  top: 55%; left: 1%;  --rot: -8deg;  animation: floatDrift5 9s ease-in-out infinite; }
.float-prop-a5 { width: 115px; bottom: 4%; right: 5%; --rot: -15deg; animation: floatDrift6 14s ease-in-out infinite; }

@media (max-width: 960px) {
    .float-props--auth .float-prop-a2,
    .float-props--auth .float-prop-a5 { display: none; }
    .float-prop-a1 { width: 88px; top: 2%; left: 2%; }
    .float-prop-a3 { width: 80px; bottom: 6%; left: 4%; }
    .float-prop-a4 { width: 76px; top: 48%; left: 2%; }
}

/* Homepage hero — originele posities, iets verder naar buiten */
.float-props--home {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.float-props--home .float-prop {
    opacity: 0.88;
    pointer-events: none;
    transform: translateY(var(--parallax-y, 0)) rotate(var(--rot, 0deg));
}
.float-prop-h1 { width: 125px; top: 8%;  left: -2%;  --rot: -14deg; animation: floatDrift3 11s ease-in-out infinite; }
.float-prop-h2 { width: 95px;  bottom: 12%; left: 0%;  --rot: 10deg;   animation: floatDrift5 12s ease-in-out infinite; }
.float-prop-h3 { width: 118px; top: 4%;   right: -2%; --rot: -8deg;  animation: floatDrift2 10s ease-in-out infinite; }
.float-prop-h4 { width: 138px; top: 58%;  left: -3%;  --rot: 20deg;   animation: floatDrift1 9s ease-in-out infinite; }
.float-prop-h5 { width: 108px; bottom: 18%; right: 0%; --rot: -6deg; animation: floatDrift4 13s ease-in-out infinite; }
.float-prop-h6 { width: 92px;  top: 36%;  right: -1%; --rot: 12deg; animation: floatDrift6 11s ease-in-out infinite; }

/* Dashboard variant */
.float-props--dash .float-prop { opacity: 0.7; pointer-events: none; }
.float-prop-d1 { width: 140px; top: 10%; right: 4%; --rot: 3deg;  animation: floatDrift6 12s ease-in-out infinite; }
.float-prop-d2 { width: 120px; top: 42%; left: 3%;  --rot: -10deg; animation: floatDrift2 11s ease-in-out infinite; }
.float-prop-d3 { width: 105px; bottom: 12%; right: 6%; --rot: 8deg; animation: floatDrift1 9s ease-in-out infinite; }
.float-prop-d4 { width: 125px; bottom: 18%; left: 5%; --rot: -5deg; animation: floatDrift3 10s ease-in-out infinite; }

@media (max-width: 768px) {
    .float-props--home .float-prop-h1 { width: 90px; }
    .float-props--home .float-prop-h2 { width: 80px; }
    .float-props--home .float-prop-h3 { width: 100px; }
    .float-props--home .float-prop-h4,
    .float-props--home .float-prop-h5,
    .float-props--home .float-prop-h6 { display: none; }
}

/* Donkere modus — props beter zichtbaar */
[data-theme="dark"] .float-prop {
    opacity: 1 !important;
}
[data-theme="dark"] .float-prop img {
    filter: brightness(1.42) contrast(1.06)
            drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 20px rgba(37, 184, 173, 0.1));
}

@media (prefers-reduced-motion: reduce) {
    .float-prop { animation: none !important; }
    .float-prop.is-hover img { animation: none !important; }
}