/* 
  -----------------------------------------------
  Theme Name: 金太郎 西八王子北口店 LP
  Description: モダンで洗練された居酒屋LPデザイン
  ----------------------------------------------- 
*/

/* 
  1. Base & Reset extensions
*/
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

@keyframes fadeInPage {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

body {
  /* Prevent horizontal scroll on mobile */
  overflow-x: hidden;
  width: 100%;
  position: relative;
  -webkit-font-smoothing: antialiased;
  animation: fadeInPage 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

img {
  max-width: 100%;
  height: auto;
}

/* 
  2. Margin Bottom (Spacing)
*/
.section-padding {
  padding-top: 70px;
  padding-bottom: 70px;
}

/* 
  3. Header & Navigation Animations
*/
#header {
  transform: translateY(0);
}

#header.scrolled-down {
  transform: translateY(-100%);
}

#header.scrolled-up {
  transform: translateY(0);
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Hamburger Icon Animation */
#hamburger-btn.active .line-1 {
  transform: translateY(8px) rotate(45deg);
}

#hamburger-btn.active .line-2 {
  opacity: 0;
}

#hamburger-btn.active .line-3 {
  transform: translateY(-8px) rotate(-45deg);
}

/* SP Fullscreen Menu Animation */
#sp-menu {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#sp-menu.active {
  opacity: 1;
  pointer-events: auto;
}

.menu-link {
  position: relative;
  transition: color 0.3s;
}

.menu-link:hover {
  color: #ff0000;
}

/* 
  4. FV (First View) Swiper custom strokes
*/
.perspective-container {
  perspective: 1200px;
}

/* Base style for all slides */
.neon-swiper .swiper-slide {
  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.8s ease;
  transform: scale(0.85) translateY(20px) !important;
  opacity: 0.8;
}

/* Inner picture frame base */
.neon-swiper .slide-inner {
  border: 10px solid transparent;
  border-image: linear-gradient(to right, #ff0000, #f5c51d) 1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.8s ease, box-shadow 0.8s ease;
  position: relative;
}

/* Default non-active logic */
.neon-swiper .swiper-slide {
  transform: scale(1) translateY(0) !important;
}

/* Wide (866px) Slides Logic - ALWAYS 0 deg rotation */
/* Slide specific logic - tilted frames like AsiaX */
.neon-swiper .swiper-slide {
  transition: transform 0.6s cubic-bezier(0.2, 0, 0.2, 1) !important;
  opacity: 0.6;
}

.neon-swiper .swiper-slide.slide-wide {
  transform: rotate(-3deg) !important;
}

/* Narrow (507px) Slides Logic - Tilt the opposite way */
.neon-swiper .swiper-slide.slide-narrow {
  transform: rotate(3deg) !important;
}

.neon-swiper .swiper-slide-active {
  transform: scale(1.05) rotate(0deg) !important;
  opacity: 1;
}

/* Active slide specific styling - Full brightness and glow */
.neon-swiper .swiper-slide-active {
  opacity: 1;
  z-index: 10;
}

.neon-swiper .swiper-slide-active .slide-inner {
  box-shadow:
    0 0 20px rgba(255, 0, 0, 0.4),
    0 0 40px rgba(245, 197, 29, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.1);
}

/* Prevent image scale zooming to let the slider transformation be the star */
.neon-swiper .swiper-slide img {
  transform: scale(1);
}

/* 
  5. Asymmetric Layout Utilities
*/
.layout-asymmetry {
  align-items: center;
}

/* Ensure broken grid texts overlap images nicely on PC */
@media (min-width: 1024px) {
  #about .bg-white\/95 {
    box-shadow: 20px 20px 0px 0px #f5c51d;
  }
}

/* 
  6. Menu/Recommend Parallax
*/
.parallax-bg {
  /* Tailwind handles bg-fixed and background-image. */
  transform: translateZ(0);
  /* Hardware accel */
  will-change: transform;
}

/* 
  7. Gallery Luminous Lightbox Customization 
*/
.gallery-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

.lum-lightbox {
  background: rgba(0, 0, 0, 0.9) !important;
  z-index: 1000 !important;
}

/* 
  8. Scroll to Top / CTA sticky 
*/
#to-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 
  9. Misc Fixes
*/
/* Special override for mobile padding on elements using .p-8 */
@media (max-width: 767px) {
  .p-8 {
    padding: 40px 10px !important;
  }
}

/* Avoid text selection on icons/buttons */
button,
a {
  -webkit-tap-highlight-color: transparent;
}

/* 
  10. Scroll Animations
*/
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.fade-in {
  opacity: 0;
  transition: opacity 1.2s ease-out;
  will-change: opacity;
}

.fade-in-up.is-visible,
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay classes for staggered items */
.delay-100 {
  transition-delay: 100ms;
}

.delay-200 {
  transition-delay: 200ms;
}

.delay-300 {
  transition-delay: 300ms;
}

.delay-400 {
  transition-delay: 400ms;
}

.delay-500 {
  transition-delay: 500ms;
}