@charset "utf-8";

header.top{ background:none; box-shadow:none; }

body{ background:url(../images/top/mainbg.webp) #F5F2EE no-repeat top center; background-size:110% auto; background-blend-mode: multiply; }

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

.about {
  position: relative;
  color: #fff;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  padding: 6rem 4rem;
  background:var(--color-gold);
  width: 95%; margin-left: 5%;
}

.footer {
  background: #333;
  color: #aaa;
  text-align: center;
  padding: 2.4rem;
  font-size: 1.2rem;
}

/* =========================
   Hero slider
========================= */
.hero {
  margin: 1rem auto 0;
  padding: 0 0 1rem;
}
.hero-images { overflow: hidden; animation: slide-fade 1.2s ease forwards; }

.slider-track {
  display: flex;
  width: calc(100vw * 4);
  animation: slide-loop 55s linear infinite;
  will-change: transform;
}

.slider-track img {
  flex-shrink: 0;
  width: 100vw; 
  display: block;
}

.is-modal-open .slider-track {
  animation-play-state: paused;
}

@keyframes slide-loop {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes slide-fade {
  from { opacity: 0; transform: translateX(1rem); }
  to { opacity: 1; transform: translateX(0); }
}

/* =========================
   Hero text
========================= */
.hero-flex{
  display: flex; justify-content: center; gap: 3rem; align-items: center; margin: 2rem auto 4rem; width: 95%; 
}
.hero-text {
  font-weight:600;
  font-size: 280%; line-height: 1.4;
}
.hero-text p{ animation: fade-up 1.2s .8s ease forwards; opacity: 0; }
.hero-text h2{ font-weight:600; animation: fade-up 1.2s 1.2s ease forwards; opacity: 0; }
.hero-text h2 span{ color:var(--color-gold2); }

#nav ul > li > a { padding: 2rem 0 2rem 4rem; position:relative; }
#nav{ box-shadow:0 0 2rem rgba(0, 0, 0, .2); }


@keyframes fade-up {
  from { opacity: 0; transform: translateX(-2rem); }
  to { opacity: 1; transform: translateX(0); }
}

/* =========================
   About
========================= */

.about-text h3{ font-size:180%; font-weight:600; margin-bottom:1rem; }
.about-text p{ margin-bottom:1rem; line-height:1.8; }
.about img { width: 100%; }

/* =========================
   Button
========================= */
.tbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin: 2.4rem auto 0;
  padding: 1.2rem 2.8rem;
  background: #fff;
  color: #7a6a00;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
  text-align: center;
  font-weight: 500;
}

.tbtn::after { content: "→"; transition: transform 0.3s ease; }

.tbtn:hover { background: #f3f0e0; transform: translateX(0.4rem); }
.tbtn:hover::after { transform: translateX(0.4rem); }

/* =========================
   Animation (role / state)
========================= */
/* role */
.js-fade {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* state */
.is-show { opacity: 1; transform: translateY(0); }
.about-text.is-show { transition-delay: 0.2s; }

/* =========================
   Responsive
========================= */
@media (max-width: 1550px) {
  #nav { padding-left:1rem; }
  #nav ul { gap:1rem; }
  #nav ul > li { padding-right:1rem; }
  .hero-flex{ gap: 1rem; }
  .hero-text { font-size:220%;}
}
@media (max-width: 1024px) {
  .hero { padding-bottom:0; }
  .hero-text { font-size:180%;}
  .about { grid-template-columns: 1fr; }
}
@media (max-width: 810px) {
  body{ background-size:150% auto; }
  .slider-track {width: calc(170vw * 4); animation-duration: 50s; }
  .slider-track img { width: 170vw; }
  .hero-flex{ flex-direction:column; gap:2rem; width:100%; }
  #nav ul > li > a { padding: 1rem 0 1rem 4rem; }
  .about { gap: 2rem; padding: 3rem 2rem; width:100%; margin-left:0; }
  .about-text h3{ font-size:160%;}
}
@media (max-width: 480px) {
  #nav { padding:0; width:100%; }
  #nav ul { gap: 1.5rem; }
  #nav ul > li { padding-right: 1.5rem; }

}

/* =========================
   Motion reduce
========================= */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}