:root {
  --color-adzuki: #953c3c;
  --color-beige: #fcfaf2;
  --color-gold: #c5a059;
  --color-charcoal: #333333;
  scroll-behavior: smooth;
}

section {
  scroll-margin-top: 100px;
}


body {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--color-charcoal);
  background-color: var(--color-beige);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  /* Disable Text Selection */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Paper Texture Overlay */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png');
  opacity: 0.2;
  pointer-events: none;
  z-index: 9999;
}

/* Parallax Effect with Blur */
.parallax-bg {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.parallax-bg::before {
  content: "";
  position: absolute;
  top: -10px;
  /* Offset to prevent edges from showing blur */
  left: -10px;
  right: -10px;
  bottom: -10px;
  background-image: inherit;
  background-attachment: inherit;
  background-position: inherit;
  background-repeat: inherit;
  background-size: inherit;
  filter: blur(5px) brightness(0.8);
  z-index: 0;
}

.parallax-bg>* {
  position: relative;
  z-index: 1;
}

/* For browsers that don't support parallax well (like mobile) */
@media screen and (max-width: 768px) {
  .parallax-bg {
    background-attachment: scroll;
  }
}

/* Smooth Reveal Animations */
.rv-reveal {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(10px);
  transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.rv-reveal-active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Staggered Delay */
.rv-delay-1 {
  transition-delay: 0.1s;
}

.rv-delay-2 {
  transition-delay: 0.2s;
}

.rv-delay-3 {
  transition-delay: 0.3s;
}

/* Premium Section Containers - Enhanced for Beauty */
.premium-box {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(149, 60, 60, 0.12);
  border-radius: 4px;
  position: relative;
  box-shadow:
    0 10px 30px -5px rgba(149, 60, 60, 0.05),
    0 4px 10px -2px rgba(149, 60, 60, 0.02),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
}

/* Subtle corner accent for premium look */
.premium-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-top: 2px solid var(--color-adzuki);
  border-left: 2px solid var(--color-adzuki);
  opacity: 0;
  transition: all 0.5s ease;
  pointer-events: none;
}

.premium-box:hover {
  transform: translateY(-8px);
  border-color: rgba(149, 60, 60, 0.3);
  box-shadow:
    0 40px 80px -20px rgba(149, 60, 60, 0.15),
    0 10px 20px -5px rgba(149, 60, 60, 0.05);
}

.premium-box:hover::before {
  opacity: 0.6;
  top: 10px;
  left: 10px;
}


/* Enhanced Section Titles */
.section-title-line {
  position: relative;
  padding-bottom: 24px;
  letter-spacing: 0.15em;
}

.section-title-line::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c5a059, transparent);
}

.section-title-line::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 1px;
  background: #c5a059;
}

/* Floating Ornament - Fixed to not block clicks */
.bg-ornament {
  position: relative;
  z-index: 1;
}

.bg-ornament::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(149, 60, 60, 0.03) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: -1;
}

/* Shimmer Button Extension */
.btn-premium {
  transition: all 0.4s ease;
}

.btn-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: all 0.6s ease;
}

.btn-premium:hover::before {
  left: 100%;
}

.btn-premium:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(149, 60, 60, 0.2);
}

/* Image Hover Zoom - Enhanced with delicate border */
.img-zoom-container {
  overflow: hidden;
  border: 1px solid rgba(149, 60, 60, 0.1);
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.1);
  background-color: white;
}

.img-zoom-container img {
  transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.img-zoom-container:hover img {
  transform: scale(1.08);
}


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

/* Glassmorphism CTA */
.glass-cta {
  background: rgba(149, 60, 60, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   GLightbox Customization (Professional Fix)
   ========================================================================== */

/* 1. Center alignment fix */
.glightbox-container {
  z-index: 100000 !important;
  /* Extremely high to be above everything */
}

/* Ensure the background overlay is visible and centered */
.glightbox-container .gcontainer {
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure images within are properly sized and centered */
.glightbox-container .gslide-image img {
  max-width: 90vw !important;
  max-height: 85vh !important;
  object-fit: contain !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
  margin: auto !important;
}

/* 2. Hide extra icons and fix close button */
/* Ensure only the close icon is visible and properly styled */
.glightbox-container .gclose,
.glightbox-container .gnext,
.glightbox-container .gprev {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.glightbox-container .gclose:hover,
.glightbox-container .gnext:hover,
.glightbox-container .gprev:hover {
  background-color: var(--color-adzuki) !important;
  transform: scale(1.1);
}

/* Specifically remove potential extra icons or pseudo-elements causing the '+' icon */
.glightbox-container .gclose::before,
.glightbox-container .gclose::after {
  display: none !important;
}

/* Center the close icon (X) */
.glightbox-container .gclose svg {
  width: 24px !important;
  height: 24px !important;
}

/* 3. Navigation Arrows Appearance */
.glightbox-container .gnext,
.glightbox-container .gprev {
  width: 60px !important;
  height: 60px !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(5px) !important;
}

.glightbox-container .gnext:hover,
.glightbox-container .gprev:hover {
  background-color: var(--color-adzuki) !important;
  border-color: var(--color-adzuki) !important;
}

.glightbox-container .gnext svg,
.glightbox-container .gprev svg {
  width: 30px !important;
  height: 30px !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.glightbox-container .gnext svg path,
.glightbox-container .gprev svg path {
  fill: white !important;
}

/* 4. Enhanced Close Button */
.glightbox-container .gclose {
  width: 50px !important;
  height: 50px !important;
  top: 20px !important;
  right: 20px !important;
}

.glightbox-container .gclose svg path {
  fill: white !important;
}

.mobile-only {
  display: none;
}

@media screen and (max-width: 768px) {

  .glightbox-container .gnext,
  .glightbox-container .gprev {
    width: 40px !important;
    height: 40px !important;
  }

  .mobile-only {
    display: block;
  }
}