:root { 
  --black: #1F1F1F;
  --black-1: #151515; 
  --gray: #A6A6A6;
  --gray-1: #343434;
  --gray-2: #555;
  --gray-3: #828282;
  --gray-4: #929292;


    
  --yellow: #FFE159;
  --red: #C01D2C;
  --yellow-gold: #D9A333;
  --neutral: #EFE7D2; 

  --satoshi: Satoshi;
  --montserrat: Montserrat;

  --text-l: 24px;
  --text-m: 20px;
  --text-s: 18px;
  --text-s--line-height: 1.25;
}

@font-face {
  font-family: 'YuMincho';
  src: url('../font/YuMincho/yu-mincho-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../font/Satoshi_Complete/Fonts/TTF/Satoshi-Variable.ttf') format('truetype'); 
} 

@font-face {
  font-family: "Montserrat";
  src: url('../font/Montserrat/Fonts/TTF/Montserrat-VariableFont_wght') format('truetype'); 
} 



html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; 
  font-family: 'YuMincho', sans-serif;
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

.main {
  height: 100vh;
  overflow-y: scroll; 
  overflow-x: hidden;  
  scroll-behavior: smooth;
} 


.main-home {
  height: 100vh;
  overflow: auto;   /* must be scrollable */
  scroll-behavior: smooth;
  

  /* Firefox & IE */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.main-home::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Firefox */
.main-home {
  scrollbar-width: none;
}

/* Hide scrollbar for IE/Edge (legacy) */
.main-home {
  -ms-overflow-style: none;
}

/* Hide scrollbar for Chrome, Safari, Edge */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Firefox */
.no-scrollbar {
    scrollbar-width: none;
}

/* Hide scrollbar for IE/Edge Legacy */
.no-scrollbar {
    -ms-overflow-style: none;
}

a {
  text-decoration: none;
  color: white;
}

input, textarea {
  background-color: #B9B9B9;
  border: none
} 

.text-l {
  font-size: var(--text-l);
}

.text-m {
  font-size: var(--text-m);
}

.text-s {
  font-size: var(--text-s);
  line-height: var(--text-s--line-height);
}

/* Font Color */
/* Color */
.text-neutral {
    color: var(--neutral);
}

/* Border */
.bordered-neutral { 
    border-radius: 1rem;
    border: 1px solid rgba(239, 231, 210, 0.2); /* 20% opacity of --neutral */
}

.text-gray {
  color: var(--gray);
}

.text-gray-1 {
  color: var( --gray-1);
}

.text-gray-2 {
  color: var( --gray-2);
}

.text-gray-3 {
  color: var( --gray-3);
}

.text-gray-4 {
  color: var( --gray-4);
}

.text-red-1 {
  color: var(--red);
}

.text-yellow {
  color: var(--yellow);
}

.text-yellow-gold {
  color: var(--yellow-gold);
}

.text-neutral {
    color: var(--neutral);
}

/* Border */
.bordered-neutral { 
  border-radius: 1rem;
  border: 1px solid rgba(239, 231, 210, 0.2); /* 20% opacity of --neutral */
}

/* Font */
.font-yumincho {
  font-family: 'YuMincho', sans-serif;
}  

.font-satoshi {
  font-family: var(--satoshi), sans-serif;
}

.font-montserrat {
  font-family: var(--montserrat), sans-serif;
}

.backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  /* margin-left: -15px;  */
  transition: opacity 0.3s ease-out;
  z-index: 50;
 
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
} 

.home-gradiant {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.5s, background-color 0.3s;
  background: linear-gradient(
    to bottom, 
    rgba(0, 0, 0, 0.7), 
    rgba(0, 0, 0, 0.1) 
  );
}

.meat-blur {
  opacity: 0;
  /* filter: blur(50px); */
  transition: all 1.2s ease-out;
}


.meat-blur.show {
  opacity: 1;
  /* filter: blur(0px); */
}

.text-blur {
  opacity: 0;
  filter: blur(8px);
  transition: all 1.2s ease-out;
  margin-left: -100px;
}

.text-blur.show {
  opacity: 1;
  filter: blur(0px);
  margin-left: 0px;
}




#backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  transition: opacity 0.5s, backdrop-filter 0.3s, background-color 0.3s;
  z-index: 1;
}

#meat{
    position: relative;
    z-index: 2;
}

#footer {
    position: relative;
    z-index: 99;
}

/* Background */
.bg-red {
    background-color: var(--red);
} 

.bg-black{
  background-color: var(--black);
}

.bg-black-1 {
  background: var(--black-1);
}

.bg-red-1 {
  background: var(--red);
}


/* Background */
.bg-inquiry {
    background: url("../img/bg/bg-inquiry.png") top center / 100% auto; 
     background-size: cover; 
}

.bg-inquiry-meat {
    position: relative;
    background: url("../img/meat/inquiry-meat.png") no-repeat top center; /* align top horizontally centered */
    background-size: cover;
    overflow: hidden;
}

.bg-inquiry-meat::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.bg-coming-soon {
  background: url("../img/bg/bg-coming-soon.png") no-repeat top center / 100% auto;  
    background-size: cover;
}

.bg-main {
  background: url("../img/bg/bg-main-one.png") top center / 100% auto;  
    background-size: cover;
}

.bg-main-two {
  background: url("../img/bg/bg-main-two.png") top center / 100% auto;  
  background-size: cover;
}

.bg-main-three {
  background: url("../img/bg/bg-main-three.png") top center / 100% auto;  
  background-size: cover;
}

.bg-main-meat {
  background: url("../img/bg/home-bg-meat.png") no-repeat top center / 100% auto;  
}

.bg-product {
  background: url("../img/bg/bg-product.png") no-repeat top center / 100% auto;  
  background-size: cover;
} 
.bg-square {
  background: url("../img/bg/bg-square.png") no-repeat center center;
  background-size: 100% 100%;
}

.bg-about {
  position: relative;
  background: url("../img/bg/bg-about.png") no-repeat top center / 100% auto; 
  background-size: cover;
  transform: scale(1);
  transition: transform 1.2s ease-out; 
}

.bg-why {
  position: relative;
  background: url("../img/bg/bg-why.png") no-repeat top center / 100% auto;
  background-size: cover;
  transform: scale(1);
  transition: transform 1.2s ease-out;  
}


.bg-about-sp { 
  background: url("../img/bg/bg-about.png") no-repeat top center / 100% auto;  
}

.bg-why-sp { 
  background: url("../img/bg/bg-why.png") no-repeat top center / 100% auto; 
}

.bg-about-sp,
.bg-why-sp {
  position: relative;
  background-size: cover;
  background-position: center;
   transition: opacity 2.5s ease-in-out;
}

.bg-about-sp.fade-out,
.bg-why-sp.fade-out {
  opacity: 0;
}

.bg-about-sp.fade-in,
.bg-why-sp.fade-in {
  opacity: 1;
}


.bg-about-img {
  position: relative;
  background: url("../img/bg/bg-about.png") no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 100%;
  transform: scale(1);
  transition: transform 1.2s ease-out;
}

.bg-why::before, .bg-about::before, .bg-about-img::before, .bg-why-sp::before, .bg-about-sp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);
  z-index: 1;
}

#bg-about {
    /* Ensure transform works and animates smoothly */
    transition: transform 0.2s ease-out, opacity 1.2s ease-in-out;
    transform-origin: center center; /* zoom from center */
}
#bg-why {
    transition: opacity 1.2s ease-in-out;
} 

.bg-footer {
  background: url("../img/bg/bg-footer.png") top center / 100% auto;  
  background-size: cover;
}


/* Product */
#product-menu {
  position: relative;
  /* z-index: 100; */
}

#underline {
  width: 90px; 
  transform: translateX(140px);
} 

.active-section {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.line-container {
    position: relative;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 400px;
  }

/* Horizontal line */
.line-container::before {
  content: '';
  position: absolute;
  top: 50%; 
  left: 0;
  right: 0;
  height: 1px;
  background: white;
  z-index: 0;
}

/* Circles */
.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  position: relative;
  z-index: 1; /* above the line */
} 

#ribeye-roll, #striploin, #seasoned-wagyu {
  transition: opacity 0.5s ease;
} 

#premium-chicken-one, #premium-chicken-two {
  transition: opacity 0.5s ease;
}

/* Carousel */  
#wagyu-carousel, #chicken-carousel, #seafood-carousel {
 position: relative; 
}

#wagyu-one, #wagyu-two, #wagyu-three,
#chicken-one, #chicken-two, 
#seafood-one, #seafood-two, #seafood-three {
  transition: transform 1.5s ease, opacity 1.5s ease;
}

.hidden-wagyu, .hidden-chicken, .hidden-seafood {
  opacity: 0;
  transform: translateX(100%); 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0; 
}

.flex-wagyu, .flex-seafood, .flex-seafood {
  opacity: 1;
  transform: translateX(0);
  position: relative;
  pointer-events: auto;
  z-index: 10;  
}
 
.slide-right-show {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1s ease, opacity 1s ease;
  position: relative;
  z-index: 20;
}

.slide-right-hide {
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 1s ease, opacity 1s ease;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

   
/* About Slider */

.slider-container { 
    overflow: hidden;
    cursor: grab; 
    transition: width 0.3s ease; 
}

.slider {
  display: flex;
  gap: 40px;
  transition: transform 0.3s ease;
}

.slider img {
  -webkit-user-drag: none;
  pointer-events: none; 
}


/* Card */
.card { 
    min-width: 400px; 
    background: white;
    border-radius: 15px;  
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center; 
    user-select: none;
}   

.active-card {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.integrity-position {
  transform: translate(-119%, -100%) translate(-180px, 160px);
}

.sustainability-position {
  transform: translate(-5%, -23%) translate(200px, -200px);
}

.excellence-position {
  transform: translate(22%, -83%) translate(220px, 160px);
}

.sp-only {
  display: none;
}

.pc-only { 
  display: block;
}



@media (max-width: 1536px) { 
  .integrity-position {
    transform: translate(-105%, -85%) translate(-180px, 160px);
  }

  .sustainability-position {
    transform: translate(-5%, 32%) translate(200px, -200px);
  }

  .excellence-position {
    transform: translate(-8%, -74%) translate(220px, 160px);
  }
}
 

@media (max-width: 1024px) {
  .sp-only {
    display: block !important;
  }

  .pc-only { 
    display: none !important;
  }
}

@media (max-width: 900px) {
  .hero-m {
    display: block !important;
  }

  .hero-d { 
    display: none !important;
  }
}

.hero-m {
  display: none;
}

.hero-d { 
  display: block;
}

 /*Product  */
#prev circle,
#prev path,
#next circle,
#next path {
  transition: stroke 0.3s ease; /* Smooth color transition */
}

#prev.disabled, #next.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

#prev.disabled svg, #next.disabled svg {
    cursor: not-allowed;
} 
 
#cursor-about,
#cursor-why {
    position: fixed;
    width: 200px;
    height: 200px;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1);
    z-index: 30;

    opacity: 0;
    transition: transform 0.1s ease-out, opacity 0.1s ease-in-out; 
    will-change: transform, opacity;
}

.cursor-center-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    pointer-events: none;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    will-change: opacity, transform;
    z-index: 0;
    opacity: 0;
}

.cursor-center-bg.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
}

.cursor-center-bg.hide {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
}


/* Home */
  #wagyu-logo{
    width: 15rem;
    height: auto;
  }

  .animation-logo-fade-up{
    animation: logoFadeUp 0.5s ease-in-out;
  }

  @keyframes logoFadeUp {
    from {
      margin-top: 0px;
      width: 15rem;
      margin-left: 0px;
    }
    to{
      margin-top: -900px;
      width: 5rem;
      margin-left: -89%;
    }
  }

#meat-content{
  z-index: 2;
  opacity: 0;
  transition: all 0.5s ease-in-out; 
}

.backdrop {
  position: fixed;        /* so it covers the screen */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 3;            /* above other content */
}

#darkb{
  height: 100vh;
  width: 100vw;
  z-index: 10;
  position: fixed;
  top: 0;
  z-index: 1;
  background-color: #00000068;
}



/* About */ 
#lead-content, #wagyu-content-slider, #lead-content-sp, #seafood-prod-content-sp, #wagyu-prod-content-sp,
#wagyu-details-content-sp   {
    position: relative;
    overflow: hidden; 
    /* min-height: 400px;  */
}

/* Each slide */
.lead-slide, .wagyu-slide-prod, .lead-slide-sp, .seafood-prod-slide-sp, .wagyu-prod-slide-sp,
.wagyu-details-slide-sp  {
    position: absolute;
    inset: 0;
    width: 100%;
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.8s ease;
}
 
.lead-active, .wagyu-slide-active, .lead-active-sp, .seafood-prod-active-sp, .wagyu-prod-active-sp,
.wagyu-details-active-sp {
    transform: translateX(0);
    opacity: 1;
    z-index: 2;
}
 
.lead-right, .wagyu-slide-right, .lead-right-sp, .seafood-prod-right-sp, .wagyu-prod-right-sp,
.wagyu-details-right-sp  {
    transform: translateX(100%);
    opacity: 0;
    z-index: 1;
}
 
.lead-left, .wagyu-slide-left, .lead-left-sp, .seafood-prod-left-sp, .wagyu-prod-left-sp,
.wagyu-details-left-sp {
    transform: translateX(-100%);
    opacity: 0;
    z-index: 1;
}    


#wagyu-details-prev-sp,
#wagyu-details-next-sp {
  top: 50%; /* remove extra mt-36 */
  transform: translateY(-50%);
}

button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#product-list, #about-why, .footer {
  z-index: 10;
}

.bg-main-three {
  position: relative;
  z-index: 99;
}

/* header */

#header {
  background-color: transparent !important;
  transition: background-color 0.4s ease-in-out;
  z-index: 100 !important;
}

#header.active-header {
  background-color: rgba(0, 0, 0, 0.3) !important;
  outline: 1px solid rgba(0, 0, 0, 0.4) !important;
}

  .lead-slide-sp {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        transition: transform 0.5s ease;
    }

    /* First slide stays in place */
    .lead-active-sp {
        transform: translateX(0%);
    }

    /* All other slides start OFF-SCREEN at the right edge */
    .lead-right-sp {
        transform: translateX(100%);
    }

    /* When slide becomes active: bring it into view */
    .lead-show {
        transform: translateX(0%);
    }