@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;700&family=Shippori+Mincho:wght@500;600;700&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --c-base-top: #0B1020;
    --c-base-bottom: #2B1E36;
    --c-text: #F2F4F8;
    --c-text-muted: #B3A8BE;
    --c-accent-gold: #D6C69B;
    --c-accent-peach: #F9DECD;
    --c-accent-lavender: #B8A2CC;
    --c-accent-purple: #7A5E8E;
    --c-accent-mauve: #B67699;
  }

  body {
    @apply text-[color:var(--c-text)] font-["Noto_Sans_JP", "sans-serif"] antialiased;
    background-color: #0F172A;
  }

  .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  }

  .font-display {
    font-family: "Honoka Mincho", serif;
    letter-spacing: 0.08em;
  }

    .container_06 {
    height: 300px;
    background-color: #a9cbc5;
  }

  .scroll-down_06 {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: serif;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
  }

  .circle-arrow {
    width: 40px;
    height: 40px;
    border: 1px solid #fff;
    border-radius: 50%;
    position: relative;
    margin-bottom:12px;
    margin-inline: auto;
    animation: pulse 2s infinite;
  }

  .circle-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@layer components {
  .card-moon {
    @apply rounded-xl border border-white/10 bg-[rgba(255, 255, 255, 0.06)] backdrop-blur-md p-6 transition-shadow;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), inset 0 0 6px rgba(255, 255, 255, 0.05);
  }

  .card-moon:hover {
    box-shadow: 0 8px 18px rgba(255, 215, 235, 0.15), inset 0 0 8px rgba(255, 255, 255, 0.07);
  }

  .bubble {
    @apply relative rounded-xl text-sm leading-relaxed p-5 shadow-sm;
    background-color: rgba(122, 94, 142, 0.25);
    color: var(--c-accent-peach);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
  }

  .btn-gold {
    @apply rounded-full font-bold px-8 h-12 text-black/80;
    background-color: var(--c-accent-gold);
    box-shadow: 0 0 10px rgba(214, 198, 155, 0.3);
    transition: all 0.3s ease;
  }

  .btn-gold:hover {
    box-shadow: 0 0 18px rgba(214, 198, 155, 0.5);
    filter: brightness(1.1);
  }

}