/*
Theme Name: QINO
Description: 木の使いみちに、驚きを。地域共創プロジェクト QINO のWordPressテーマ
Version: 1.0
Author: QINO Team
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

* {
  font-family: 'Noto Sans JP', sans-serif;
}

/* Hero text styling for sparkles effect */
.hero-text-sparkles {
  font-weight: 900;
  text-shadow: 
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(255, 255, 255, 0.6),
    0 0 30px rgba(255, 255, 255, 0.4),
    2px 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.02em;
  position: relative;
}

/* Hero text styling for bold, impactful look */
.hero-text {
  font-weight: 900;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.02em;
}

/* Vertical text writing mode */
.writing-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom backdrop blur for better browser support */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Custom animation for scroll indicator */
@keyframes float {
  from { transform: translateY(0); }
  to   { transform: translateY(-20px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Stars twinkle animation */
@keyframes twinkle {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.stars {
  animation: twinkle 2s infinite ease-in-out;
}

/* Cloud float animation */
.cloud {
  animation: float 10s infinite alternate ease-in-out;
}

/* Marquee animation */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

.animate-marquee {
  animation: marquee 40s linear infinite;
}

/* Looping marquee animation for features */
@keyframes marquee-loop {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

.animate-marquee-loop {
  animation: marquee-loop 30s linear infinite;
}

/* Glowing text effect for No.1-4 */
.glow-text {
  text-shadow: 
    0 0 5px rgba(255, 255, 255, 0.8),
    0 0 10px rgba(255, 255, 255, 0.6),
    0 0 15px rgba(255, 255, 255, 0.4),
    0 0 20px rgba(255, 255, 255, 0.2);
  animation: glow-pulse 2s ease-in-out infinite alternate;
}

@keyframes glow-pulse {
  from {
    text-shadow: 
      0 0 5px rgba(255, 255, 255, 0.8),
      0 0 10px rgba(255, 255, 255, 0.6),
      0 0 15px rgba(255, 255, 255, 0.4),
      0 0 20px rgba(255, 255, 255, 0.2);
  }
  to {
    text-shadow: 
      0 0 8px rgba(255, 255, 255, 1),
      0 0 15px rgba(255, 255, 255, 0.8),
      0 0 25px rgba(255, 255, 255, 0.6),
      0 0 35px rgba(255, 255, 255, 0.4);
  }
}

/* Glowing icon effect */
.glow-icon {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
  animation: glow-pulse-icon 3s ease-in-out infinite alternate;
}

@keyframes glow-pulse-icon {
  from {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
  }
  to {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
  }
}

/* Glowing button effect */
.glow-button {
  box-shadow: 
    0 0 10px rgba(255, 255, 255, 0.5),
    0 0 20px rgba(255, 255, 255, 0.3),
    0 0 30px rgba(255, 255, 255, 0.1);
  animation: glow-pulse-button 2s ease-in-out infinite alternate;
}

@keyframes glow-pulse-button {
  from {
    box-shadow: 
      0 0 10px rgba(255, 255, 255, 0.5),
      0 0 20px rgba(255, 255, 255, 0.3),
      0 0 30px rgba(255, 255, 255, 0.1);
  }
  to {
    box-shadow: 
      0 0 15px rgba(255, 255, 255, 0.7),
      0 0 30px rgba(255, 255, 255, 0.5),
      0 0 45px rgba(255, 255, 255, 0.3);
  }
}

/* Fast scrolling animation */
@keyframes scroll-fast {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.animate-scroll-fast {
  animation: scroll-fast 20s linear infinite;
}

/* Subtle pulse animation */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.animate-pulse-subtle {
  animation: pulse-subtle 2s ease-in-out infinite;
}

/* Custom scrollbar for testimonials */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Japanese text styling */
.text-japanese {
  font-feature-settings: 'palt' 1;
  letter-spacing: 0.1em;
}

/* Responsive text sizing for Japanese characters */
@media (max-width: 640px) {
  .text-4xl {
    font-size: 2rem;
    line-height: 1.2;
  }
  .hero-text {
    font-size: 2rem;
    line-height: 1.2;
  }
  .hero-text-sparkles {
    font-size: 2.5rem;
    line-height: 1.1;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .text-6xl {
    font-size: 3.5rem;
    line-height: 1.1;
  }
  .hero-text {
    font-size: 3.5rem;
    line-height: 1.1;
  }
  .hero-text-sparkles {
    font-size: 4rem;
    line-height: 1.1;
  }
}

@media (min-width: 1025px) {
  .hero-text {
    font-size: 4.5rem;
    line-height: 1.1;
  }
  .hero-text-sparkles {
    font-size: 5.5rem;
    line-height: 1.1;
  }
}

@media (min-width: 1280px) {
  .hero-text {
    font-size: 5rem;
    line-height: 1.1;
  }
  .hero-text-sparkles {
    font-size: 6rem;
    line-height: 1.1;
  }
}

/* Smooth transitions for all interactive elements */
* {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Custom glass morphism effect */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}