/* styles.css — Clean, organized, commented
   Color palette: primary #B33F62, text white (#FFFFFF), cream #FFEEDD
   Fonts: Great Vibes (logo), Merriweather (tagline), Baloo 2 (buttons)
*/

:root{
  --primary:#4A1F1B;
  --cream:#FFEEDD;
  --white:#FFFFFF;
  --beige:#F6EAD8; /* for button background */
}

*{box-sizing:border-box}
html,body{height:100%}
html{
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
body{
  margin:0;
  font-family: 'Merriweather', serif;
  background: radial-gradient(60% 60% at 50% 20%, rgba(0,0,0,0.08), transparent 30%), linear-gradient(180deg, #5A2F2B 0%, var(--primary) 60%);
  color:var(--white);
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Vignette overlay for soft dark fade */
.vignette{
  position:fixed; inset:0; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 20%, rgba(0,0,0,0.18), rgba(0,0,0,0.45));
  mix-blend-mode:multiply;
}

.topbar{
  position:relative;
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
}

.logo{
  max-width:412px;
  height:auto;
  max-height:168px;
  object-fit:contain;
  z-index:50;
}

.tab-btn{
  position:absolute;
  top:28px;
  padding:14px 28px;
  border-radius:30px;
  border: 2px solid rgba(255,255,255,0.15);
  background:linear-gradient(135deg, #F8EFE0 0%, var(--beige) 100%);
  color:#2c1810;
  font-family: 'Baloo 2', cursive;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.4);
  transition:all .3s cubic-bezier(.4,0,.2,1);
  text-transform:lowercase;
  letter-spacing:0.5px;
}
.tab-btn.left{left:300px}
.tab-btn.right{right:300px}

.tab-btn:hover{
  transform:translateY(-8px) scale(1.05);
  box-shadow:0 20px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.6);
  background:linear-gradient(135deg, #FFFAF0 0%, #F8EFE0 100%);
  border-color:rgba(255,255,255,0.3);
}

.tab-btn:active{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
}

/* Hero layout */
.hero{
  min-height: 100vh;
  min-height: 100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:20px 10px 120px;
  position:relative;
}

.scene{
  width:100%;
  max-width:1400px;
  position:relative;
  display:block;
  min-height:550px;
  margin-bottom:40px;
}

.images-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  width:100%;
  position:relative;
}

.food{
  width:317px;
  height:317px;
  object-fit:cover;
  border-radius:18px;
  transition:transform .7s ease, filter .7s ease, opacity .8s ease;
  opacity:0;
  background:transparent;
  flex-shrink:0;
  filter:blur(2px);
  will-change:transform, opacity;
}

.img-sandwich{order:-2; margin-right:-150px; z-index:1; position:relative; top:-90px; width:317px; height:317px;}
.img-burger{order:-1; margin-right:-250px; width:494px; height:494px; z-index:2; position:relative; top:10px; left:-20px;}
.coffee-cup{
  width:524px;
  height:524px;
  object-fit:contain;
  border-radius:40%;
  opacity:0;
  transition:transform .7s ease, opacity .8s ease;
  flex-shrink:0;
  order:0;
  filter:drop-shadow(0 0 40px rgba(255,220,170,0.6)) drop-shadow(0 0 80px rgba(255,200,120,0.4));
  z-index:3;
  margin:0;
  position:relative;
  left:-25px;
}
.img-noodle{order:1; margin-left:-180px; width:395px; height:395px; z-index:2; position:relative; top:-30px;}
.img-ramen{order:2; margin-left:-200px; z-index:1; position:relative; top:-90px; width:317px; height:317px;}

/* Steam animation */
.steam{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -180px);
  width:80px;
  height:140px;
  pointer-events:none;
  z-index:50;
}
.steam span{position:absolute; left:50%; width:10px; height:40px; border-radius:50%; background:linear-gradient(0deg, rgba(255,255,255,0.7), rgba(255,255,255,0.12)); transform-origin:center; opacity:0;}
.steam span:nth-child(1){transform:translateX(-26px) scaleX(1.2); animation:steam 3s infinite ease-in-out .2s}
.steam span:nth-child(2){transform:translateX(0px) scaleX(1); animation:steam 3.6s infinite ease-in-out .5s}
.steam span:nth-child(3){transform:translateX(26px) scaleX(.9); animation:steam 4s infinite ease-in-out .9s}

@keyframes steam{
  0%{opacity:0; transform:translateY(10px) scaleY(.8) scaleX(1);}
  40%{opacity:.9; transform:translateY(-18px) scaleY(1.06) scaleX(1.04);}
  100%{opacity:0; transform:translateY(-90px) scaleY(1.3) scaleX(1.08);}
}

/* Taglines */
.taglines{
  text-align:center;
  z-index:60;
  position:relative;
  margin-top:-170px;
  padding-top:0;
}
.tagline{font-size:20px; color:var(--cream); letter-spacing:.6px; margin-bottom:10px;}
.subtag{font-size:13px; color:var(--cream); text-transform:lowercase; letter-spacing:6px;}

/* swipe up */
.swipe-up{position:absolute; left:50%; transform:translateX(-50%); bottom:8px; text-align:center; color:var(--cream); font-size:12px; opacity:.92; z-index:100;}
.swipe-text{font-size:12px; color:var(--cream);}
.arrow{font-size:22px; margin-top:6px; animation:arrow 1.6s infinite ease-in-out}
@keyframes arrow{0%{transform:translateY(0);opacity:.9}50%{transform:translateY(8px);opacity:1}100%{transform:translateY(0);opacity:.9}}

/* Fade-in animations triggered by .loaded body class */
body.loaded .food{opacity:1; transform:translateY(0);}
body.loaded .coffee-cup{opacity:1; transform:translateY(0);}
body.loaded .img-sandwich{animation:fadeIn .9s ease both .2s}
body.loaded .img-burger{animation:fadeIn .9s ease both .35s}
body.loaded .coffee-cup{animation:popIn .9s cubic-bezier(.1,.9,.3,1) both .5s}
body.loaded .img-noodle{animation:fadeIn .95s ease both .65s}
body.loaded .img-ramen{animation:fadeIn .95s ease both .8s}

@keyframes fadeIn{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)}}
@keyframes popIn{from{opacity:0; transform:scale(.86) translateY(8px)}60%{transform:scale(1.04) translateY(-6px)} to{opacity:1; transform:scale(1) translateY(0)}}

/* Responsive rules */
@media (max-width:1200px){
  .tab-btn.left{left:100px}
  .tab-btn.right{right:100px}
  .logo{max-width:350px; max-height:140px}
}

@media (max-width:920px){
  .tab-btn.left{left:30px}
  .tab-btn.right{right:30px}
  .logo{max-width:300px; max-height:120px}
  .scene{min-height:450px}
  
  .img-sandwich{width:250px; height:250px; margin-right:-80px; top:-60px;}
  .img-burger{width:380px; height:380px; margin-right:-150px; top:10px; left:-15px;}
  .coffee-cup{width:420px; height:420px; left:-20px;}
  .img-noodle{width:320px; height:320px; margin-left:-140px; top:20px;}
  .img-ramen{width:250px; height:250px; margin-left:-150px; top:0;}
}

@media (max-width:768px){
  .topbar{height:auto; padding:15px 10px; flex-direction:column; gap:12px;}
  .tab-btn{position:static; padding:14px 28px; font-size:14px; margin:0 8px; min-height:48px;}
  .tab-btn.left, .tab-btn.right{left:auto; right:auto;}
  
  .logo{max-width:450px; max-height:160px; order:-1;}
  
  .hero{padding:15px 10px 80px; overflow-x:hidden;}
  .scene{
    min-height:auto; 
    margin-bottom:20px; 
    transform:translateY(-65%);
    max-width:100vw;
    overflow:hidden;
  }
  
  .images-row{
    display:flex; 
    flex-direction:row; 
    align-items:center; 
    justify-content:center; 
    gap:0; 
    max-width:100%; 
    padding:0 10px;
    position:relative;
  }
  
  /* Base food styling with proper cropping for mobile */
  .food{
    position:relative;
    margin:0;
    filter:blur(1px);
    object-fit:cover;
    /* Adjust crop: change X% to shift left/right, Y% to shift up/down */
    object-position:50% 50%;
  }
  
  /* Hide sandwich and ramen on mobile */
  .img-sandwich, .img-ramen{display:none;}
  
  /* Burger - crop more from left side to prevent cut-off */
  .img-burger{
    width:320px; 
    height:320px; 
    top:-10px;
    margin-right:-50px;
    z-index:2;
    /* Shift visible area right by 60% to show right portion of burger */
    object-position:60% 50%;
  }
  
  /* Coffee - keep perfectly centered */
  .coffee-cup{
    position:relative;
    width:450px; 
    height:450px; 
    left:0;
    margin:0 -50px;
    z-index:3;
    order:0;
    object-fit:contain;
    object-position:center center;
  }

  /* Noodle - crop more from right side to prevent cut-off */
  .img-noodle{
    width:320px; 
    height:320px; 
    top:-35px;
    margin-left:-50px;
    z-index:2;
    /* Shift visible area left by 40% to show left portion of noodle */
    object-position:40% 50%;
  }

  .steam{display:none;}
  
  .taglines{padding-top:15px; padding-left:15px; padding-right:15px;}
  .tagline{font-size:18px; line-height:1.5;}
  .subtag{font-size:12px; letter-spacing:3px;}
}

@media (max-width:480px){
  .logo{max-width:260px; max-height:104px;}
  .tab-btn{padding:12px 24px; font-size:13px; min-height:44px;}
  
  .hero{padding:10px 8px 60px;}
  
  .hero{overflow-x:hidden;}
  .images-row{gap:0; padding:0 5px; overflow:hidden;}
  
  /* Smaller screens - adjust crop for better fit */
  .img-burger{
    width:260px; 
    height:260px; 
    margin-right:-40px;
    object-position:65% 50%;
  }
  
  .coffee-cup{
    width:360px; 
    height:360px; 
    left:0;
    margin:0 -40px;
    object-position:center center;
  }
  
  .img-noodle{
    width:260px; 
    height:260px; 
    margin-left:-40px;
    object-position:35% 50%;
  }
  
  .tagline{font-size:16px; line-height:1.4; padding:0 10px;}
  .subtag{font-size:11px; letter-spacing:2px;}
  
  .swipe-up{bottom:20px;}
}

@media (max-width:360px){
  .logo{max-width:250px; max-height:100px;}
  
  .hero{overflow-x:hidden;}
  .images-row{gap:0; padding:0; overflow:hidden;}
  
  /* Smallest screens - aggressive crop for narrow viewports */
  .img-burger{
    width:210px; 
    height:210px; 
    margin-right:-35px;
    object-position:70% 50%;
  }
  
  .coffee-cup{
    width:290px; 
    height:290px; 
    left:0;
    margin:0 -35px;
    object-position:center center;
  }
  
  .img-noodle{
    width:210px; 
    height:210px; 
    margin-left:-35px;
    object-position:30% 50%;
  }
  
  .tagline{font-size:14px;}
  .subtag{font-size:10px; letter-spacing:2px;}
}

/* small accessibility focus styles */
.tab-btn:focus{outline:3px solid rgba(255,238,221,0.28); outline-offset:3px}

/* About Section */
.about-section{
  padding:80px 20px;
  max-width:1200px;
  margin:0 auto;
  position:relative;
  z-index:10;
  scroll-margin-top:80px;
}

.about-container{
  text-align:center;
}

.about-badge{
  display:inline-block;
  padding:8px 20px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:20px;
  color:var(--cream);
  font-family:'Baloo 2', cursive;
  font-size:14px;
  margin-bottom:20px;
  backdrop-filter:blur(10px);
}

.about-title{
  font-family:'Great Vibes', cursive;
  font-size:56px;
  color:var(--cream);
  margin:0 0 25px 0;
  font-weight:400;
}

.about-text{
  font-family:'Merriweather', serif;
  font-size:18px;
  line-height:1.8;
  color:rgba(255,255,255,0.85);
  max-width:800px;
  margin:0 auto 50px;
}

.about-features{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:30px;
  margin-top:40px;
}

.feature-card{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;
  padding:30px 20px;
  transition:all 0.3s ease;
  backdrop-filter:blur(10px);
  min-height:180px;
}

.feature-card:hover{
  transform:translateY(-10px);
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.3);
}

.feature-icon{
  font-size:48px;
  display:block;
  margin-bottom:15px;
}

.feature-card h3{
  font-family:'Baloo 2', cursive;
  font-size:22px;
  color:var(--cream);
  margin:0 0 10px 0;
}

.feature-card p{
  font-family:'Merriweather', serif;
  font-size:14px;
  color:rgba(255,255,255,0.7);
  line-height:1.6;
  margin:0;
}

/* Why Section */
.why-section{
  padding:80px 20px;
  background:rgba(0,0,0,0.2);
  position:relative;
  z-index:10;
}

.why-container{
  max-width:1200px;
  margin:0 auto;
}

.why-title{
  font-family:'Great Vibes', cursive;
  font-size:56px;
  color:var(--cream);
  text-align:center;
  margin:0 0 60px 0;
  font-weight:400;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:25px;
}

.why-card{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;
  padding:35px 25px;
  position:relative;
  transition:all 0.3s ease;
  backdrop-filter:blur(10px);
}

.why-card:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.3);
}

.why-number{
  position:absolute;
  top:-15px;
  right:25px;
  font-family:'Baloo 2', cursive;
  font-size:48px;
  font-weight:700;
  color:rgba(255,255,255,0.1);
}

.why-card h3{
  font-family:'Baloo 2', cursive;
  font-size:22px;
  color:var(--cream);
  margin:0 0 12px 0;
}

.why-card p{
  font-family:'Merriweather', serif;
  font-size:14px;
  color:rgba(255,255,255,0.75);
  line-height:1.6;
  margin:0;
}

/* Community Section */
.community-section{
  padding:80px 20px;
  max-width:900px;
  margin:0 auto;
  position:relative;
  z-index:10;
}

.community-container{
  background:linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  border:1px solid rgba(255,255,255,0.2);
  border-radius:30px;
  padding:50px 40px;
  text-align:center;
  backdrop-filter:blur(20px);
}

.community-title{
  font-family:'Great Vibes', cursive;
  font-size:48px;
  color:var(--cream);
  margin:0 0 20px 0;
  font-weight:400;
}

.community-text{
  font-family:'Merriweather', serif;
  font-size:16px;
  line-height:1.8;
  color:rgba(255,255,255,0.85);
  margin:0 0 35px 0;
}

.community-perks{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:20px;
  margin-bottom:35px;
}

.perk-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-family:'Baloo 2', cursive;
  font-size:15px;
  color:rgba(255,255,255,0.9);
}

.perk-emoji{
  font-size:32px;
  display:block;
}

.cta-btn{
  padding:15px 40px;
  border-radius:30px;
  border:none;
  background:linear-gradient(135deg, #F8EFE0 0%, var(--beige) 100%);
  color:#2c1810;
  font-family:'Baloo 2', cursive;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s ease;
  text-transform:lowercase;
  min-height:48px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.cta-btn:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

/* Footer */
.main-footer{
  background:rgba(0,0,0,0.3);
  border-top:1px solid rgba(255,255,255,0.1);
  padding:60px 20px 20px;
  position:relative;
  z-index:10;
}

.footer-content{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:40px;
  margin-bottom:40px;
}

.footer-col h4{
  font-family:'Baloo 2', cursive;
  font-size:20px;
  color:var(--cream);
  margin:0 0 20px 0;
}

.footer-col ul{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-col ul li{
  margin-bottom:12px;
}

.footer-col a{
  font-family:'Merriweather', serif;
  font-size:14px;
  color:rgba(255,255,255,0.7);
  text-decoration:none;
  transition:color 0.3s ease;
}

.footer-col a:hover{
  color:var(--cream);
}

.footer-col p{
  font-family:'Merriweather', serif;
  font-size:14px;
  color:rgba(255,255,255,0.7);
  margin:0 0 8px 0;
  line-height:1.6;
}

.footer-bottom{
  text-align:center;
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,0.1);
}

.footer-bottom p{
  font-family:'Baloo 2', cursive;
  font-size:14px;
  color:rgba(255,255,255,0.6);
  margin:0;
}

/* Responsive for new sections */
@media (max-width:768px){
  .about-section, .why-section, .community-section{
    padding:50px 20px;
  }

  .about-title, .why-title{
    font-size:42px;
  }

  .about-text{
    font-size:16px;
  }

  .about-features{
    grid-template-columns:1fr;
    gap:20px;
  }

  .why-grid{
    grid-template-columns:1fr;
  }

  .community-container{
    padding:35px 25px;
  }

  .community-title{
    font-size:36px;
  }

  .community-perks{
    grid-template-columns:repeat(2, 1fr);
  }

  .footer-content{
    grid-template-columns:repeat(2, 1fr);
    gap:30px;
  }
}

@media (max-width:480px){
  .about-section, .why-section, .community-section{
    padding:40px 15px;
  }
  
  .about-title, .why-title{
    font-size:36px;
    line-height:1.2;
  }
  
  .about-text{
    font-size:15px;
    line-height:1.7;
  }

  .community-title{
    font-size:28px;
  }

  .community-perks{
    grid-template-columns:1fr;
  }

  .footer-content{
    grid-template-columns:1fr;
    gap:25px;
  }
  
  .main-footer{
    padding:40px 15px 15px;
  }
  
  .feature-card, .why-card, .sustain-card{
    padding:25px 18px;
  }
  
  .community-container{
    padding:30px 20px;
  }
}