/* Base Styles */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
}

* {
  max-width: 100%;
}

/* Background Grain Effect */
.bg-grain {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Typography */
.font-serif-jp { font-family: 'Noto Serif JP', serif; }
.font-bodoni { font-family: 'Bodoni Moda', serif; }

/* Custom text color */
.text-content { color: #E2E2E2; }

/* Custom Utilities */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.section-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.gradient-text-gold {
  background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Photo Frame */
.photo-frame {
  position: relative;
  overflow: hidden;
  background: #111;
}

.photo-frame img {
  transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1), filter 1.5s ease;
  filter: grayscale(100%);
}

.photo-frame:hover img {
  transform: scale(1.05);
  filter: grayscale(0);
}

/* All images grayscale by default */
img {
  filter: grayscale(100%);
  transition: filter 1.5s ease;
}

img:hover {
  filter: grayscale(0);
}

/* Custom Nav Active State emulation (optional via JS) */
.nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: #ffd700;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Map Grayscale Hover */
.group:hover iframe {
  filter: grayscale(0%) !important;
}

/* Mobile Menu Styles */
.menu-open .menu-line:nth-child(1) {
  transform: rotate(45deg) translateY(7px);
}

.menu-open .menu-line:nth-child(2) {
  opacity: 0;
}

.menu-open .menu-line:nth-child(3) {
  transform: rotate(-45deg) translateY(-7px);
}

/* Calendar Menu */
#calendarMenu {
  z-index: 10000 !important;
}

/* Make calendar menu visible above the button for mobile/tablet, below for PC */
@media (max-width: 1279px) {
  #calendarMenu {
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-bottom: 0.5rem !important;
    width: calc(100vw - 2rem) !important;
    max-width: 320px !important;
    top: auto !important;
  }
  
  #calendarMenu.opacity-100 {
    opacity: 1 !important;
  }
}

/* --- NEWバッジのアニメーション --- */
@keyframes new-badge-pulse-intense {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
  }
  50% {
    /* アイコンが大きいので、1.2倍くらいまで膨らませると効果的 */
    transform: scale(1.2); 
    /* 黄色い光の輪を少し大きく広げる */
    box-shadow: 0 0 15px 8px rgba(255, 215, 0, 0); 
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
  }
}

.animate-new-badge-intense {
  animation: new-badge-pulse-intense 1.2s infinite ease-in-out;
}

/* カプセル枠用のゆったりした鼓動アニメーション */
@keyframes pulse-gentle-frame {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    /* わずかに拡大し、少しだけ透明度を下げることで「呼吸」を表現 */
    transform: scale(1.04);
    opacity: 0.8;
  }
}

.animate-pulse-gentle {
  /* 2秒かけて1往復するゆったりしたリズム */
  animation: pulse-gentle-frame 2s infinite ease-in-out;
}