/* -----------------
   FONTS
------------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* --------------
   VARIABLES
--------------*/
:root{
  --main-color: #eaa023;
  --dark: #0c1023;
  --dark-light: #191f3a;
  --white: #ffffff;
  --white-light: #c8c8c8;
  --shadow: 0 0 15px rgba(0,0,0,0.25);
  --cursive-font: 'DejaVu Sans Mono', monospace;
  scroll-behavior: smooth;
}

/* ------------------
   GLOBAL
------------------*/
*{ margin:0; padding:0; box-sizing:border-box; outline:none; }
::before,::after{ box-sizing:border-box; }

body{
  font-size:16px; line-height:1.5; -webkit-tap-highlight-color:transparent;
  font-family:'Poppins',sans-serif; font-weight:300; color:var(--white-light);
  background:#000; /* prevents flash on dark */
}

img{ vertical-align:middle; max-width:100%; }
a{ text-decoration:none; }
ul{ list-style:none; }

h1{ font-weight:700; color:var(--white); }
h2{ font-weight:600; color:var(--white); }
h3,h4,h5,h6{ font-weight:500; color:var(--white); }
p{ font-size:16px; }

.container{ max-width:1170px; margin:auto; }
.row{ display:flex; flex-wrap:wrap; }
.justify-content-between{ justify-content:space-between; }
.align-items-center{ align-items:center; }
.min-vh-100{ min-height:100vh; }
.sec-padding{ padding:80px 0; }
section{ overflow:hidden; }

/* ------------------
   SECTION TITLE
------------------*/
.section-title{ width:100%; padding:0 15px; text-align:center; margin-bottom:60px; }
.section-title h2{ font-size:35px; text-transform:capitalize; }
.section-title h2::before{
  content:attr(data-title); display:block; font-size:24px; color:var(--main-color);
  font-family:var(--cursive-font); font-weight:400; text-transform:capitalize;
}

/* ------------------
   BUTTONS
------------------*/
.btn{
  display:inline-block; padding:10px 30px; background:transparent; border-radius:30px;
  text-transform:capitalize; font-weight:500; transition:all .3s ease; font-size:16px;
  cursor:pointer; font-family:inherit; color:var(--main-color); line-height:1.5; user-select:none; border:none;
}
.btn-default{ border:2px solid var(--main-color); }
.btn-default:hover{ color:var(--white); background:var(--main-color); }

/* ------------------
   KEYFRAMES
------------------*/
@keyframes zoomInOut{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.1);} }
@keyframes spin01{ 0%{transform:rotate(0);} 100%{transform:rotate(360deg);} }
@keyframes pageLoader{ 0%,100%{transform:translateX(-50px);} 50%{transform:translateX(50px);} }
@keyframes cloudMove{ 0%{transform:translateX(0);} 100%{transform:translateX(120vw);} }
@keyframes planeFly{ 0%{ transform:translateX(-240px);} 100%{ transform:translateX(120vw);} }
@keyframes planeBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
@keyframes bannerSwing{ 0%,100%{ transform:rotate(-2deg);} 50%{ transform:rotate(2deg);} }

/* --------------------
   PAGE LOADER
---------------------*/
.page-loader{
  position:fixed; inset:0; background-color:var(--dark); z-index:999; transition:all .6s ease;
}
.page-loader.fade-out{ opacity:0; }
.page-loader::before{
  content:''; position:absolute; height:4px; width:100px; background-color:var(--main-color);
  left:calc(50% - 50px); top:calc(50% - 2px); animation:pageLoader 1s linear infinite;
}

/* ------------
   HEADER
-------------*/
.header{
  padding:12px 0; position:fixed; left:0; top:0; z-index:99; width:100%;
}
.header::before{
  content:''; position:absolute; inset:0; background-color:var(--dark-light);
  box-shadow:var(--shadow); z-index:-1; transition:transform .5s ease; transform:translateY(-100%);
}
.header.sticky::before{ transform:translateY(0%); }

.header .logo{ width:100px; height:auto; }
.header .nav-toggler{
  height:34px; width:44px; margin-right:15px; cursor:pointer; border:none; background:transparent;
  display:flex; align-items:center; justify-content:center;
}
.header .nav-toggler.active{ position:absolute; right:0; z-index:1; transition:all .5s ease; transform:translateX(-200px); }
.header .nav-toggler span{ height:2px; width:30px; display:block; background-color:var(--white); position:relative; }
.header .nav-toggler.active span{ background-color:transparent; transition:background-color .5s ease; }
.header .nav-toggler span::before,
.header .nav-toggler span::after{
  content:''; position:absolute; left:0; top:0; height:100%; width:100%; background-color:var(--white);
}
.header .nav-toggler span::before{ transform:translateY(-8px); }
.header .nav-toggler.active span::before{ transform:rotate(45deg); transition:transform .5s ease; }
.header .nav-toggler span::after{ transform:translateY(8px); }
.header .nav-toggler.active span::after{ transform:rotate(-45deg); transition:transform .5s ease; }

.header .nav{
  position:fixed; right:0; top:0; height:100%; width:280px; background-color:var(--dark-light);
  box-shadow:var(--shadow); overflow-y:auto; padding:80px 0 40px; transition:transform .5s ease; transform:translateX(100%);
}
.header .nav.open{ transform:translateX(0%); }
.header .nav ul li a{
  display:block; font-size:25px; color:var(--white); padding:10px 30px; text-transform:capitalize; transition:color .3s ease;
}
.header .nav ul li a:hover{ color:var(--main-color); }

/* ------------------
   HOME
------------------*/
.home-section{ position:relative; overflow:hidden; }
.home-section::before{
  content:''; position:absolute; inset:0; background-color:#000; opacity:.7; z-index:-1;
}
.home-section .home-bg{
  position:absolute; inset:0; background-image:url('../img/footer/footer2_1.webp');
  background-attachment:fixed; background-size:cover; background-position:center; z-index:-2;
  animation:zoomInOut 20s ease infinite;
}
.home-section .min-vh-100{ padding:100px 0; }
.home-text{ padding:0 15px; max-width:700px; width:100%; margin:auto; text-align:center; }
.home-text h1{ font-family:var(--cursive-font); font-size:60px; line-height:75px; margin:0 0 5px; }
.home-text p{ margin:0 0 30px; }

/* --------------------
   ABOUT
---------------------*/
.about-section{ background-color:var(--dark); }
.about-text,.about-img{ width:50%; padding:0 15px; }
.about-text h3{ font-size:30px; text-transform:capitalize; margin:0 0 15px; }
.about-text p{ margin:0 0 15px; }
.about-text .btn{ margin:15px 0 0; }
.about-img img{ width:100%; border-radius:10px; }
.about-img .img-box{ position:relative; }
.about-img .img-box::before{
  content:''; position:absolute; height:100px; width:100px; border:3px solid var(--main-color);
  left:calc(50% - 50px); top:calc(50% - 50px); animation:spin01 10s linear infinite;
}
.about-img .img-box h3{
  position:absolute; left:50%; top:50%; width:100%; max-width:250px; text-align:center;
  transform:translate(-50%,-50%); font-size:30px; font-family:var(--cursive-font);
  color:var(--dark); font-weight:bold; text-transform:capitalize;
}

/* -----------------
   MENU
------------------*/
.menu-section{ background-color:var(--dark); padding-bottom:60px; }
.menu-section .section-title{ margin-bottom:40px; }
.menu-tabs{ padding:0 15px; width:100%; text-align:center; margin-bottom:30px; }
.menu-tab-item{
  font-size:18px; text-transform:capitalize; border:none; background:transparent; font-weight:500;
  color:var(--white); cursor:pointer; margin:0 10px 10px; transition:color .3s ease; display:inline-block;
}
.menu-tab-item.active{ color:var(--main-color); }
.menu-tab-content{ display:none; }
.menu-tab-content.active{ display:flex; }

.menu-item-title img{
  width:100%; height:200px; object-fit:cover; border-radius:8px 8px 0 0;
}
.menu-item{
  max-width:300px; margin:15px auto; border:1px solid #eee; border-radius:8px; overflow:hidden;
  background-color:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.1); text-align:center;
}
.menu-item h3{ margin:10px 0; font-size:1.1rem; color:#333; }
.menu-item:hover .menu-item-title h3{ color:var(--main-color); }
.menu-item-price{ padding:10px; font-weight:bold; color:#8B0000; }
.menu-item:hover .menu-item-price{ color:var(--white); }

/* -----------------
   MAP / NEXT STOP
------------------*/
.location-section{ padding:60px 0; background-color:#0c1023; text-align:center; }
.location-section h2{ margin-bottom:30px; font-size:2rem; text-transform:uppercase; }
#map{ width:100%; height:400px; border-radius:8px; box-shadow:0 2px 12px rgba(0,0,0,0.15); }

/* -----------------
   TEAM
------------------*/
.team-section{ background-color:var(--dark); padding-bottom:125px; }
.team-item{ width:calc(100% / 3); padding:0 15px; position:relative; }
.team-item img{ width:100%; border-radius:8px; transition:transform .3s ease; }
.team-item:hover img{ transform:skewY(2deg); }
.team-item-info{
  background-color:var(--dark-light); border-radius:8px; padding:15px; text-align:center;
  position:absolute; left:30px; right:30px; bottom:0; transform:translateY(50%);
  transition:all .3s ease; pointer-events:none;
}
.team-item:hover .team-item-info{ transform:translateY(-15px); background-color:var(--main-color); }
.team-item-info h3{ font-size:18px; text-transform:capitalize; margin:0 0 10px; }
.team-item-info p{ text-transform:capitalize; transition:all .3s ease; }
.team-item:hover .team-item-info p{ color:var(--white); }

/* --------------------
   FOOTER
---------------------*/
.footer{
  padding:80px 0 0;
  background-image:url('../img/background/background_brisket2_4.webp');
  background-size:cover; background-attachment:fixed; background-position:center;
  position:relative; z-index:1;
}
.footer::before{
  content:''; position:absolute; inset:0; background-color:rgba(0,0,0,0.7); z-index:-1;
}
.footer-item{ width:calc(100% / 3); padding:0 15px; text-align:center; }
.footer-item h3{ text-transform:capitalize; font-size:22px; margin:0 0 15px; }
.footer-item p{ line-height:30px; }
.footer-item .social-links{ margin-top:15px; }
.footer-item .social-links a{
  display:inline-flex; height:40px; width:40px; color:var(--white-light); font-size:22px;
  align-items:center; justify-content:center; transition:color .3s ease;
}
.footer-item .social-links a:hover{ color:var(--main-color); }
.footer .copyright{
  margin:80px 0 0; width:100%; text-align:center; padding:25px 15px; font-size:14px;
  border-top:1px solid var(--white-light);
}

/* --------------------
   IMAGE LIGHTBOX
---------------------*/
.img-popup{
  display:none; position:fixed; z-index:9999; inset:0; background:rgba(0,0,0,0.8);
  justify-content:center; align-items:center; flex-direction:column;
}
.close-btn{
  position:absolute; top:20px; right:30px; font-size:2rem; color:white; cursor:pointer; z-index:10000;
}
.img-popup img{
  width:40%; max-width:400px; height:auto; border-radius:12px; box-shadow:0 0 20px rgba(255,255,255,0.2);
  transition:transform .3s ease;
}
@media (max-width:768px){ .img-popup img{ width:90%; } }

/* --------------------
   FLYING COW OVERLAY
---------------------*/
.sky-scene{
  position:fixed;
  left:0; right:0; top:50px; height:220px;
  pointer-events:none; z-index:10;
  contain:layout paint;
}
.sky-scene .cloud{
  position:absolute; background:#fff; border-radius:999px; padding:5px 5px;
  display:flex; align-items:center; justify-content:center; opacity:.92;
  box-shadow:0 6px 20px rgba(0,0,0,0.08); z-index:5;
  animation-name:cloudMove; animation-timing-function:linear; animation-iteration-count:infinite;
}
.sky-scene .cloud::before,
.sky-scene .cloud::after{
  content:""; position:absolute; background:#fff; border-radius:50%; z-index:-1;
}
.sky-scene .cloud::before{ width:60px; height:60px; left:-20px; top:-10px; }
.sky-scene .cloud::after{ width:70px; height:70px; right:-25px; top:10px; }
.sky-scene .cloud1{ top:40px; left:-260px; animation-duration:40s; }
.sky-scene .cloud2{ top:90px; left:-320px; animation-duration:55s; }
.sky-scene .cloud3{ top:10px; left:-300px; animation-duration:65s; }
.cloud .cloud-label{
  font-family:'Poppins',sans-serif; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  font-size:clamp(14px,4vw,28px); color:#222; text-shadow:0 2px 6px rgba(0,0,0,0.18);
  padding:0 10px; pointer-events:none;
}

/* Plane + banner */
.airplane{
  position:absolute;
  top:110px;
  left:-220px;
  display:flex;
  align-items:center;
  flex-direction:row-reverse;
  will-change:transform;
  animation:planeFly 18s linear infinite;
}
.airplane img{
  width:150px;
  height:auto;
  animation:planeBob 2s ease-in-out infinite;
}
.rope{
  margin-right:-10px;
  transform:scaleX(-1);
}
.banner{
  background:var(--main-color);
  color:#111;
  padding:8px 14px;
  border-radius:6px;
  font-weight:700;
  font-family:'Poppins',sans-serif;
  transform-origin:right center;
  animation:bannerSwing 2.2s ease-in-out infinite;
}

/* === Make cow clickable, others non-blocking === */
.sky-scene { pointer-events:none; }
.sky-scene .airplane { pointer-events:auto; z-index:6; }
.sky-scene .airplane img {
  position:relative; z-index:7; pointer-events:auto; cursor:pointer;
}
.sky-scene .rope,
.sky-scene .cloud,
.sky-scene .banner { pointer-events:none; }
.sky-scene .rope { z-index:4; }
.sky-scene .banner { z-index:5; }
.sky-scene .cloud { z-index:3; }

/* --------------------
   RESPONSIVE
---------------------*/
@media(max-width:991px){
  .team-item{ width:50%; }
  .team-item:not(:last-child){ margin-bottom:75px; }
}
@media(max-width:767px){
  .home-text h1{ font-size:50px; line-height:65px; }
  .menu-item,.about-text,.about-img{ width:100%; }
  .about-img{ margin-top:40px; }
  .about-text h3{ font-size:24px; }
  .footer-item{ width:100%; }
  .footer-item:not(:last-child){ margin-bottom:30px; }
}
@media(max-width:575px){
  .team-item{ width:100%; }
}

/* --------------------
   PERFORMANCE HELPERS
---------------------*/
@media (max-width:1024px){
  .home-section .home-bg,
  .footer{
    background-attachment: scroll !important; /* disable fixed on mobile/tablets for perf */
  }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .home-section .home-bg{ animation: none !important; }
}

/* Only render below-the-fold when needed */
.menu-section,
.about-section,
.team-section,
.location-section,
.footer{
  content-visibility: auto;
  contain-intrinsic-size: 900px; /* reserve space to avoid layout jump */
}

/* Slightly lighter shadows (cheaper to paint) */
.menu-item{ box-shadow: 0 2px 8px rgba(0,0,0,0.1); }