@layer components {
  .auth-split {
    display: flex;
    min-height: 100dvh;
    position: relative;
    isolation: isolate;
  }

  /* ── Left panel: visual showcase ── */

  .auth-split__visual {
    position: relative;
    flex: 0 0 55%;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f3f0 0%, #ece8e3 40%, #f0ebe5 70%, #f5f3f0 100%);
  }

  .auth-visual-tagline {
    position: absolute;
    bottom: var(--space-10);
    left: var(--space-10);
    z-index: 3;
    max-width: 14ch;
    font-size: clamp(1.25rem, 5dvh, 4.5rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.04em;
    color: var(--color-ink-dark);
    text-wrap: balance;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.35);
    pointer-events: none;
  }


  .auth-visual-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  /* ── Floating isometric cards ── */

  .auth-floating-layer {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 9.5rem 0);
    perspective: 1200px;
    pointer-events: none;
    z-index: 1;
  }

  .auth-floating-card {
    position: absolute;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-card);
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    transform: rotateX(12deg) rotateY(-18deg) rotateZ(-2deg);
    transform-style: preserve-3d;
    opacity: 0;
    animation: auth-float linear infinite;
    will-change: transform, opacity;
    min-width: 10rem;
  }

  .auth-floating-card__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    margin-bottom: 0.375rem;
  }

  .auth-floating-card__title {
    font-weight: 600;
    font-size: var(--text-body);
    margin-bottom: 0.25rem;
  }

  .auth-floating-card__meta {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
  }

  .auth-floating-card--trigger {
    border-color: var(--color-trigger-border);
    background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, #fffdf9 100%);
  }

  .auth-floating-card--trigger .auth-floating-card__eyebrow {
    color: var(--color-trigger-icon);
  }

  .auth-floating-card--step {
    border-color: var(--color-step-border);
    background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, #fafaff 100%);
  }

  .auth-floating-card--step .auth-floating-card__eyebrow {
    color: var(--color-step-icon);
  }

  .auth-floating-card--action {
    border-color: var(--color-action-border);
    background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, #f8fff9 100%);
  }

  .auth-floating-card--action .auth-floating-card__eyebrow {
    color: var(--color-action-icon);
  }

  .auth-floating-card--stat {
    border-color: var(--color-border);
    background: rgba(255, 255, 255, 0.8);
    min-width: 8rem;
  }

  .auth-floating-card__title--stat {
    font-size: 1.25rem;
  }

  .auth-floating-card--logic {
    border-color: var(--color-logic-border);
    background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, #fdf4ff 100%);
  }

  .auth-floating-card--logic .auth-floating-card__eyebrow {
    color: var(--color-logic-icon);
  }

  .auth-floating-card--c1 {
    left: 8%;
    top: 12%;
    animation-duration: 18s;
    animation-delay: -4s;
  }

  .auth-floating-card--c2 {
    left: 55%;
    top: 24%;
    animation-duration: 22s;
    animation-delay: -8s;
  }

  .auth-floating-card--c3 {
    left: 25%;
    top: 58%;
    animation-duration: 16s;
    animation-delay: -5s;
  }

  .auth-floating-card--c4 {
    left: 68%;
    top: 18%;
    animation-duration: 20s;
    animation-delay: -12s;
  }

  .auth-floating-card--c5 {
    left: 40%;
    top: 44%;
    animation-duration: 19s;
    animation-delay: -10s;
  }

  @keyframes auth-float {
    0% {
      transform: rotateX(12deg) rotateY(-18deg) rotateZ(-2deg) translate3d(0, 0, 0);
      opacity: 0.5;
    }
    33% {
      transform: rotateX(13deg) rotateY(-20deg) rotateZ(0deg) translate3d(25px, -35px, 0);
      opacity: 0.7;
    }
    66% {
      transform: rotateX(14deg) rotateY(-22deg) rotateZ(1deg) translate3d(-15px, -65px, 0);
      opacity: 0.65;
    }
    100% {
      transform: rotateX(12deg) rotateY(-18deg) rotateZ(-2deg) translate3d(0, 0, 0);
      opacity: 0.5;
    }
  }

  /* ── Interactive workflow showcase ── */

  .auth-workflow {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
  }

  .auth-workflow__card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 1.5rem 1.75rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-elevated);
    min-width: 14rem;
  }

  .auth-workflow__title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-ink-light);
    margin-bottom: 1.25rem;
  }

  .auth-workflow__steps {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .auth-workflow__step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    transition: opacity 0.4s ease;
  }

  .auth-workflow__step-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.4s ease;
    border: 2px solid var(--color-border);
    background: var(--color-canvas);
    color: var(--color-ink-light);
  }

  .auth-workflow__step-label {
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-ink-light);
    transition: color 0.4s ease;
  }

  .auth-workflow__connector {
    width: 2px;
    height: 1.25rem;
    margin-left: calc(0.875rem - 1px);
    background: var(--color-border);
    transition: background 0.4s ease;
  }

  /* Step states */

  .auth-workflow__step--active .auth-workflow__step-icon {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary);
    box-shadow: 0 0 10px rgba(232, 89, 12, 0.2);
  }

  .auth-workflow__step--active .auth-workflow__step-label {
    color: var(--color-ink);
  }

  .auth-workflow__step--completed .auth-workflow__step-icon {
    border-color: var(--color-positive);
    background: #f0fdf4;
    color: var(--color-positive);
  }

  .auth-workflow__step--completed .auth-workflow__step-label {
    color: var(--color-ink-medium);
  }

  .auth-workflow__connector--active {
    background: linear-gradient(180deg, var(--color-positive), var(--color-primary));
  }

  .auth-workflow__connector--completed {
    background: var(--color-positive);
  }

  /* ── Right panel: form ── */

  .auth-split__form {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    position: relative;
    overflow-y: auto;
    z-index: 1;
    background: linear-gradient(180deg, #fdfcfb 0%, #f9f7f5 100%);
  }

  .auth-split__form > main {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .auth-split__form .locale-toggle-wrap--auth {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
  }

  .auth-split__form .auth-card {
    box-shadow: none;
    border: none;
  }

  .auth-split__form .input:user-valid:not(:focus):not(:placeholder-shown) {
    border-color: var(--color-positive);
  }

  @media (prefers-reduced-motion: reduce) {
    .auth-floating-card {
      animation: none;
      opacity: 0.5;
      will-change: auto;
    }

    .auth-floating-card--c1 {
      top: 12%;
    }

    .auth-floating-card--c2 {
      top: 24%;
    }

    .auth-workflow__step,
    .auth-workflow__step-icon,
    .auth-workflow__step-label,
    .auth-workflow__connector {
      transition: none;
    }
  }

  /* ── Responsive ── */

  @media (max-width: 768px) {
    .auth-split {
      align-items: stretch;
      overflow: hidden;
    }

    .auth-split__visual {
      position: absolute;
      inset: 0;
      flex: none;
    }

    .auth-split__form {
      flex: 1;
      min-height: 100dvh;
      width: 100%;
      padding: calc(var(--space-10) + 2rem) var(--space-4) var(--space-6);
      background: linear-gradient(180deg, rgba(245, 243, 240, 0.14) 0%, rgba(245, 243, 240, 0.32) 100%);
      backdrop-filter: blur(2px);
    }

    .auth-split__form .locale-toggle-wrap--auth {
      z-index: 2;
    }

    .auth-split__form .auth-card {
      border: 1px solid rgba(255, 255, 255, 0.45);
      background: rgba(255, 255, 255, 0.9);
      box-shadow: var(--shadow-elevated);
      backdrop-filter: blur(18px);
    }

    .auth-floating-layer {
      clip-path: none;
    }

    .auth-floating-card {
      opacity: 0.35;
    }

    .auth-workflow {
      display: none;
    }

    .auth-visual-tagline {
      left: var(--space-5);
      right: var(--space-5);
      bottom: var(--space-5);
      max-width: 10ch;
      font-size: clamp(1.5rem, 8vw, 2.25rem);
    }
  }

  @media (min-width: 769px) and (max-width: 1100px) {
    .auth-split__visual {
      flex: 0 0 45%;
    }

    .auth-split__form {
      flex: 0 0 55%;
    }

    .auth-floating-card {
      font-size: var(--text-xs);
      padding: 0.625rem 0.75rem;
      min-width: 8rem;
    }

    .auth-visual-tagline {
      left: var(--space-8);
      bottom: var(--space-8);
      max-width: 12ch;
      font-size: clamp(1.25rem, 4dvh, 3.25rem);
    }

    .auth-floating-layer {
      clip-path: inset(0 0 7.5rem 0);
    }
  }
}