<script setup lang="ts">
import authVisual from '@/assets/auth/auth-visual.png'
</script>

<template>
  <div class="auth-layout">
    <!-- 左侧 3D 插图 -->
    <div class="auth-visual" :style="{ backgroundImage: `url(${authVisual})` }" />

    <!-- 右侧表单卡片 -->
    <div class="auth-card">
      <div class="glow-ring" aria-hidden="true" />
      <slot />
    </div>
  </div>
</template>

<style scoped>
/* ── 整体布局 ── */
.auth-layout {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  padding-top: var(--header-height);
  background: #080808;
  overflow: hidden;
}

/* ── 左侧装饰 ── */
.auth-visual {
  flex: 1;
  background-size: cover;
  background-position: center 15%;
  background-repeat: no-repeat;
  min-height: calc(100vh - var(--header-height));
  position: relative;
  background-size:80%;
}
/* 右侧渐变遮罩，融合卡片边界 */
.auth-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, #080808 100%);
}

/* ── 右侧卡片 ── */
.auth-card {
  position: relative;
  flex-shrink: 0;
  width: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 52px 48px 48px;
  background: #111318;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
}

/* 右上角发光圆环 */
.glow-ring {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 2px solid rgba(240, 185, 11, 0.7);
  box-shadow:
    0 0 30px rgba(240, 185, 11, 0.3),
    inset 0 0 30px rgba(240, 185, 11, 0.1);
  pointer-events: none;
}

/* ── 移动端 ── */
@media (max-width: 860px) {
  .auth-layout {
    align-items: flex-start;
  }
  .auth-visual { display: none;}
  .auth-card {
    flex: 1;
    width: 100%;
    padding: 40px 24px 36px;
    border-left: none;
    background: #0a0a0a;
  }
  .glow-ring {
    width: 120px;
    height: 120px;
    top: -30px;
    right: -30px;
  }
}
</style>
