#home_center
  max-width 1400px
  width 100%
  margin .5rem auto
  padding 0 30px
  user-select none

.home-center-content
  width 100%
  display flex
  height 340px
  overflow hidden
  background var(--efu-card-bg)
  border var(--style-border-always)
  border-radius 12px
  box-shadow var(--efu-shadow-border)
  animation slide-in .6s .1s backwards

.home-center-left
  flex 1
  position relative
  height 100%
  min-width 0
  overflow hidden

.home-center-banner
  position relative
  width 100%
  height 100%
  overflow hidden

.home-center-banner-item
  position absolute
  inset 0
  display flex
  flex-direction column
  align-items center
  justify-content center
  width 100%
  height 100%
  padding 2rem
  opacity 0
  visibility hidden
  cursor pointer
  background-color var(--efu-card-bg)
  transition none

  &.active
    opacity 1
    visibility visible
    z-index 1

  &.has-banner-cover
    padding 0

    .home-center-cover
      width 100%
      max-width 100%
      height 100%

    .home-center-cover-img
      width 100%
      height 100%
      max-width 100%
      max-height 100%
      object-fit cover
      mask-image none

  &:focus-visible
    outline 2px solid var(--efu-white)
    outline-offset -3px

.home-center-cover
  width 80%
  max-width 80%
  flex-shrink 0
  overflow visible
  display flex
  align-items center
  justify-content center

.home-center-cover-img
  max-width 100%
  width auto
  height auto
  max-height 100%
  object-fit contain
  border-radius 0
  filter blur(0)
  mask-image radial-gradient(ellipse 60% 60% at center, #000 0, rgba(0, 0, 0, .8) 30%, rgba(0, 0, 0, .4) 50%, transparent 80%)
  mask-size 100% 100%
  mask-repeat no-repeat
  mask-position center
  transition filter .5s ease

.home-center-mask
  position absolute
  left 0
  bottom 0
  z-index 2
  width 100%
  height 120px
  background linear-gradient(to top, var(--home-center-theme, var(--efu-theme)) 0, transparent 100%)
  backdrop-filter blur(16px) saturate(1.2)
  mask-image linear-gradient(to top, #000 0, transparent 100%)
  pointer-events none

.home-center-title
  position absolute
  left 32px
  bottom 32px
  z-index 10
  width 80%
  max-width 80%
  text-align left
  pointer-events none

  a
    display -webkit-box
    overflow hidden
    color var(--efu-white)
    font-size 28px
    font-weight 700
    line-height 1.4
    -webkit-line-clamp 2
    -webkit-box-orient vertical
    pointer-events auto
    transition color .3s

    &:hover
      color var(--efu-white)

.home-center-title-tag
  display flex
  align-items center
  gap 4px
  margin-top 2px
  color var(--efu-white)
  font-size 12px
  line-height 24px
  opacity .8
  text-shadow 0 2px 20px rgba(0, 0, 0, .15)

  i
    font-size 12px

.home-center-indicators
  display none

.home-center-indicator
  display block
  width 8px
  height 8px
  padding 0
  border 0
  border-radius 50%
  background rgba(255, 255, 255, .4)
  cursor pointer
  transition .3s

  &.active
    width 24px
    border-radius 4px
    background rgba(255, 255, 255, .9)

.home-center-right
  display flex
  flex-shrink 0
  flex-direction column
  width 30%
  height 100%
  background var(--current-theme, var(--efu-theme))
  transition background-color .2s

.home-center-list
  display flex
  flex 1
  flex-direction column

.home-center-item
  display flex
  align-items center
  gap 15px
  max-height 20%
  padding 16px
  cursor pointer
  background rgba(0, 0, 0, .12)
  transition .2s

  &:hover
    background rgba(0, 0, 0, .06)

  &.active
    background rgba(255, 255, 255, .14)

.home-center-item-icon
  position relative
  display flex
  align-items center
  justify-content center
  flex-shrink 0
  width 36px
  min-width 36px
  height 36px
  overflow hidden
  border-radius 8px
  background var(--efu-card-bg)

  &::before
    content ''
    position absolute
    inset 0
    z-index 1
    border var(--style-border-always)
    border-width 2px
    border-radius 8px
    box-shadow var(--efu-shadow-white)
    opacity .2
    pointer-events none

  img
    width 100%
    height 100%
    object-fit cover

.home-center-item-title
  flex 1
  min-width 0
  overflow hidden

  a
    display -webkit-box
    overflow hidden
    color var(--efu-white)
    font-size 16px
    line-height 1.5
    opacity .85
    text-overflow ellipsis
    white-space nowrap
    -webkit-line-clamp 1
    -webkit-box-orient vertical
    transition color .2s

    &:hover, &:focus-visible
      color var(--efu-white)

@media (max-width: 768px)
  #home_center
    margin-top 0
    padding 0 16px

  .home-center-content
    flex-direction column
    height auto
    border-radius 12px

  .home-center-left
    width 100%

  .home-center-banner
    display flex
    height 200px
    overflow-x auto
    overflow-y hidden
    scroll-snap-type x mandatory
    scrollbar-width none
    -webkit-overflow-scrolling touch

    &::-webkit-scrollbar
      display none

  .home-center-banner-item
    position relative
    min-width 100%
    width 100%
    flex-shrink 0
    padding 16px
    opacity 1
    visibility visible
    scroll-snap-align start

    &.has-banner-cover .home-center-cover-img
      object-position 70% center

  .home-center-title
    left 16px
    bottom 16px
    width calc(100% - 32px)
    max-width calc(100% - 32px)

    a
      font-size 18px
      pointer-events none

  .home-center-title-tag
    display none

  .home-center-indicators
    display flex
    align-items center
    justify-content flex-start
    gap 6px
    margin-top 8px
    pointer-events none

  .home-center-indicator
    width 6px
    height 6px
    pointer-events auto

    &.active
      width 20px

  .home-center-right
    display none

@media (prefers-reduced-motion: reduce)
  .home-center-content,
  .home-center-cover-img,
  .home-center-indicator,
  .home-center-item
    animation none
    transition none