/* Import fonts with display: swap for better performance */
@import '@fontsource/noto-sans-jp/400.css' layer(fonts);
@import '@fontsource/noto-sans-jp/500.css' layer(fonts);
@import '@fontsource/noto-sans-jp/700.css' layer(fonts);
@import '@fontsource/zen-kaku-gothic-new/700.css' layer(fonts);

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 215 14% 20%;
    --card: 0 0% 100%;
    --card-foreground: 215 14% 20%;
    --popover: 0 0% 100%;
    --popover-foreground: 215 14% 20%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 1rem;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Noto Sans JP', sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    text-wrap: balance;
  }

  .glass-card {
    @apply backdrop-blur-sm bg-white/90 hover:bg-white/95 will-change-[background-color] transition-colors duration-300;
  }

  .section-heading {
    @apply text-2xl font-bold mb-4 text-center;
  }

  .slide-content {
    @apply min-h-[85vh] flex items-center justify-center px-4 pt-[10px] md:pt-4 will-change-transform;
  }

  @media screen and (max-width: 767px) {
    .slide-content {
      padding-top: 60px;
    }
  }

  .slide {
    transform: translateX(0);
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    contain: content;
  }

  .slide.active {
    transform: translateX(-100%);
  }

  .optimize-gpu {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    contain: paint;
  }

  .optimize-animation {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }

  .slide-heading {
    @apply text-3xl font-bold mb-6 text-gray-800 h-[72px] flex items-center justify-center;
  }

  .page-indicator {
    @apply fixed top-4 right-4 z-50 bg-white/80 backdrop-blur-sm px-3 py-1.5 rounded-full text-sm font-medium text-primary shadow-sm;
    contain: content;
  }

  .perspective-1000 {
    perspective: 1000px;
  }

  .backface-hidden {
    backface-visibility: hidden;
  }

  .slide-indicator {
    @apply fixed top-20 left-1/2 -translate-x-1/2 z-50 flex gap-1 items-center;
    width: calc(100% - 200px);
    justify-content: center;
  }

  .indicator-dot {
    @apply w-1 h-1 rounded-full transition-all duration-300;
  }

  .indicator-dot.active {
    @apply bg-primary w-2;
  }

  .indicator-dot.inactive {
    @apply bg-gray-300/50;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .content-visibility-auto {
    content-visibility: auto;
  }
}