@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes scrollFadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 60px, 0);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes scrollFadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(90px, 0, 0);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes scrollFadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(-90px, 0, 0);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes underlineGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes scaleFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes floatAround {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg);
  }
  10% {
    opacity: var(--note-opacity, 0.06);
  }
  50% {
    transform: translate(var(--drift-x, 20px), var(--drift-y, -100px)) rotate(10deg);
  }
  90% {
    opacity: var(--note-opacity, 0.06);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--drift-x, 20px) * 1.5),
        calc(var(--drift-y, -100px) * 1.5)) rotate(20deg);
  }
}
@keyframes noteBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--burst-x, 0px)),
        calc(-50% + var(--burst-y, 0px))) scale(0.8) rotate(45deg);
  }
}
@keyframes fadeInSimple {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes staggerReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 25px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.stagger-item,
#news-list > li,
#shop-grid > li,
.shop-grid > li,
#contact-list > li,
.sns-list > li,
#video-list > :scope > div {
  opacity: 0;
  transform: translate3d(0, 25px, 0);
  will-change: transform, opacity;
}
.stagger-item.visible,
.visible#news-list > li,
.visible#shop-grid > li,
.visible.shop-grid > li,
.visible#contact-list > li,
.visible.sns-list > li,
.visible#video-list > :scope > div {
  animation: staggerReveal 0.6s ease-out both;
  animation-delay: var(--stagger-delay, 0s);
}
body.spa-transitioning > *:not(#global-header):not(.background-notes):not(.click-note):not(.global-sns):not(script):not(#menu):not(#menu-btn):not(.spa-loader) {
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
}
html.js-loading body > *:not(#global-header):not(.background-notes):not(.click-note):not(.global-sns):not(script):not(#menu):not(#menu-btn):not(.spa-loader) {
  opacity: 0 !important;
  transition: none !important;
  animation: none !important;
}
body > *:not(#global-header):not(.background-notes):not(.click-note):not(.global-sns):not(script):not(#menu):not(#menu-btn):not(.spa-loader) {
  transition: opacity 0.4s ease;
}
#global-header,
.global-sns,
#menu-btn,
.lang-switch {
  opacity: 1 !important;
  visibility: visible !important;
}

/* SPA Loader */
.spa-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 12px;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

body.spa-transitioning .spa-loader,
html.js-loading .spa-loader {
  opacity: 1;
}

.spa-loader span {
  width: 14px;
  height: 14px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: bounce 0.8s infinite ease-in-out;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.spa-loader span:nth-child(2) {
  animation-delay: 0.15s;
}

.spa-loader span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.animate-on-load {
  opacity: 0;
}
.animate-on-scroll {
  opacity: 0;
  backface-visibility: hidden;
}
.animate-on-scroll.visible {
  opacity: 1;
  will-change: opacity, transform;
}
.animate-on-scroll.visible {
  animation: scrollFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-on-scroll.visible.fade-left {
  animation: scrollFadeInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-on-scroll.visible.fade-right {
  animation: scrollFadeInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-on-scroll.visible.fade-stationary {
  animation: fadeIn 0.8s ease-out both;
}
.animate-delay-0,
.animate-delay-1,
.animate-delay-2,
.animate-delay-3,
.animate-delay-4,
.animate-delay-5 {
  animation: fadeInUp 1s ease-out both;
}
.animate-delay-0 {
  animation-delay: 0s;
}
.animate-delay-1 {
  animation-delay: 0.2s;
}
.animate-delay-2 {
  animation-delay: 0.4s;
}
.animate-delay-3 {
  animation-delay: 0.6s;
}
.animate-delay-4 {
  animation-delay: 0.8s;
}
.animate-delay-5 {
  animation-delay: 1s;
}
.section-title {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #9e6767, #c4a0a0);
  transform: scaleX(0);
  transform-origin: left;
}
.section-title.animate-underline::after {
  animation: underlineGrow 0.8s ease-out both;
  animation-delay: 0.2s;
}
@keyframes slideInLeftFade {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes scaleFadeUpColor {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    filter: grayscale(100%) brightness(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: grayscale(0%) brightness(1);
  }
}
@keyframes slideInLeftFadeColor {
  0% {
    opacity: 0;
    transform: translateX(-30px);
    filter: grayscale(100%) brightness(0.8);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: grayscale(0%) brightness(1);
  }
}
.profile-photo.animate-photo-home img {
  animation: slideInLeftFadeColor 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.profile-photo.animate-photo {
  overflow: hidden;
}
.profile-photo.animate-photo img {
  animation: scaleFadeUpColor 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  will-change: transform, opacity, filter;
}
.background-notes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  contain: layout paint size;
}
.background-notes .note {
  position: absolute;
  font-size: 24px;
  color: #fff;
  animation: floatAround linear both;
  opacity: 0;
  will-change: transform, opacity;
}
.click-note {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  color: #9e6767;
  font-size: 32px;
  animation: noteBurst 1s ease-out both;
  will-change: transform, opacity;
}
.news-item {
  opacity: 0;
}
.news-item.visible {
  animation: fadeInSimple 0.8s ease-out both;
  animation-delay: var(--news-delay, 0s);
}
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease;
}
.page-loader.fade-out {
  opacity: 0;
  pointer-events: none;
}
.animate-fade-in {
  opacity: 0;
  animation: fadeInSimple 0.8s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}