/* Auth split sidebar — logo-faithful rotating 3D cube (login + register)
   Matches inventaryo isometric lockup: blue top, blue/i front, green/check right. */

.auth-brand-moment {
    isolation: isolate;
    position: relative;
    min-height: 0;
    --fly-duration: 3.2s;
}

.auth-brand-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ---- Scene ---- */

.auth-brand-scene {
    --cube-size: clamp(7.25rem, 32vw, 8.75rem);
    --cube-half: calc(var(--cube-size) / 2);
    --cube-radius: calc(var(--cube-size) * 0.11);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(12.5rem, 50vw, 18rem);
    height: clamp(12.5rem, 50vw, 18rem);
    perspective: 1100px;
    perspective-origin: 50% 50%;
}

@media (min-width: 640px) {
    .auth-brand-scene {
        --cube-size: clamp(8rem, 28vw, 9.25rem);
        width: clamp(13.5rem, 42vw, 16.5rem);
        height: clamp(13.5rem, 42vw, 16.5rem);
    }
}

@media (min-width: 1024px) {
    .auth-brand-scene {
        --cube-size: 9.5rem;
        width: 16.5rem;
        height: 16.5rem;
    }
}

.auth-brand-glow {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 44% 40%, rgb(65 161 225 / 0.34) 0%, transparent 58%),
        radial-gradient(circle at 58% 66%, rgb(90 143 60 / 0.16) 0%, transparent 52%);
    filter: blur(30px);
    opacity: 0;
    animation:
        auth-brand-glow-enter 0.8s ease-out var(--fly-duration) forwards,
        auth-brand-glow-pulse 5.5s ease-in-out calc(var(--fly-duration) + 0.8s) infinite;
    pointer-events: none;
}

@keyframes auth-brand-glow-enter {
    from {
        opacity: 0;
        transform: scale(0.7);
    }
    to {
        opacity: 0.52;
        transform: scale(0.94);
    }
}

@keyframes auth-brand-glow-pulse {
    0%,
    100% {
        opacity: 0.52;
        transform: scale(0.94);
    }
    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

.auth-brand-orbit {
    position: absolute;
    inset: -10%;
    opacity: 0;
    animation:
        auth-brand-orbit-enter 0.7s ease-out var(--fly-duration) forwards,
        auth-brand-orbit-spin 24s linear calc(var(--fly-duration) + 0.7s) infinite;
    pointer-events: none;
}

@keyframes auth-brand-orbit-enter {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.auth-brand-orbit__dot {
    --orbit-radius: calc(var(--cube-size) * 0.96);
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.375rem;
    height: 0.375rem;
    margin: -0.1875rem 0 0 -0.1875rem;
    border-radius: 50%;
    background: linear-gradient(145deg, rgb(37 99 235 / 0.72), rgb(90 143 60 / 0.52));
    box-shadow: 0 0 10px rgb(37 99 235 / 0.3);
    transform: rotate(var(--orbit-angle)) translateY(calc(-1 * var(--orbit-radius)));
    opacity: 0.62;
}

.auth-brand-orbit__dot:nth-child(2),
.auth-brand-orbit__dot:nth-child(4) {
    width: 0.3rem;
    height: 0.3rem;
    margin: -0.15rem 0 0 -0.15rem;
    opacity: 0.4;
}

@keyframes auth-brand-orbit-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ---- Entrance fly-in (smooth depth + sine sway + trail) ---- */

.auth-brand-fly-in {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-style: preserve-3d;
    animation: auth-brand-fly-depth var(--fly-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}

@keyframes auth-brand-fly-depth {
    0% {
        opacity: 0;
        transform: translate3d(0, 28px, -600px) scale(0.12);
    }
    18% {
        opacity: 0.35;
    }
    55% {
        opacity: 0.88;
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.auth-brand-fly-sway {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-style: preserve-3d;
    animation: auth-brand-fly-sway var(--fly-duration) linear forwards;
    will-change: transform;
}

/* Dense sine-like path — linear steps keep velocity continuous (no pause at turns) */
@keyframes auth-brand-fly-sway {
    0% {
        transform: translateX(-108px);
    }
    3% {
        transform: translateX(-96px);
    }
    6% {
        transform: translateX(-80px);
    }
    9% {
        transform: translateX(-58px);
    }
    12% {
        transform: translateX(-32px);
    }
    15% {
        transform: translateX(-4px);
    }
    18% {
        transform: translateX(24px);
    }
    21% {
        transform: translateX(48px);
    }
    24% {
        transform: translateX(66px);
    }
    27% {
        transform: translateX(78px);
    }
    30% {
        transform: translateX(84px);
    }
    33% {
        transform: translateX(83px);
    }
    36% {
        transform: translateX(76px);
    }
    39% {
        transform: translateX(64px);
    }
    42% {
        transform: translateX(48px);
    }
    45% {
        transform: translateX(30px);
    }
    48% {
        transform: translateX(12px);
    }
    51% {
        transform: translateX(-6px);
    }
    54% {
        transform: translateX(-22px);
    }
    57% {
        transform: translateX(-36px);
    }
    60% {
        transform: translateX(-46px);
    }
    63% {
        transform: translateX(-52px);
    }
    66% {
        transform: translateX(-53px);
    }
    69% {
        transform: translateX(-48px);
    }
    72% {
        transform: translateX(-38px);
    }
    75% {
        transform: translateX(-26px);
    }
    78% {
        transform: translateX(-16px);
    }
    81% {
        transform: translateX(-9px);
    }
    84% {
        transform: translateX(-5px);
    }
    87% {
        transform: translateX(-2px);
    }
    90% {
        transform: translateX(-1px);
    }
    93% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(0);
    }
}

.auth-brand-trail {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform-style: preserve-3d;
}

.auth-brand-trail__ribbon {
    position: absolute;
    left: 50%;
    top: 48%;
    width: calc(var(--cube-size) * 1.35);
    height: calc(var(--cube-size) * 0.34);
    margin: calc(var(--cube-size) * -0.17) 0 0 calc(var(--cube-size) * -0.67);
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgb(65 161 225 / 0.08) 18%,
        rgb(255 255 255 / 0.42) 48%,
        rgb(90 143 60 / 0.22) 72%,
        transparent 100%
    );
    filter: blur(10px);
    opacity: 0;
    animation: auth-brand-trail-ribbon var(--fly-duration) linear forwards;
}

@keyframes auth-brand-trail-ribbon {
    0%,
    6% {
        opacity: 0;
        transform: scaleX(0.35) translateX(-80px);
    }
    18% {
        opacity: 0.55;
        transform: scaleX(0.75) translateX(-40px);
    }
    42% {
        opacity: 0.48;
        transform: scaleX(1) translateX(20px);
    }
    68% {
        opacity: 0.28;
        transform: scaleX(0.85) translateX(-12px);
    }
    100% {
        opacity: 0;
        transform: scaleX(0.5) translateX(0);
    }
}

.auth-brand-trail__spark {
    position: absolute;
    left: 50%;
    top: 46%;
    width: calc(var(--cube-size) * 0.36);
    height: calc(var(--cube-size) * 0.36);
    margin: calc(var(--cube-size) * -0.18) 0 0 calc(var(--cube-size) * -0.18);
    border-radius: 32%;
    background:
        radial-gradient(circle at 35% 35%, rgb(255 255 255 / 0.65) 0%, transparent 44%),
        radial-gradient(circle at 50% 50%, rgb(65 161 225 / 0.5) 0%, rgb(90 143 60 / 0.24) 55%, transparent 74%);
    filter: blur(8px);
    opacity: 0;
    animation: auth-brand-trail-spark var(--fly-duration) linear var(--trail-delay, 0s) forwards;
}

@keyframes auth-brand-trail-spark {
    0%,
    5% {
        opacity: 0;
        transform: scale(0.15);
    }
    14% {
        opacity: 0.62;
        transform: scale(0.42);
    }
    32% {
        opacity: 0.48;
        transform: scale(0.58);
    }
    52% {
        opacity: 0.34;
        transform: scale(0.64);
    }
    72% {
        opacity: 0.18;
        transform: scale(0.52);
    }
    100% {
        opacity: 0;
        transform: scale(0.28);
    }
}

.auth-brand-rig {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    animation: auth-brand-rig-float 5.2s ease-in-out var(--fly-duration) infinite;
    will-change: transform;
}

@keyframes auth-brand-rig-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -14px, 0);
    }
}

/* Isometric lockup angle — entrance spin then idle rotation */
.auth-brand-cube-spin {
    transform-style: preserve-3d;
    animation:
        auth-brand-cube-enter-spin var(--fly-duration) linear forwards,
        auth-brand-cube-rotate 20s linear var(--fly-duration) infinite;
    will-change: transform;
}

@keyframes auth-brand-cube-enter-spin {
    from {
        transform: rotateX(-31deg) rotateY(-248deg);
    }
    to {
        transform: rotateX(-31deg) rotateY(-38deg);
    }
}

@keyframes auth-brand-cube-rotate {
    from {
        transform: rotateX(-31deg) rotateY(-38deg);
    }
    to {
        transform: rotateX(-31deg) rotateY(322deg);
    }
}

/* ---- Cube geometry ---- */

.auth-brand-cube {
    position: relative;
    width: var(--cube-size);
    height: var(--cube-size);
    transform-style: preserve-3d;
}

.auth-brand-cube__face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: 2.5px solid #fff;
    border-radius: var(--cube-radius);
    box-sizing: border-box;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.16),
        0 0 0 1px rgb(255 255 255 / 0.28);
    overflow: hidden;
}

/* Top — light blue (logo top face) */
.auth-brand-cube__face--top {
    transform: rotateX(90deg) translateZ(var(--cube-half));
    background: linear-gradient(145deg, #52b0f2 0%, #41a1e1 48%, #3b94d9 100%);
    box-shadow: inset 0 0 22px rgb(255 255 255 / 0.14);
}

/* Front — royal blue with "i" anchored to face bottom (logo left-front face) */
.auth-brand-cube__face--front {
    transform: rotateY(0deg) translateZ(var(--cube-half));
    align-items: flex-end;
    justify-content: center;
    padding-bottom: calc(var(--cube-size) * 0.03);
    background: linear-gradient(168deg, #3388dc 0%, #2560a5 54%, #1e4f8f 100%);
}

/* Right — green with check badge (logo right-front face) */
.auth-brand-cube__face--right {
    transform: rotateY(90deg) translateZ(var(--cube-half));
    background: linear-gradient(165deg, #7ec055 0%, #72b344 50%, #5a8f3c 100%);
}

/* Left — green opposite check (logo back-right face) */
.auth-brand-cube__face--left {
    transform: rotateY(-90deg) translateZ(var(--cube-half));
    background: linear-gradient(195deg, #84c85e 0%, #72b344 46%, #5a8f3c 100%);
    box-shadow: inset 0 0 18px rgb(255 255 255 / 0.1);
}

.auth-brand-cube__face--left .auth-brand-cube__word-invent {
    color: rgb(255 255 255 / 0.98);
}

.auth-brand-cube__face--left .auth-brand-cube__word-aryo {
    color: #ecfccb;
}

/* Back — navy */
.auth-brand-cube__face--back {
    transform: rotateY(180deg) translateZ(var(--cube-half));
    background: linear-gradient(165deg, #1e4f8f 0%, #1e3a8a 100%);
}

/* Bottom — dark blue */
.auth-brand-cube__face--bottom {
    transform: rotateX(-90deg) translateZ(var(--cube-half));
    background: linear-gradient(165deg, #1e40af 0%, #172554 100%);
}

/* ---- Logo glyphs ---- */

.auth-brand-cube__i {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--cube-size) * 0.028);
}

.auth-brand-cube__i-dot {
    width: calc(var(--cube-size) * 0.135);
    height: calc(var(--cube-size) * 0.135);
    border-radius: 50%;
    background: #fff;
}

.auth-brand-cube__i-stem {
    width: calc(var(--cube-size) * 0.122);
    height: calc(var(--cube-size) * 0.56);
    border-radius: calc(var(--cube-size) * 0.061) calc(var(--cube-size) * 0.061) 0 0;
    background: #fff;
}

.auth-brand-cube__check {
    width: calc(var(--cube-size) * 0.66);
    height: calc(var(--cube-size) * 0.66);
    color: #fff;
    filter: drop-shadow(0 1px 2px rgb(15 23 42 / 0.1));
}

.auth-brand-cube__word {
    display: block;
    max-width: 92%;
    font-family: "Outfit", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: calc(var(--cube-size) * 0.108);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
    text-align: center;
    text-transform: lowercase;
    word-break: break-word;
}

.auth-brand-cube__word-invent {
    color: rgb(255 255 255 / 0.98);
}

.auth-brand-cube__word-aryo {
    color: #bfdbfe;
}

.auth-brand-cube__face--bottom .auth-brand-cube__word {
    font-size: calc(var(--cube-size) * 0.092);
    opacity: 0.92;
}

.auth-brand-cube__word--top .auth-brand-cube__word-invent,
.auth-brand-cube__face--top .auth-brand-cube__word-invent {
    color: #1c1917;
}

.auth-brand-cube__word--top .auth-brand-cube__word-aryo,
.auth-brand-cube__face--top .auth-brand-cube__word-aryo {
    color: #2563eb;
}

.auth-brand-cube__face--top .auth-brand-cube__word {
    font-size: calc(var(--cube-size) * 0.098);
    letter-spacing: -0.04em;
}

.auth-brand-cube__shadow {
    position: absolute;
    top: calc(var(--cube-size) * 1.02);
    left: 50%;
    width: calc(var(--cube-size) * 0.86);
    height: calc(var(--cube-size) * 0.15);
    margin-left: calc(var(--cube-size) * -0.43);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgb(65 161 225 / 0.34) 0%, rgb(15 23 42 / 0.07) 55%, transparent 72%);
    filter: blur(3px);
    opacity: 0;
    animation:
        auth-brand-shadow-land var(--fly-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards,
        auth-brand-cube-shadow 5.2s ease-in-out var(--fly-duration) infinite;
    pointer-events: none;
}

@keyframes auth-brand-shadow-land {
    0% {
        opacity: 0;
        transform: scale(0.15);
    }
    100% {
        opacity: 0.44;
        transform: scale(1);
    }
}

@keyframes auth-brand-cube-shadow {
    0%,
    100% {
        opacity: 0.44;
        transform: scale(1);
    }
    50% {
        opacity: 0.24;
        transform: scale(0.76);
    }
}

/* ---- Copy (sleek shine) ---- */

.auth-brand-moment .auth-brand-copy {
    position: absolute;
    right: 0;
    bottom: clamp(0.15rem, 1.75vh, 0.55rem);
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    text-align: center;
    animation: auth-brand-copy-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--fly-duration) + 0.15s) backwards;
}

.auth-brand-copy__tagline {
    letter-spacing: 0.2em;
    font-weight: 700;
}

.auth-brand-copy__line {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.012em;
    color: rgb(51 65 85);
}

.auth-brand-shine-text {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 0.25rem;
}

.auth-brand-shine-text__label {
    position: relative;
    z-index: 1;
    display: inline-block;
}

.auth-brand-shine-text::after {
    content: "";
    position: absolute;
    inset: -20% -55%;
    z-index: 2;
    background: linear-gradient(
        105deg,
        transparent 38%,
        rgb(255 255 255 / 0.38) 50%,
        transparent 62%
    );
    transform: translateX(-130%) skewX(-10deg);
    animation: auth-brand-text-shine 11s cubic-bezier(0.42, 0, 0.58, 1) infinite;
    pointer-events: none;
}

.auth-brand-shine-text--muted::after {
    background: linear-gradient(
        105deg,
        transparent 38%,
        rgb(255 255 255 / 0.48) 50%,
        transparent 62%
    );
    animation-delay: 0.8s;
}

@keyframes auth-brand-text-shine {
    0%,
    52% {
        transform: translateX(-130%) skewX(-10deg);
        opacity: 0;
    }
    58% {
        opacity: 1;
    }
    78% {
        transform: translateX(130%) skewX(-10deg);
        opacity: 1;
    }
    84%,
    100% {
        transform: translateX(130%) skewX(-10deg);
        opacity: 0;
    }
}

@keyframes auth-brand-copy-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-brand-glow,
    .auth-brand-orbit,
    .auth-brand-fly-in,
    .auth-brand-fly-sway,
    .auth-brand-trail__ribbon,
    .auth-brand-trail__spark,
    .auth-brand-rig,
    .auth-brand-cube-spin,
    .auth-brand-cube__shadow {
        animation: none !important;
    }

    .auth-brand-glow {
        opacity: 0.75;
        transform: none;
    }

    .auth-brand-orbit {
        opacity: 1;
        transform: none;
    }

    .auth-brand-fly-in {
        opacity: 1;
        transform: none;
    }

    .auth-brand-fly-sway {
        transform: none;
    }

    .auth-brand-trail__ribbon {
        opacity: 0;
    }

    .auth-brand-trail__spark {
        opacity: 0;
    }

    .auth-brand-rig {
        transform: none;
    }

    .auth-brand-cube-spin {
        transform: rotateX(-31deg) rotateY(-38deg);
    }

    .auth-brand-cube__shadow {
        opacity: 0.35;
        transform: none;
    }

    .auth-brand-moment .auth-brand-copy {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .auth-brand-shine-text::after {
        animation: none !important;
        opacity: 0;
    }
}