html { font-size: 12px; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.wrapper{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #255748;
}

.scale-container{
  width: 1080px;
  height: 1080px;

  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
}

.stage{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;

  padding: 5%;
}


.cup, .bean, .overlay, .centerText { position: absolute; }


.cup{
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, 90vw); 
  transform: translate(-50%, -50%) scale(2.2); 
  transform-origin: center;
  z-index: 2;
}


.bean{
  position: absolute;
  width: 60px;           
  opacity: 0;             
  transform: translate(-50%, -50%);
  z-index: 3;             
}

/* TOP AREA */
.b1  { left: 38%; top: 28%; }
.b2  { left: 48%; top: 24%; }
.b3  { left: 58%; top: 30%; }

/* RIGHT SIDE (clustered slightly) */
.b4  { left: 65%; top: 35%; }
.b5  { left: 62%; top: 52%; }
.b6  { left: 65%; top: 76%; }

/* BOTTOM AREA */
.b7  { left: 60%; top: 66%; }
.b8  { left: 45%; top: 68%; }

/* LEFT SIDE (fewer beans) */
.b9  { left: 38%; top: 60%; }
.b10 { left: 35%; top: 45%; }

/* GREEN OVERLAY */
.overlay{
  position: absolute;
  inset: 0;         
  background: #255748;
  opacity: 0;        
  z-index: 5;
}

/* CENTER TEXT */
.centerText{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.word{
  position: absolute; 
  font-family: system-ui, -apple-system, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff;
  text-align: center;

  font-size: clamp(5rem, 10vw, 10rem); 
  line-height: 1;
  opacity: 0;
  transform: scale(0.6);
}

/* SCENE 2 container */
.scene2{
  position: absolute;
  inset: 0;
  opacity: 0;        
  pointer-events: none;
  z-index: 9;
}

/* Tagline in center */
.tagline{
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: whitesmoke;
  font-family: system-ui, -apple-system, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.tword{
  display: block;
  font-size: 6rem;
  line-height: 1.05;
  opacity: 0;
  transform: scale(0.7);
}

/* Cups row */
.flavors{
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  width: min(1100px, 95vw);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2%;
}

.flavorCard{
  position: relative;
  width: 24%;
  min-width: 180px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.drink{
  width: 100%;
  max-width: 260px;
  opacity: 0;
  transform: scale(0.7);
  transform-origin: center bottom;
}

.flavors{
  position: relative;
  width: 100%;
  height: 100%;
}


.flavorTitle{
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: min(92%, 60rem);
  text-align: center;
  color: #fff;
  font-weight: 800;
  line-height: 0.9;
  z-index: 50;

  opacity: 0; 
}

.flavorTitle span{
  display: block;
  font-size: 12rem; 
}



.cta1{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  opacity: 0;
  z-index: 20; 
}

.ctaLogo{
  width: min(18rem, 45vw);
  margin-top: 6rem; 
  transform-origin: 50% 50%;
  opacity: 0;
}

.ctaText{
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: "Oswald", sans-serif; /* or your font */
  font-weight: 800;
  letter-spacing: 0.06em;
}

.ctaLine{
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 0.9;
  opacity: 0;
  transform-origin: 50% 50%;
}

.ctaLine.big{
  font-size: clamp(5rem, 12vw, 10rem);
}