/* ─────────────────────────────────────────────────────────────────────
   Auth-hero — animated cloth-strip background voor het login-scherm.
   Wordt geladen vanuit Views/_Layout-authorization.cshtml.
   ───────────────────────────────────────────────────────────────────── */

/* Linker helft: animated hero met cloth-strips, gradient orbs, hoek-vignettes en logo */
.auth-split__hero {
    flex: 1;
    position: relative;
    overflow: hidden;
    perspective: 1100px;
    background:
        radial-gradient(circle at 0% 0%,     rgba(140,180,255,0.10) 0%, rgba(140,180,255,0) 32%),
        radial-gradient(circle at 100% 0%,   rgba(160,140,255,0.08) 0%, rgba(160,140,255,0) 36%),
        radial-gradient(circle at 0% 100%,   rgba(160,140,255,0.08) 0%, rgba(160,140,255,0) 36%),
        radial-gradient(circle at 100% 100%, rgba(140,180,255,0.10) 0%, rgba(140,180,255,0) 32%),
        radial-gradient(ellipse 60% 50% at 30% 30%, rgba(120,160,255,0.05) 0%, rgba(120,160,255,0) 60%),
        radial-gradient(ellipse 70% 60% at 80% 80%, rgba(140,180,255,0.04) 0%, rgba(140,180,255,0) 60%),
        radial-gradient(ellipse at 50% 35%, #192867 0%, #0a1640 100%);
}

/* ── Drijvende orbs ── */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    z-index: 1;
}
.hero-orb--a {
    width: 600px; height: 600px; top: -300px; left: -300px;
    background: radial-gradient(circle, rgba(150,190,255,0.14) 0%, rgba(150,190,255,0.04) 40%, rgba(150,190,255,0) 70%);
    animation: heroOrbA 220s linear infinite;
}
.hero-orb--b {
    width: 700px; height: 700px; top: 100%; left: 100%;
    background: radial-gradient(circle, rgba(170,150,255,0.12) 0%, rgba(170,150,255,0.03) 40%, rgba(170,150,255,0) 70%);
    animation: heroOrbB 280s linear infinite;
    animation-delay: -90s;
}
.hero-orb--c {
    width: 500px; height: 500px; top: 30%; left: -250px;
    background: radial-gradient(circle, rgba(180,210,255,0.08) 0%, rgba(180,210,255,0.02) 50%, rgba(180,210,255,0) 75%);
    animation: heroOrbC 260s linear infinite;
    animation-delay: -160s;
}
@keyframes heroOrbA { 0%,100% { transform: translate(0, 0); } 50% { transform: translate(110vw, 60vh); } }
@keyframes heroOrbB { 0%,100% { transform: translate(0, 0); } 50% { transform: translate(-120vw, -70vh); } }
@keyframes heroOrbC { 0%,100% { transform: translate(0, 0); } 50% { transform: translate(120vw, -20vh); } }

/* ── Cloth-stack: 9 strips met 3D ripple, per-strip eigen cycle/direction/delay ── */
.hero-cloth {
    position: absolute;
    top: 72%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 1px;
    transform-style: preserve-3d;
    animation: heroClothDrift 240s ease-in-out infinite;
    z-index: 2;
}

.hero-strip {
    position: absolute;
    top: var(--top);
    left: 0;
    width: 100%;
    height: 240px;
    margin-top: -120px;
    transform-style: preserve-3d;
    transform-origin: center;
    animation-name: heroRipple;
    animation-duration: var(--dur, 88s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: var(--dir, normal);
    animation-delay: var(--del, 0s);
    will-change: transform;
}
.hero-strip svg { width: 100%; height: 100%; display: block; overflow: visible; }

@keyframes heroRipple {
    0%   { transform: rotateX(0deg)   rotateY(0deg)   translateZ(0); }
    25%  { transform: rotateX(90deg)  rotateY(15deg)  translateZ(20px); }
    50%  { transform: rotateX(180deg) rotateY(0deg)   translateZ(0); }
    75%  { transform: rotateX(270deg) rotateY(-15deg) translateZ(-20px); }
    100% { transform: rotateX(360deg) rotateY(0deg)   translateZ(0); }
}

@keyframes heroClothDrift {
    0%,100% { transform: translate(-50%, -50%) rotateZ(-1deg); }
    50%     { transform: translate(-50%, -50%) rotateZ( 1deg); }
}

/* Per-line in/uit-fade lifecycle */
@keyframes heroLife {
    0%, 100% { opacity: 0; }
    15%      { opacity: 1; }
    70%      { opacity: 1; }
    85%      { opacity: 0; }
}
.hero-life {
    animation: heroLife var(--life-dur, 70s) linear infinite;
    animation-delay: var(--life-del, 0s);
}

/* Logo op de hero, gecentreerd */
.hero-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: clamp(280px, 32%, 420px);
    filter: drop-shadow(0 2px 12px rgba(0,0,0,0.35));
}
.hero-logo svg { width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
    .hero-cloth, .hero-strip, .hero-life, .hero-orb { animation: none !important; }
}