@layer utilities {

  .scroll-bg {

    background-image: url('../images/scroll-bg.jpg');

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

  }

  .paper-texture {

    background-color: rgba(245, 235, 224, 0.9);

    background-image: url('../images/paper-texture.jpg');

    background-blend-mode: overlay;

    background-size: 500px;

  }

  .scroll-border {

    border-image: url('../images/scroll-bg.jpg') 30 stretch;

  }

  .ink-splash {

    position: relative;

  }

  .ink-splash::after {

    content: '';

    position: absolute;

    width: 120%;

    height: 120%;

    top: -10%;

    left: -10%;

    background-image: url('../images/ink-splash.png');

    background-size: contain;

    background-repeat: no-repeat;

    opacity: 0.1;

    z-index: 0;

    pointer-events: none;

  }

  .btn-jianghu {

    position: relative;

    overflow: hidden;

    transition: all 0.3s ease;

  }

  .btn-jianghu::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);

    transition: all 0.6s ease;

  }

  .btn-jianghu:hover::before {

    left: 100%;

  }

  .title-decoration {

    position: relative;

  }

  .title-decoration::before,

  .title-decoration::after {

    content: '';

    position: absolute;

    height: 1px;

    background-color: #9b2226;

    top: 50%;

    width: 30%;

  }

  .title-decoration::before {

    left: 0;

  }

  .title-decoration::after {

    right: 0;

  }

}



/* Tailwind 配置已移至HTML中的script标签 */