<script setup lang="ts">
/** 尼泊尔本式双页晕染 + 中间毛边纸层，slot 放标题与装饰 */
</script>

<template>
  <section
    class="relative isolate min-h-[min(52vh,520px)] overflow-hidden border-b border-paper-shadow/50"
    aria-labelledby="nepal-hero-title"
  >
    <div
      class="pointer-events-none absolute inset-y-0 left-0 w-[58%] bg-gradient-to-br from-lokta-blush/90 via-lokta-peach/70 to-transparent opacity-95"
      aria-hidden="true"
    />
    <div
      class="pointer-events-none absolute inset-y-0 right-0 w-[58%] bg-gradient-to-bl from-lokta-teal/85 via-cyan-200/50 to-transparent opacity-95"
      aria-hidden="true"
    />
    <div
      class="pointer-events-none absolute -left-20 top-1/4 h-48 w-48 rounded-full bg-lokta-magenta/25 blur-3xl"
      aria-hidden="true"
    />
    <div
      class="pointer-events-none absolute -right-16 bottom-10 h-56 w-56 rounded-full bg-lokta-deep/20 blur-3xl"
      aria-hidden="true"
    />
    <div
      class="pointer-events-none absolute inset-0 nepal-fiber opacity-[0.35] mix-blend-multiply"
      aria-hidden="true"
    />
    <div
      class="relative z-[1] mx-auto flex max-w-lg flex-col items-center px-4 pb-12 pt-10 text-center sm:px-8 sm:pb-14 sm:pt-12"
    >
      <div
        class="nepal-torn-panel relative w-full max-w-md bg-lokta-cream/95 px-5 py-8 shadow-[0_18px_50px_-20px_rgba(30,53,80,0.35)] ring-1 ring-lokta-deep/10 backdrop-blur-[2px] sm:px-8 sm:py-10"
      >
        <div
          class="pointer-events-none absolute inset-0 nepal-fiber opacity-25"
          aria-hidden="true"
        />
        <div class="relative flex flex-col items-center gap-3 sm:gap-4">
          <slot />
        </div>
      </div>
    </div>
  </section>
</template>
